Embed Size (px)
DESCRIPTION
Learn about designing and building your website to be mobile first, meaning you begin at the smallest screen size available. Make your design, content, and planning decisions here, and then enhance and expand to the desktop
Citation preview
Designing For Mobile First
@minneapolisdanDan Moriarty, Electric Citizen
What does “mobile first” mean?
It means start here
Hi!
Not here
Your challengeWe have to fit all this information into one tiny device
(potentially)
Why?It sounds cool to be mobile-
first, but why should I bother?
Mobile Usersno longer the minority
Going mobile first:
• FUTURE PROOF: Prepares you for the explosive growth and new opportunities emerging on mobile today
• NEW FOCUS: Forces you to focus and prioritize your products by embracing the constraints inherent in mobile design
• NEW CAPABILITIES: Allows you to deliver innovative experiences by building on new capabilities native to mobile devices and modes of use.
Excerpt From: Luke Wroblewski. “Mobile First.”
Time for a mind shiftThink small, think simple.
For Mobile First, we need to think “fast and focused”
How to begin?There’s been 3 approaches
to the mobile opportunity/problem so far:
1. Apps2. Mobile-only sites
3. Responsive Web Design
History LessonHow we’ve approached the mobile web so far
Approach #1: The App
Go native
Why an App?• Hardware integration• Access to other apps (e.g.
address book)• Camera, audio, motion sensors• GPS• Visibility on mobile device (app
icon)
Why not an App?• What about your users? They
want to search, find, print (gasp), and share data.
• Search results • Email• Social Networks• Cost• ?? what else?
– Luke Wroblewski. “Mobile First.” iBooks. https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewBook?id=10E4540CF7AFA81DCFA2F0CD470172D2
“Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience (if they can even access your
content at all). Having a native mobile application won’t help.”
Why an App isn’t enough
Approach #2: Mobile Only Sitehttp dot “m” something…
Approach #2: Mobile Only Sitehttp dot “m” something…
State Fair, anyone?
• App to find food, shopping, entertainment, and directions
• But they also had a “mobile” version of their site
Your typical, dedicated mobile
site?• Quick to download• Key elements highlighted• Short and concise?
Dedicated Mobile Site: The Bad?
• SEO and URLs; two sets of URLs can cause issues for users and search results
• Two sites to manage?• What about the “full website”
and content that may be missing?
Users don’t want a crippled version
of your site• They want all the same
information • Some users ONLY have a
mobile device
Approach #3: Responsive Web
DesignOne site to rule them all?
Tablet
Desktop
Mobile
Responsive Web Design; What is
it?“Rather than creating disconnected designs, each tailored to a particular
device or browser, we should instead treat them as facets of the same experience. In
other words, we can craft sites that are not only more flexible, but that can adapt
to the media that renders them.
In short, we need to practice responsive web design.”
Excerpt From: Ethan Marcotte. “Responsive Web Design.”
What Makes Responsive Web
Design So Popular?
• One site to manage for all devices and browsers
• Low barrier to entry?• Cost effective
Responsive Web Design: The Bad?
• Is there any bad? :)• More than just stretching and
pulling• Sites that aren’t optimized can
be slow to load for mobile users• Content that isn’t optimized can
make for a bad user experience
We have our 3 approaches (app, dedicated mobile site, and responsive web design).
But those are just techniques.
Being “mobile first” is much more than just technique.
So is that it?
We need to get down to a more fundamental level. For mobile first design, we need a brain shift. Not only are we starting all our designs from the smallest possible screen, we are rethinking content. We are rethinking presentation. And we need to rethink performance.
Remember the mind shift?
Your Magic Equation
Content + Presentation xPerformance =
Mobile First
Start with ContentWords, blocks, images, menus, etc.
Content + Presentation +Performance =
Mobile First
Desktop sites can be crammed full of information
Use all available real estateEvery interest in your organization gets a spot on the home
pageTry to speak to every potential audience
Mobile First Forces Content Into Focus
Find your key messageFind the top priorities of your users
Remove the fluff
Let’s try an experimentA test of mobile first and content rework
version 1
version 2
version 3
version 4
Mobile First?Here’s our reworked mockup
But what if we take this new mobile site and make it the desktop site?
Current site New version
That was mostly content.By cutting down on the amount of content on the homepage, we made it fit more comfortably on a mobile device. And at the same time, gave the page a tighter focus, and possibly improved on the site usability?
What’s next?
What about Presentation?aka “Design”
Content + Presentation +Performance =
Mobile First
Presentation Changes• Changed main navigation• Separated search bar from
menu• Vertical tabs• Use of dropdown menus
Design is changing everywhere because of mobile first
Hamburger (icon) anyone?Becoming the standard icon for hidden menus/navigation
Other design changes• Notice part of the navigation isn’t even
shown on desktops, and search bar is collapsed.
• Most elements are centered. • Sidebar isn’t used for navigation.
• Edge to edge blocks of color have nice separation on mobile and tablets.
Source Order of Contenthttp://webstandardssherpa.com/reviews/responsive-retrofitting/
Avoid problems with content
source order by starting mobile
firstWith one column (mostly) to work from, the priority and
source order gets set.
Problems become evident at the mobile level, and you can
avoid having to reorder all your content.
What about Performance?All about speed
Content + Presentation +
Performance =Mobile First
If you take a desktop-first site and simply shrink it down, it’s
going to be too “heavy”
Average page size, 1.7MB!*
http://www.sitepoint.com/average-page-weights-increase-32-2013/
Images are the #1 culpritBut what can we do?
Approaches to responsive images?The Picture Element, http://responsiveimages.org/
Other Performance BoostersMinimized Script LibrariesContent delivery networks
Font icons and Sprites
Content + Presentation +Performance =Mobile First
It’s a mind shift, going mobile first.But the benefits are great
Questions?Dan Moriarty, Electric Citizen
URL http://ElectricCitizen.com, Twitter: @minneapolisdan
Helpful Links• http://webstandardssherpa.com/reviews/responsive-retrofitting/•
http://www.smashingmagazine.com/2012/08/22/separate-mobile-website-vs-responsive-website-presidential-smackdown-edition/
• http://www.sitepoint.com/average-page-weights-increase-32-2013/• http://responsiveimages.org/• http://www.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/• http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need• http://alistapart.com/blog/post/testing-responsive-images• http://designmodo.com/responsive-design-vs-mobile-website-vs-app/
