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.
should instead be represented in percentage values
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!