Contact Us

The Mobile-First Website Design Strategy

Apr 04, 2017

For the record, this isn't the same as Google's mobile-first index, which we discussed in an earlier post.

mobile.jpg

What's mobile-first designing?

First, we should start with a brief overview of the traditional website design & development process.

I'll keep this really simple, especially in case you're reading this before bed. I don't want to put you to sleep before I get to the really exciting stuff.

If you've gone through the Website Muscle process, you'll recall that we start with a discussion of your business, what purpose the website will serve, and other sites out there you like (and don't like). We'll talk basic functionality, color scheme, sitemap (all the pages you'll have on the site) and the overall messaging you want to express.

With that information, I put together a "wireframe", or a bare-bones foundational sketch of what the home page will look like (kind of like a blueprint). After we've gotten your OK on the wireframe, I'll move forward with a home page design -- it's what the home page will look like, but is submitted to you for approval in the form of an image, so it's not yet interactive.

Once that has been approved, I'll begin coding the site so you can interact with it before giving your final OK to launch. (Meanwhile, content is being written simultaneously.) We start our design process with desktop and laptop sizes in mind. However, we understand that more than 1.2 billion users worldwide are using mobile devices such as tablets and smartphones, and 25% of mobile users in the U.S. are mobile-only, meaning they don't even use a laptop or desktop to go online anymore. (source: mobiforge.com)

Mobile Responsive Sites

For those reasons, we build all our sites to be mobile responsive. A responsive site is one that changes (or responds) based on the device the users are using to view the site.

Is your site mobile responsive? Here's how you can tell. View it on a laptop or desktop and minimize the screen. Drag the screen in until it's the size of a smartphone. Does the appearance change to accommodate the site's headings, text, and images? If so, you probably have a mobile responsive design.

Not all responsive designs are created equal. It takes creativity, forethought, and strategy to create the best responsive design for each website's needs and objectives. When we build responsive sites, we start with the desktop size and minimize from there.

But due to the sheer number of users on mobile devices, there's a growing trend among web developers: Rather than design the mobile site secondarily, you design it first and expand from there. Basically, you're doing the responsive site coding in reverse. This is the mobile-first design strategy.

The Mobile-First Website Design Strategy

Okay, so we know that designers used to (and still often do) start with the "big site", and then scale down for mobile-friendliness. Now, more developers are starting with the mobile design, then enhancing and adding later as needed for larger devices.

The technical term is "progressive enhancement." Proponents of mobile-first design strategy say that scaling down is tough, and can make the mobile site look like an afterthought or an unfinished product.

Do users agree? Opponents say it's more difficult for designers to be creative and really brainstorm the possibilities for each website when you have to start off so minimally. The rebuttal is that designers are forced to really consider the user and to be ultra-creative for the best UX (user experience) possible on that device.

What do we say about mobile-first design?

For now, we prefer our traditional mobile responsive approach. Starting with mobile first requires a tremendous amount of minimalizing and reducing content, which can be really challenging for business owners who want to get their message out there.

Our content writers definitely emphasize avoiding too much content in favor of a simple yet compelling message, but the messaging for mobile-only has to be so bare bones that it can be intimidating for businesses -- especially ones who are still working on advancing their brand.

Responsive designs meet Google's criteria for mobile-friendliness and rankings, so we're content here for now... but we've always got our eye on what's trending and ultimately, what will be best for our clients in the long run.

Tyler Bales

Written by Tyler Bales

Tyler can design like nobody's business. Scratch that. Actually, he can design like everyone's business. Tyler is one talented guy who always delivers a beautiful product. He is also the nicest human on planet Earth. We really enjoy this combination of traits and we think you will too.

Lists by Topic

see all

Posts by Topic

see all