J.me

Responsive layout testing

While working on a responsive website, testing it could be tricky. The usual way (and effective) is to resize the browser window and there’s many plugins on the browser that do just that. Another way is to use an available tools on the web, many of these are awesome, like The Responsinator and Screenqueri.es. Another one that is also my favorite is RWD Bookmarklet by Victor Coulon.

These were all cool and I frequently used it. However, these tools were made for testing on mobile and tablet display resolution, what if, you want to test a laptop or desktop resolution as well? In my case, I have 1280×800 laptop, so I never knew how the website will look on higher resolution screen. There’s also many display resolution on mobile now to consider, not just iOS resolution.

And so I created a simple tool to test responsive website, with a wide range of resolution to select, from mobile to tablet to desktop. Also HDPI display is common now, so I added a device pixel ratio selection that calculate the effective resolution. For example, Motorola RAZR have QHD display with pixel ratio of 1.5, so the effective resolution is actually 640×360, that is the resolution the phone display on it’s browser.

Feel free to use the tool here: responsive.jeffri.net

A little bit of disclaimer, I don’t store any data from your usage. There’s no trip to the server when you use it, at all. 🙂

Hope you find it useful! Cheers!

Pure CSS3 responsive navigation with :target

This is an experiment I tried when working on WPMUDEV mobile navigation a while back, basically to make the navigation work with CSS alone. Using :target pseudo-class, this is possible, but of course it won’t work very well on every navigation.

For the sake of this demonstration, I have made a responsive navigation that will scale between smartphone, tablet and desktop.

Background image on table row

Applying a background image on table row is a classic issue that never get right, at least not in a first few pages on Google search when I looked on a solution. In fact, the only cross browser solution is to apply the background to the table cells instead. But what happen if you want a repeated background across the table row?

The problem

Let’s say you wanted to apply a background to a row that has disabled class.

The CSS:

table tr.disabled {
	background: url('disabled.png') repeat-x;
	color: #aaa;
}

Result:

Ouch! The background is in fact applied to the table cell, not the table row as we intended. It looks ugly as the image start in every cell!

How to create WordPress template part 2

Now is the part 2. If you haven’t read the part 1 yet, go here to read it. If in the part 1 we have make the graphics we need to build the template, now it is the time to play with CSS and HTML. But first, before we going further, we must first understand the WordPress template hirearchy. The WordPress template, in the very minimum, need at least two files, style.css and index.php. We can however have more files that recognized by WordPress to deliver different look on different requested page. But now, we create the standar template, at least we have header.php, footer.php, sidebar.php, index.php, comments.php, functions.php and style.css.

How to create WordPress template part 1

Do you want to create your own WordPress template? It is not hard actually if you have enough knowledge of XHTML (or HTML) and CSS, and a little basic of PHP. This guide will split into multiple part as it is quite long. This is my way of creating WordPress template, so it might different than you. The first part is for preparation and designing, I haven’t touch the coding part yet, it will be on second part. I will make it with example and this example will be available to download for everyone later. Hehe… 🙂

First is the preparation. For me, I will take a paper and a pen and start thinking of how the template will look like. Hmm… As of now, I will create a simple templates like usual blog template. One header with logo and description on top, one sidebar on left side, the content is on the center (right side from the sidebar), and one footer on bottom. That’s it. Okay, once you are ready then, let’s open your favorite graphics editor. For me, it is GIMP.