All the rage these days is about responsive web design. There was even talk of it last night at our monthly WordPress meetup. I have committed myself to trying to incorporate some form of responsive design in all my web projects moving forward.
What is responsive design?
Typically the way I approach responsive design is by setting up break points in my design. For example, screens smaller than 320px wide get different view than screens larger than 1024px wide. Of course there are many breakpoints in between too.
Why did/do I do it this way?
The best answer I can give is that is what I thought best practices dictated. Like most other forward thinking web designers/developers out there, I read A List Apart. Not as often as I probably should, but from time to time.
Last night, I was reading an article about responsive design that got me thinking. Which can be a good thing or a bad thing. Ask my wife!
What the author posits in the article is somewhat revolutionary for me. Too bad I missed it three months ago when it was first published! I has always read that best practice for mobile meant giving the user a diminished experience.
There were reasons for this diminished experience. Some people said limit content (especially images) to increase load times or leave out items that may be hard to see or rendered irrelevant on a small screen. There are other reasons I have found too, and they all seem convincing. Limit content, but <- “BUT” give a link to the larger desktop site too (usually in the footer).
This is how I proceeded with my last two designs. That big “BUT” should have stuck out in my head but didn’t. Karen corrected that. You see, these days people are looking for all kinds of information from their mobile phone or tablet or whatever. They need and want this information in an easy to read format no matter what device they are using. This means not having to switch over to the desktop view to find things that may be relevant to them. I have been that frustrated guy. I want some piece of information that is available to a desktop user, but I am not at home. I am out and about and using my iPhone. Then I have to switch to desktop view and pinch and zoom and tap and hunt on a viewport that is too large for my device.
I am not master developer, but I am now committed to giving all content no matter the size of the viewport. Besides, if the content or design element isn’t needed for a mobile device, is it needed at all?
I am anticipating two upcoming personal projects that will make use of this new found philosophy. Stay tuned.