what is mobile first design - online crowd€¦ · friendly design principles and an always...

What is Mobile First Design


The internet is a mobile- rst world now and your website needs to embrace this shift toavoid missing out on opportunities By prioritizing your mobile experience with userfriendly design principles and an always on-the-go approach to content you can reapbigger rewards from referral channels and compete more effectively for visibility

Therersquos no understating just how much of an impact smartphone devices have had uponthe online landscape Seventy-seven percent of US adults (asymp250 million) now own asmartphone according to Pew Research and only 17 percent of people own a cell phonebut not a smartphone Even more interesting there are 65 million more smartphoneowners than desktoplaptop owners and 65 million people depend entirely on theirsmartphones for internet access



The shift from large stationary computers to pocket-sized touchscreens has had a hugeimpact on not just website design but also how online content is consumed in generalUnderstanding just how much the mobile rst mindset has a ected the website designprocess can help your business learn how to build a better website thatrsquos aware of mobilersquoscenter stage presence in our modern tech culture

What Does Mobile First Design Mean

The term ldquomobile rstrdquo may sound like a buzzword or industry jargon but itrsquos actuallyquite descriptive despite its simplistic name People use the term ldquomobile rstrdquo because itinstantly separates their design philosophy from older non-ideal approaches to mobilewebsite design and optimization

To explain the di erences in design philosophy letrsquos start with a history lesson Ourjourney through time begins in the late 1990s when pocket-sized devices like organizersand cell phones first began to have internet connectivity



The thing about the internet back then was that it could be janky and unreliable Peoplewere still guring out how to make it work properly across a range of computers andconnection types Few people had home access to a reliable and relatively speedy internetconnection

As you might imagine cell phones at the time endured this struggle a hundredfold Theirprocessors were weak display resolutions were minimal and you could never count on asustained connection

To compensate web designers would build two versions of a website One version wouldbe the fully-featured design intended to run on a standard desktop or laptop computerThen a mobile website team would strip down this design as much as possible to its barestcomponents That version would be loaded when a mobile signal was detected

At rst most early mobile internet adopters would be forced to navigate to a di erentURL with an ldquom___rdquo added to the domain such as ldquomyourbusinesssitecomrdquo instead ofthe normal ldquoyourbusinesssitecomrdquo they would nd when searching from a desktopcomputer

Then developers and devices advanced so that the exact same URL could load di erentcontent for mobile versus desktoplaptop users This approach was called ldquodynamicservingrdquo

Now most developers have moved onto ldquoresponsive designrdquo which uses the same HTMLcode for all users Instead of serving up a few di erent tiers of content all content scalesautomatically That way people with di erent device screen sizes can automatically havethe best usability

During the transition from separate URLs to dynamic serving to responsive design overallmobile internet use surpassed desktop laptop tra c In response designers and developersstopped treating mobile websites as an afterthought or something that is built o of asecondary version of their site Instead they considered mobile rst and their designs forlarger screens were advanced off of those basic blueprints



ldquoProgressive Advancementrdquo Versus ldquoGraceful Degradationrdquo

Another way to conceptualize the di erence between ldquomobile rstrdquo as opposed to ldquomobilesometime laterrdquo is through the above two terms

ldquoGraceful degradationrdquo was the old standard operating mode for designers Theirdesktoplaptop website was the development priority and itrsquos what most of their resourceswent towards Then once most or all of the desktop-focused design was complete a teamwould try to scale down the websitersquos size and complexity while sacri cing as little of theoriginal experience as possible

In other words they degraded the original design as gracefully as they could Compromisewas inevitable and many website visitors could feel like they were being served a secondtier experience



ldquoProgressive advancementrdquo on the other hand refers to that approach in reverse Thedesign team comes up with the perfect set of design principles and layout ideas builtaround a small screen This design is optimized so that mobile phone users across a broadrange of screen sizes and processing powers could still have an amazing experience Then adesktoplaptop team would consider how to expand that core design and take advantage oflarger screens more precise navigation (aka non-touchscreen controls) and heftierprocessing power

