Being an iPhone App developer, I tend to think of my ideas as mobile websites first. With such a limited real estate, especially on a phone, you have to give a lot of careful thought as to what information you put on the screen, and more specifically, in what order. When designing the new landing page for zsprawl.com, I was determined to make a page that would look great on everything from an older Android device all the way to the crazy widescreen resolutions that we use today. Now, more than ever, people are viewing web content on devices other than their desktop computers. How does one know the proper way to approach this?

My philosophy is to design for the mobile market first. Some study that I don’t remember reading says that more people are surfing mobile than ever. Screen resolutions getting a bit ridiculous, and there really is no way to target them all, so the first thing you have to do is swap from fixed points to relative percentages.

For example:

1
2
3

#randomImage {
    width: 120px;
}

#randomImage {
    width: 120px;
}

should instead be represented in percentage values

1
2
3

#randomImage {
    width: 100%;
}

#randomImage {
    width: 100%;
}

Now, I’ve tried this method in the past, but the one thing I was missing was the reference. As you know, when you say 100%, you have to ask yourself “100% of what?”. That is the tricky part, you have to always ask yourself what context you are in. If this #randomImage is sitting in a div, and you want it to fill that div, then 100% would do the trick. However, if it’s just a single image in a body tag, 100% is going to fill your entire screen. This method requires you to shift your way of thinking, but it is a great start to making your page scale-able to any resolution. Of course, if you plan on having different layouts (not just scale and zoom) of your webpage, you need to look into CSS media queries. More on that in my next blog post!

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.