I’m busier than a beaver I do believe. One of the numerous things I’m working on is getting a handle on a concept called, ‘Responsive Design.’
In working with a friend of mine, the topic was brought up and I realized research on my part was fast approaching.
Responsive Design works like this: Your style-sheet (css) queries to see what screen size your site visitor is using. When it figures that out, it looks at your style-sheet and uses the styles you have assigned for that particular screen size. So no matter what mobile (or non-mobile) device your visitors are utilizing, if the screen size fits one of the parameters you’ve set up, it customizes the screen space and thus the user/visitor experience. (a.k.a it moves all the elements, text, etc., on your website around so that everything fits in an organized, pretty, and low-stress level manner – regardless of the device or screen size accessing your site.)
Now, are you reading this thinking, “Well, I don’t do a lot on mobile. I don’t even have a tablet! I should not have to look into this whole responsive design thing.”
Well, I’ll tell ya, it’s like this – what are your site stats like? Or your clients stats?
If a good portion of the traffic your site receives is from mobile devices, it is a topic worth considering.
And even if you don’t have a client right now who is requesting a mobile presence (wow) then you have the perfect opportunity to explore without a deadline and you will get good at adding responsive elements into your designs to boot!
I personally like having the option for non-mobile website surfing when I’m on a smaller screen. This might change when more mobile designs get a better handle on how mobile users want to surf.
So anyway, I’m still in the midst of researching responsive design and taking what I am learning and using it. I’ll write more on the topic when I get more.
To get you going on the topic now though, I’ve added a link to the end of the article. This blog has a great demo that you should open up in a new window. Then, proceed to play a game of ‘spot the differences’. Look for how the elements change when you make the window size smaller. Then you can read through the tutorial and refer back to the demo. It will get you off to a good start.
Za link: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Until Next Time,
P.S. Dare I mention that I am currently watching the Christmas classic film, “White Christmas” in the background? =)
This is a work in progress. Last updated Fall 2012