ePortfolio Update: Boy was I wrong about mobile design

responsivedesignA 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

Previously, I hosted my ePortfolio on my school server space. As the distance between me and graduation grows, the nagging reminder in the back of my head says that I’ll be losing that space soon. So, I’ve been keeping my eyes out for a cheap or free way to get my ePortfolio on the Web. Obviously, one option would be to use this blog and create pages. But I’d lose a lot of control over how my content is displayed and uhg that drives me crazy. But then I heard that both DropBox and Google Drive now support HTML, CSS, and JavaScript files. FINALLY. As a Google user and lover, I decided to go with Drive and I have been very happy. While you can’t edit the files in your browser, you can download them and reupload them easily. And, since I’m using URL forwarding to direct users to my site, I get to easily keep the same URL from before.

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.

Further Reading:

Responsive Web Design Guidelines and Tutorials by
Mobile Responsive Design 101 by
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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s