Newsletter

Subscribe to our mailing list

August 07, 2013
A Mobile-First Approach to the Web

A Mobile-First Approach to the Web


As you probably guessed from the title of this article, where going to be talking about designing and building responsive websites for mobile devices and then working our way up to laptop and desktop sizes. But before we get into what a "Mobile-First" approach even is, it's important to cover a little background on mobile devices and responsive design.

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.

Read our next post...

Events DNN Summit 2021 Follow-Up

Marketing Creating Video Content on a Budget

Web Dev Maximize Your Website’s ROI with Affordable Usability Testing

Marketing Less is More: Optimize Your Website Content

Marketing More UX Myths...Debunked

Marketing The Do’s and Don’ts of Marketing During COVID-19

Marketing Are You Prepared to Run an Effective Remote Team?

Marketing We Are Business As Usual… And Here to Help

Marketing Make the Most of Your Digital Marketing Budget

Marketing 4 Digital New Year’s Resolutions That Will Make Your Business More Money

Web Dev Are You Making These 6 Website Mistakes? Consider an Audit

Events Behind-the-Scenes on our New Brand Video

Marketing How to Create Facebook Posts That Command Attention

Marketing 10 Common UX Myths

Marketing 6 Reasons Your Business Needs a Blog

Events ADA Website Compliance Webinar

Web Dev With 2285 lawsuits in 2018, is your website ADA compliant?

Modules Increase E-commerce Sales with Nosto’s Content Personalization

Marketing Smarter Email with SharpSpring

Web Dev 10 Pound Gorilla Named as a Top Developer in Denver!

DNN Hangout with the Gorilla Girl

Events DNN Summit 2019 Follow-Up

Events Heli-Expo 2019

DNN, Events DNN Summit 2019

Marketing Business Tips for the New Year

Web Dev 10 Pound Gorilla Recognized as Top Web Design Firm in US for 2018

DNN, Web Dev Exciting News for 10 Pound Gorilla

Marketing What Has 10 Pound Gorilla Been Up To & Why It Can Help You Grow

DNN We’ve Made Friends Far and Away

DNN, Marketing, Web Dev 2018 DNN Summit Sessions

Marketing Influencers Influence, Followers Follow

We Secured $25,000 in Grants for Our Client – We Can Help You Too!

Marketing 5 “Must Do” Items to Enhance Your Marketing

Marketing Retargeting: Never Lose Sight Of Your Website Visitor

Web Dev Quality Websites Need Quality Typography

Marketing Web Development Meets Web Analytics: The Knowledge Gap

Web Dev Responsive Design: It's More Than Just Design

Marketing Economic Summit 2017

Marketing Mary Meeker's Global Internet Trends

Marketing, Web Dev A/B Testing: Getting the Most out of Your Site

Marketing, Web Dev Upping the Ante: Interactive Content

Marketing, Web Dev Google’s SEO Best Practices: A Starter Guide

Marketing Creating Timeless Content to Boost SEO

Marketing, Web Dev 2017 Research Recognizes 10 Pound Gorilla as a Leader in SEO

Marketing, Web Dev Designing an Elegant Website using Whitespace

Marketing, Web Dev Test Your Website’s Success Using Heat Maps

Marketing Start Fresh, & Advertise with Facebook!

DNN, Marketing, Web Dev 2017 DNN Summit Sessions

Marketing, Web Dev Web Design: The Past, The Present, & The Future

Marketing, Web Dev Intrusive Pop-Ups to be Penalized by Google

Marketing The New Wave of Advertising: Native Ads

DNN, Web Dev Proud Sponsor of DNN Summit 2017

Marketing Moving to Mobile

Marketing, Video Power of Video

DNN If you’re a DNN user, your site could be vulnerable to hackers

Marketing, Video The Art of Retargeting: How it works and Why You Should Retarget

DNN, Marketing, Web Dev 10 Pound Gorilla Named Top Ten Denver Web Development and Digital Marketing Agency by Clutch.co

Marketing 10 Tips to Design Your Website for Lead Generation

DNN, Marketing, Modules, Web Dev DNNCON: Thank You!

Marketing 10 Ways to Incorporate Direct Response Marketing with Print Media

DNN, Marketing, Web Dev 10 Pound Gorilla... One of Denver's Top 10 Digital Marketing Agencies

Marketing How to Turn Social Media Fans Into New Customers

Marketing Your Facebook Likes No Longer Matter!

Web Dev Is Google Going to Penalize Non-Mobile-Friendly Websites?

DNN DNNCON: Thank You!

DNN, Modules, Web Dev From Ordinary To Extraordinary

DNN, Marketing, Modules How to Sell, Quote or Budget for a DNN E-commerce Website

Web Dev Getting Users to "Respond" to Your Mobile Menu Designs

DNN, Web Dev DNNCON: Editor.css

Marketing Getting The Conversion

Marketing Tips for Writing Effective Newsletters

Marketing Why Should You Have a Newsletter?

Marketing Writing Copy That Will Actually Be Read

DNN Editor.css: Giving You & Your Clients Less Headaches

DNN, Web Dev Connall Cosmetic Surgery: Case Study

Web Dev Making the Case for a Responsive Site

DNN, Modules, Web Dev March Module Madness: Dynamic Forms

DNN, Modules, Web Dev March Module Madness: Ventrian News Articles

DNN, Modules, Web Dev March Module Madness: Form & List

Marketing 5 Tips to Online Marketing

Marketing How the Name "10 Pound Gorilla" Came to Be

Marketing Creative Online Marketing: Groupon & Living Social

Marketing Promoting Your Business With Instagram

Marketing Using Your Blog to Boost SEO

Marketing Surprising Social Media Facts & What You Should Do

DNN, Web Dev DNN Con 2013: Mobile Navigation

DNN, Web Dev DNN Con 2013: Determining What Makes the Mobile Cut

DNN, Modules, Web Dev DNN Con 2013: DDR And JQuery. More Than Just Hover And Drop Down.

Web Dev A Mobile-First Approach to the Web

DNN Southern Fried DNN: Best of both worlds: Great Design and Flexibility

DNN Southern Fried DNN: Different skin designs from just one skin file

Web Dev The Future of the Web: HTML5

DNN Dot Net Nuke World 2012 Speakers & Sponsors

Marketing Google Places is now Google+ Local

DNN, Marketing Day of DNN - Using DNN to Feed Data to Several Social Portals

DNN, Marketing Day of DNN - Easy to Use Strategies for Writing & Submitting Articles to Increase Inbound Links

DNN, Marketing Day of DNN - How to Optimize Your Socialization

DNN Guest Speakers at Day of DNN!

Marketing Enticing Your Followers with Fresh Content: A How To Guide

DNN, Web Dev What Can Website Templates Do For You?

Marketing Getting Up in the Ranks Through SEO

DNN, Modules Best DNN Shopping Cart

Marketing Enter into the "Timeline"

Marketing Making Your Facebook Business Page Secure

Marketing Get Your Tweet-Face On

DNN, Marketing Google Analytics and DNN

Marketing What is Social Media and What Can It Do for You

DNN Advantages of DotNetNuke

Web Dev 8 Ways to Increase Website Speed

Marketing Beyond Facebook and Twitter, Get "In" with Social Media

Web Dev 8 Great Website Development Tools

Web Dev Your Website & Internet Explorer

Marketing What is Google +1

Web Dev What is "The Cloud"?

Our Story
What makes us different?
+

Succeed

Contact 10 Pound Gorilla Today
for Your Free Consultation