Designing For Mobile First

“Type a quote here.”

http://ElectricCitizen.com

@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?

But what are users missing?

http://www.mnstatefair.org/

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/