Mobile
First
Welcome
Why are we here?
•What do we mean by “mobile first?” •Why we should care about mobile first •Designing mobile first
•Developing mobile first •Are we doing it right?
P: 4
What do we mean?
Essentially, it is the best practice when
implementing a responsive website.
Mobile first is a philosophy for designing and
building web properties where consideration for
smaller mobile screens take precedence, with
larger screen sizes emerging iteratively.
And what’s a responsive website, again?
Essentially, it is the best practice when
implementing a website, microsite, single page,
and even emails.
A responsive website is a single property that is
designed and developed for optimal readability
and usability across all screen or
browser-window dimensions.
Why we should care:
RE: Google
On April 21 Google released an addition to its organic search
algorithm that places an
unprecedented emphasis on
mobile-friendly site attributes that influence carte blanche organic
rankings. Google said in their release that this algorithmic change will have a “significant impact” in search results on mobile devices, impacting all languages worldwide.
P: 8
Smartphone use
94
%
People with smartphones who search for information
on their phones
77
%
Mobile searches that occur at home or at
work, places where desktop computers are likely to be present
43
%
PCPs comparing Rx product and treatment
options on their
smartphone
40
%
Primary care
physicians report they use their smartphones
to research Rx options with their patients
Best practices: optimizing & future-
proofing your website
2. Mobile first approach
1. Content relevancy & hierarchy
8. Development 4. Navigation 3. Speed 5. Typography 6. Layout 7. Usability
* * * *
P: 10
Why mobile first approach
“Putting mobile device
needs at the center of the
web design process leads
to sites that are simpler,
faster, more usable”
Google guidelines for page loading
1
less than
Why we should care:
Growth in digital media: time spent
Source: comScore http://marketingland.com/apps-eat-digital-media-time-with-top-3-capturing-80-percent-143555
Tot al Minut es (MM) 0 400,000 800,000 1,200,000 1,600,000
June-2013 June-2014 June-2015
118,299 97,440 77,081 778,954 621,410 409,847 550,522 480,967 476,553
Desktop Mobile App Mobile Browser
+53% vs. 2013 +90% vs. 2013 +16% vs. 2013
P: 14
Share of digital media time spent by platform
Source: comScore http://marketingland.com/apps-eat-digital-media-time-with-top-3-capturing-80-percent-143555
65% 60% 55% 50% 45% 40% 35% 30%
June-2013 Dec-2013 June-2014 Dec-2014 June-2015
% Shar
e of Digital Media Time
Spent
51%
62%
49%
38%
+11pts—Share of Digital Time Spent on MOBILE
Average monthly audience:
Top 1000 mobile apps vs. top 1000 mobile
web properties
Source: comScore http://marketingland.com/apps-eat-digital-media-time-with-top-3-capturing-80-percent-143555
Unique Visit or s (000) 0 2,250 4,500 6,750 9,000
June-2014 Sept-2014 Dec-2014 March-2015 June-2015
Apps Mobile Web
P: 16
Top 25 mobile apps by unique visitors
Source: comScore http://marketingland.com/apps-eat-digital-media-time-with-top-3-capturing-80-percent-143555
Facebook YouTube Facebook Messenger Google Search Google Play Google Maps Pandora Radio Gmail Instagram Apple Music Apple Maps Yahoo Stocks Amazon Mobile Twitter Pinterest The Weather Channel Snapchat Google+ Netflix Weather Channel Widget Google Drive eBay Spotify Walmart Yahoo Mail
Links shared via social apps are simply another mobile web view
P: 18
What gets missed
•Without a responsive solution, your client’s site is at risk of under-performing
• Unmet KPIs
• A user who bounces is a missed conversion
• We undermine our
credibility as an industry digital expert
P: 20
Mobile limitations drive mobile first
•Obviously, space and bandwidth is at a premium •There are no mouse-overs on mobile devices
• Mouse-over highlights are realized on touch
• Adds unnecessary taps for the user
•Large, complex bitmaps are more difficult for a mobile device to process, and more difficult to deliver over narrow bandwidths
• Although there are ways to hide/show images based on screen size, these will not stop the unused images from being served to the page
• Background images are not delivered unless called by specific screen sizes, but are invisible to search engines and printers
•Complex animations can kill a mobile experience •Complex infographics lose their impact
Mobile limitations drive mobile first: fonts
•Please, for the love of God, SYSTEM FONTS when possible!
• Using custom font families can significantly slow your page load
• The more font variations used, the slower the page load
• Text as images may be poorly rendered on mobile, and are an SEO worst practice in any scenario
• If you want to have more fun, choose a Google font
• Easy for developers to implement
• Google fonts can be more easily deployed than fonts from standard retailers, but variations still need to be limited
• Google fonts are popular on the web, and are therefore cached on many users’ machines, making page load even faster
•Mobile devices use various proprietary browsers, as well as third-party
browsers—font fall-backs are an absolute must
P: 22
Mobile limitations drive mobile first: fingers
•Fingers click fatly
• Hotspots need to be sufficiently large
• No overlapping clickable/touchable items
Understand the grid
Grids lead to rational, standardized systems that help users absorb the information we’re trying to communicate.
P: 24
The grid is your friend
•Aids in the creation of layout patterns that allow users easy access to content and information
•Creates efficient workflows for projects with multiple designers •Aids in design consistency for projects with multiple designers •When designing within grids that are also used in development,
responsiveness is a more natural process
•Creates a more scalable environment, where updates and expansions live more comfortably within the site as a whole
P: 26
Not to mention…
The Grid will help you
Avoid this annoying
situation today
and guarantee
you never deal
with it again
P: 28
Regarding mobile first and frameworks
1 2 3 4 5 6 7 1 2 3 4 5 6 7
Desktop
Mobile
Reasons to believe
•Designing mobile first helps you to refine essential site content
•Ensures a more modern, flat design, reserving skeuomorphism for only the most appropriate circumstances
•Focus centers upon users and how they access content •Leads to a more scalable desktop design
•The smallest site is fully realized, not a watered-down version of the original
•Begin to imagine ways to take advantage of mobile technology at the outset
• Geolocation
• Gyroscope/Accelerometer
• Camera
Developers know this
Mobile-first development is the only way a
developer can be certain they are writing the
cleanest code possible for a mobile site.
Mobile-first development is hands-down the most
efficient and cost effective way for a developer to
P: 32
The all-powerful media query
•Media queries make it possible for a developer to write CSS code that targets specific screen dimensions
•All devices load the “base” CSS first
• Base CSS is the foundation style of the site that will carry through for every screen and browser window size
• Base code is the CSS that loads first, no matter the screen dimension
• Base code, then, is your handset mobile style
•Devices check for media query conditionals that apply to their screen size, and then compile it
• This allows different screen dimensions to utilize different layouts
•This is how a developer loads the absolute least amount of CSS styling code necessary to mobile devices
And there you have it
Base CSS is not only the styling code for your mobile website, it is the foundation
upon which all other screen sizes are built.
This is why it is imperative that it be
coded
FIRST
.
MOBILE FIRST
.
Yes?
This is the only way you can adhere to
Google’s
1-second rule
.P: 36
P: 38
A great example of a bad example
Desktop
Mobile
Header Header (sticky)
ISI/Blackbox Navigation ISI/Blackbox Navigation Content Content
