MOBILE DEVICES

It's estimated that by the end of 2013 there will be over 1.5 billion smartphones in use. (ABI Research via VentureBeat) To state the obvious, that's a whole lot of phones being used, and for far more than just phone calls and text. They're being used to access the websites and apps at an astounding rate.

In some parts of the world mobile internet traffic has already surpassed desktop internet usage, and mobile internet traffic is showing no signs of slowing down. After all, it's our human nature to love convenience, and that little device in your pocket does just that. Smartphones allow us to almost instantly search for directions, find places to eat, find local businesses, or Google anything in the middle of heated argument just to prove your friend wrong. And best of all, it can all be done anywhere at anytime whether it be on the bus or on your living room couch. No more having to go dig up your laptop from the pits of Mordor. The entire web is literally at your fingertips.

If you're still not convinced, think all this might be a bit exaggerated, or that a majority of people would rather use their laptop or desktop, think again. One of the most popular online blogs for viral content, Buzzfeed, is now receiving 50% of its traffic from mobile users. That's an insane amount of hits coming from smartphones.

With all this said, you probably get the idea that making your site friendly, easy to navigate, and find content for mobile users is more important now than ever.

RESPONSIVE WEB DESIGN

You've probably already heard a bit about responsive design, if not, I'll touch on it lightly here. Basically, websites that are responsive move, adjust, and rearrange content to fit on whatever the screen width of the device being used is. This allows users on smartphones, tablets, (and any other crazy new device that is currently being invented) to easily view your website without having to constantly pinch and zoom to move around all while getting rid of the infamously dreaded scrolling horizontally and praying that you clicked the button or link you intended to.

WHAT ABOUT A MOBILE-DEDICATED SITE

This is a topic that could be talked about for hours on its own, but in short, having both a strictly mobile dedicated site and desktop site means you have to update each manually (generally speaking). Another aspect is that dedicated mobile websites tend to leave out content users want to see or find.

My personal example of this is imdb.com. I absolutely love imdb, but when I'm watching a movie or a tv show and what to look up a show or read the forums, I naturally grab my phone since it's right there with me on the couch; but low and behold I land on the mobile site, and I have to painstakingly navigate to their desktop site and pinch and zoom to find what I'm looking for. (Of course you could always set up your mobile site to have everything your desktop site has, but why have two instances of your site when you can just have one, with everything right there regardless of the device it's being viewed on.)

MOBILE-FIRST APPROACH

Now that we've covered the nuts and bolts, let's get on to what this article is really about—designing and building websites with mobile aspect first in mind. Forget about what the desktop is going to look like for right now.

Taking this approach allows us to focus solely on organizing content so that mobile users can easily find and navigate to what they're looking for. It allows us to build a website that's focused on delivering content and hierarchy and then design. Not the other way around.

Starting with mobile first and not the desktop allows for "progressively enhancing" a website rather than "Graceful Degradation" of a website. (thanks to Brad Frost for coming up with those terms). With a mobile first approach we can ensure that all of the content is delivered and that load times are fast whether the user is edge, 3g, 4g, or whatever new internet speed is being cooked up. As we work our way up to desktop, we can add more features if need be, to deliver a memorable surfing experience across all devices.

Following this approach allows your website to be truly optimized for mobile (i.e. fast load times with as little bandwidth being used as possible). But if you start with desktop, your responsive site is only going to be mobile-friendly, not optimized.

Step 1: Content

Let's face it, having a fancy looking website with tons of cool effects is something to be desired (and that you're probably going to want implemented into your website). But truth is, the main, and dare I say only purpose, of your website is to deliver content and information — everything else that it does is secondary, and yes...design can certainly be a key factor in delivering content and hierarchy.

Check out this plain-text webpage for instance. It might now be much or pretty, but it does its job.

Figuring out your content before the actual designing and developing begins is key. It allows you to narrow down what your company is all about, figure out what content is and isn't necessary, and in turn deliver a website that is going to have just what the users are going to be looking for.

Step 2: Putting it into a mobile context

Let's take all the content that we worked so hard to organize and structure and dump it onto a web page. Just black and white text on a web page. From here you will have a much stronger understanding of the content (the primary focus of the website) and this will allow you to make much stronger design choices and decisions that will greatly enhance your finished design and leave your client feeling like they're getting more than there monies worth. This is another reason why it's so important to figure out your content first — It helps your design.

Once you've figured out your design, now it's time to starting coding that sucker. Keep in mind we're still just focusing on mobile.

Step 3: After Mobile

Once you've gotten you're mobile aspect looking good and functioning properly, this is where you'll be begin to focus on those medium sized devices like tablets and such and then move on to laptop/desktop from there.

Instead of focusing on making your website look good on specific devices like iPhones, galaxies, iPads and Kindles, you should figure out where to make your content rearrange and move simply based off when the design just no longer works at a given width. Doing so is going to make sure your website works and looks good across all devices, not just certain ones.

There's more than just iPhones and iPads out there and phones and tablets have a huge variety of different widths, so it's important to design for all of them in mind by making design choices based of width not based of the width of a specific device.

If you're interested in building a responsive website or are interested in rebuilding your website with a mobile-first approach or would like to learn more, send us an inquiry. We'd be more than happy to help.