After reading through A List Apart's article What I Learned About the Web in 2011 I decided I needed to make a second effort at getting into mobile web design. This article chronicles the epic struggle between myself and the perils of designing for a screen that fits in my hand.
Part 1 will discover the philosophy behind responsive design and how to apply these new bits of brain lightning to our current processes. My odyssey will continue in part 2 as I get into the technical side of using techniques like media queries to create a responsive design. Hit the jump to read on.
What is Responsive Design?
Responsive design is the ideology of designing a single website for multiple screen sizes. Don't be scared traditionalists, it's not that hard. Actually according to most experts in the design field responsive design is making them more talented designers. The ideology is being necessitated by the increasing number of devices that are accessing our websites. It's no longer enough to design for desktops and laptops. We now have to take into consideration all of the tablet and mobile users and provide them with the same experience that we give to our desktop users.
In the Beginning…
I decided to start my descent into the deep, dark depths of change by reading into the exploits of others that succeeded in defeating this great beast. From these musings I learned a few things that I'd like to share:
The Mobile Minotaur Comes First
It was stated by every book, blog and video I ran across on the topic of responsive design: design for mobile first. It makes sense if you think about it. The issue with tackling a design for a mobile screen is size. By traditional design methods you have created some sort of grid format, 960px powerhouse but when it comes time to create the mobile version you are trying to squeeze all of that content into a teeny little box. If you design for mobile first you have the advantage of expanding your content rather than smashing it with the proverbial hammer.
"The Fold" is an Ancient Beast, but a Worthy Foe
If you're unfamiliar with "The Fold," check out Paddy Donnelly's explanation of it here. What makes "The Fold" insignificant in responsive design is that our first designs are going to be built for mobile users. Our content is going to expand well beyond the confines of their screens so we are going to have to become comfortable with the mobile version of the vertical tango.
Truncating is for Elephants
Mobile users may be lacking in screen real estate but that doesn't mean they should have fewer options than they do from their home computers. If anything they should have access to more features from their mobile devices. They have the ability to get all touchy-feely with your website. They are more interactive than a desktop user because of that physical connection. We need to cater to these users by making them feel like their feeling the website.
Now I think I'll take a coffee break. Blogging is hard. Watch out for Part 2!