So, I’ve discovered the awesome world of CSS3, Media Queries and the concept of responsive layout. What is this you ask? Well it is the next evolution in designing for the web.
It used to be that you had to worry a great deal about the resolution of the user’s computer screens. It was suicide to cause the users to have a horizontal scroll bar in their browser window. This was solved by one of a couple common options:
- Design for the lowest common denominator. I can remember designing for 640×480 screens. It was painful. You had to make a website fit into no more than 620px wide… you had to subtract the pixels that the browser itself took up on the screen.
- Design with fluid widths. You set each content area to scale to a constant percentage of the width of the browser window. This was nice, but hard to really control the design.
As screens became cheaper and larger, this became somewhat less of an issue.
The issue these days is sort of the same! With the increasing growth of tablet and smartphones, once again, the size that a webpage has to fit into is an issue. Recently there have been only a few, all problematic solutions:
- Have a separate website for mobile devices. Direct your users to something like mobile.company.com or company.mobi. This treats the mobile user as a 2nd class citizen. While the desktop user gets the real website, the mobile users get some pared-down site that often hasn’t the info they need and/or doesn’t allow the user to even access the full version of the site.
- The next option is to use a bit of code that loads a different, “mobile-ready” CSS or theme for the site. This works relatively well, but the design is usually severely lacking.
- You can still use fluid layouts, but they are much harder to use effectively since the differences between the smartphone screen and the larger monitors is so great.
- Lastly, and this is most often the case, just let the mobile users deal with the regular site… this works, right? I mean how many people actually surf the web on their phones?
Enter the latest version of CSS (Cascading Stylesheets). CSS is what handles what most web pages look like. The web page itself SHOULD just be the content. It has a new item called Media Queries! This allows the CSS to tell the browser to do different things with the content depending in the width of the browser window. This is sort of like the fluid layouts mentioned above, but WAY more elegant. You can swap out various items like having a regular navigation menu on a normal to large screen and changing that on the fly for a pull-down box to be seen on a smartphone.
Here are some amazing examples:
So… I’m experimenting with some layouts using these new techniques. Take the current layout and try it out by resizing your browser window. Pretty awesome! I’ll likely be experimenting with various layouts and new designs as I dig deeper.