Mobile users get two main benefits out of progressive advancement

1 The website was built from the ground up to look great and be usable on mobile

2 They never feel as if they are having to make sacri ces to view a website on theirmobile device the larger site version just adds bells and whistles

A further consequence of progressive advancement is that most of the creativity and e ortbehind a website goes into the mobile experience Instead of thinking ldquohow do we changethis menu so that people without a mouse pointer can actually use the darn thingrdquo theteam says ldquowhat would a menu perfect for touchscreen controls look likerdquo

The consequences of such a mindset switch are huge and they can have a direct impact onyour bottom line



How a Mobile First Website Approach Bene ts YourBusiness

Wersquove talked at length about how the mobile rst approach evolved over time and how itmakes life better for the average smartphone user But what about how these changes bringyour business more opportunities and more money

Here are a few of the biggest benefits yoursquoll notice when you make the switch



1 Better Search Engine Ranking and Visibility1 Better Search Engine Ranking and Visibility

In April of 2015 Google decided to nally put their foot down regarding websites thatignored the needs of mobile users From that point on websites that met their mobile-friendly design guidelines would get a ranking boost for all mobile searches

The change e ectively punished sites that werenrsquot able to keep up with their expectationsThere wasnrsquot a huge penalty but the di erence was enough to create a gap that potentiallylead to lost leads and revenue

Furthermore since behavior signals like click-through rate and overall tra c can help orhurt your rank building a solid experience gives you a competitive SEO advantage

2 Improved Website Experience Leads to More Customer Conversions2 Improved Website Experience Leads to More Customer Conversions

People donrsquot want to give their money to businesses that make it di cult or impossible toaccess their website via mobile According to one Google study 61 percent of people whohave trouble accessing a mobile website leave and never return Forty percent of these lostlead opportunities will then visit a competitorrsquos website instead

Ignoring the needs or convenience of mobile users can therefore literally drive customersaway from your sales funnel and into your competitorrsquos arms

3 A Mobile First Approach to Design and Content Now Means a Softer3 A Mobile First Approach to Design and Content Now Means a SofterLearning CurveLearning Curve

Make no mistake mobile audiences are the dominant driving force behind all onlineinnovation and evolution Data usage and website visits across the entire internet havegone upmdashboth per-person and overall Yet tra c from tablets and desktoplaptop deviceshas declined

This scenario tells you that smartphones are the main driving force behind growing onlineuse Our obsession with social media and browsing on-the-go is changing the way weapproach the internet as a whole



Locally-focused content is getting a boost because people are searching for businessoptions while already en route

People are consuming more video because itrsquos easier to view on small screens thantext leading to a huge spurt in mobile video advertising

Content in general has moved towards shorter paragraphs and more prominentvisuals because blocks of text look ugly and are hard to parse on a mobile screen

All of these changes are important now and will only become more important in years tocome If your business keeps kicking the can down the road you could quickly nd thatyour strategies are hopelessly dated leading fewer opportunities and lower conversionrates

Make the switch now Start thinking ldquomobile rstrdquo with everything you do becausesmartphones are no longer the sideshow theyrsquore the main event











How a Mobile First Website Approach Benefits Your Business




The internet is a mobile- rst world now and your website needs to embrace this shift toavoid missing out on opportunities By prioritizing your mobile experience with userfriendly design principles and an always on-the-go approach to content you can reapbigger rewards from referral channels and compete more effectively for visibility

Therersquos no understating just how much of an impact smartphone devices have had uponthe online landscape Seventy-seven percent of US adults (asymp250 million) now own asmartphone according to Pew Research and only 17 percent of people own a cell phonebut not a smartphone Even more interesting there are 65 million more smartphoneowners than desktoplaptop owners and 65 million people depend entirely on theirsmartphones for internet access



































































what is mobile first design - online crowd€¦ · friendly design principles and an always...

Documents