Designing for Mobile First: Or how I learned to stop hating and embrace the touchscreen

When I was sitting down the do the initial design and mockups for what would become my  portfolio site I found myself fascinated by idea of responsive web design; that a signal site could designed in such a fashion that it would display properly on any type of device no matter how large or small is an idea that honestly still blows my mind.  However, what I think has a tendency to happen in web development is that because we’re doing our coding on a desktop platform the majority of time spent on the design and functional aspects of any site have been dedicated to its desktop version.  Any versions that have been made available for either tablet or smartphone sized screens have been at best a rushed job and at the worst completely disregarded.

This is a large part of the reason why browsing the internet on a tablet or smartphone even in 2013 can still be a pretty hit or miss experience for users, designers simply aren’t dedicating the time to required to make their sites just as awesome on the touchscreen as they are on the desktop.  There are a whole bunch of tools out there now that can help developer get their feet wet in getting their designs up and running on a mobile device two that I’ve checked out:

Zurb: http://foundation.zurb.com/

Twitter Bookstrap: http://twitter.github.io/bootstrap/

While these frameworks are great for getting started quickly I found myself never really feeling satisfied building my sites off of coding that others had done.  Call me crazy if you want but to but it felt like using a crutch all the time.  So when it came time to building a portfolio site for myself I decided to set myself to challenge of building the layout & functional elements of the site from scratch.  In addition since I wasn’t about to let myself get caught with a sub-par experience on a touchscreen device I decided to concentrate my initial design energies of perfecting the mobile layout first.

mobile version

So in order to pull this off the first item in the bag of tricks unlearning most of what I had previously learned in web develop fixed widths are all but removed from the equation and replaced with either percentage values or “em” tags.  The other interesting thing that coming at the site design from smallest to largest taught me was that often times on a touch screen the best designed user interfaces are the simplest ones.  On a smartphone the lack of precision you can expect from a persons finger really forces designers to think long and hard about otherwise complicated navigation which to I discovered was more of a hindrance than a help screen size decreases.

As the screen size increases to realm of a tablet (anything larger than 800 pixels wide) there is enough room available to enhance the core mobile user experience adding a two column layout for easier display of content in my case.tablet  As you can see here this gives the user a much more desktop look and feel whilst still retaining all of the elements such as larger navigation options that made the mobile version as easy to use as it was.

 

 

 

 

The last stage in this design evolution is the final iteration of the site with the most distinctive look and feel to it, the desktop version.

desktop

With this version the design elements can truly be opened up as we know have access once again to a pointing device in the form of a mouse the enhancements made both the mobile and tablet versions of the site, bear fruit on the desktop side of things with an uncluttered easy to navigate user interface that helps the user get at the content they want as quickly and effectively as possible.

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>