The world wide web isn’t what it used to be. Back in the day you only had to develop for one screen. One screen that was a nice square 15″ CRT monitor, whose resolution you could safely predict would be 1024×768 or less. Back in those days you had the glory of CSS1 and table based layouts. You were content and happy because that’s all you knew and it worked well enough for you.
Today’s world wide web is so different it’s downright frightening. We still have those wonderful 15″ CRT monitors floating around the world. We also have 11″ MacBook Air’s, 24″ monitors, and LCD TVs. There’s so many different resolutions in use today it’s enough to make your head spin.
One of the newest resolutions that we web developers have to combat are found on our beloved mobile devices. Our iPhones, Androids, and Windows Mobile Phone Mobile Phone 7 (not a typo, I believe that is its real name). Our mobile phones with resolutions of 640×320 that can change at a moments notice to 320×640. Oh if only we could go back to the joyful times of yesterdays…
But never fear! We have tools at our disposal to conquer these finicky mobile devices. And that’s what I’m going to talk about in today’s post I have titled:
“Viewports, Media Queries, and Responsive Layouts – oh my!”
Let’s begin!Continue reading