A few months ago, I did a short series about creating an ePortfolio. I’d like to think I got a majority of my advice correct, but boy was I off about how to design for mobile. So, I’d like to take some time to give you an update on my ePortfolio and then talk about responsive web design.
1. Update on hosting, or more Google product lurve
The only problem I’m currently having is that the URL forwarding is breaking the responsive design for mobile.
2. What was wrong about my views on mobile design before?
So, why was I so wrong about how to design for mobile before? Well, good code (in my opinion, and in other’s) is simple, organized, and easy to understand. This means that you shouldn’t repeat yourself and that you shouldn’t have redundant code. When you create duplicate copies of pages so that they can be formatted differently for a different sized screen, you are creating redundant pieces.
In terms of web sites, having redundant pages creates many problems–namely for tracking and searching purposes. It’s better to have one site that responses to the size of the user’s device.
3. Responsive Web Design
As with many topics here, I’m not going to talk too much in depth about responsive design, other than to say it’s really cool and point you to some good articles at the end. Basically, responsive design means you design your site to easily be laid out on several different screen resolutions. The important part of this is creating content that can be easily scaled. Side menus on desktop sites will make content smaller on mobile sites. So, design so that important links are at the top of your page and unimportant links are in the sidebars. When your site gets scaled for mobile, you can move the sidebars to the bottom of the page–since these links will not be as important as the links at the top.
Obviously there is a lot more to it than just having scalable content. The code needs to identify how to scale the content and where to put it. I won’t get into that, but here is a great tutorial that explains how the code works. You should also check out the links below. They will give you a much better understanding of responsive design then that silly paragraph above.
Responsive Web Design Guidelines and Tutorials by Smashing Editorial
Mobile Responsive Design 101 by Josh Byers
Build a responsive site in a week: designing responsively (part 1) By Paul Robert Lloyd
Beginner’s Guide to Responsive Web Design by Nick Pettit
Responsive Web Design
What The Heck Is Responsive Web Design? a scrolldeck.js presentation by John Polacek