Mobile First

Concepts for planning responsive websites and

mobile applications.

Getting started

• Step 1: Reach in your pocket, and pull out your phone

Getting started

• Step 2: Place your phone in front of you

Getting started

• Step 3: Look at it, note its screen size, and think about browsing and typing on it

– Much of the mobile first mentality is common sense!

Major considerations• Space

– Approximately 300px width– Limited vertical space = more scrolling

• Load times– Mobile load times vary greatly based on network, etc– Page loads can frequently bring frustration

• Touch capabilities– Fat-fingering, clearing and surrounding space

• Input methods– Mainly regarding forms and open searches

• Auto-complete, slide text, etc• Only collect what is necessary

• Convenience is a necessity!

Responsive considerations

• Elements are reused for all resolutions– This includes images, slideshows, headers, navigation and

dropdowns, form fields, text, etc– Text increases in size on mobile, so keep it short, sweet, and

to the point– Watch backgrounds and design elements that can

unnecessarily take real estate and increase load times• More obvious on mobile, but note that tablets are often times used

on mobile networks, and they often load very similar design elements as a full size layout

– Closely manage content/design elements importance to define a visual hierarchy

Forms on mobile devices

• Typing on a phone is more complex than on a computer– Limit the number of form fields on a form to only

those that are essential (think required only)– Provide adequate space in and around fields and

buttons• Provide large, finger-friendly submit buttons• Keep “helper text” (such as labels, descriptions

about a field, etc) short, and concise.

Touch screen implications

• Navigation– Think about creative (but possible/feasible) methods

to simplify mobile navigation• Buttons– Mobile buttons must be large and finger-friendly

• Links– Also must be finger-friendly

• Consider graphical links that are not buried in content, and keep text links separated enough to avoid confusion and click difficulties

Content weight

• More content = more scrolling and/or clicks– Keep copy clear, concise, and to the point– If a picture is worth 1,000 words, use the picture• Infographics, charts, tables, etc

– Note load time – this does not mean we should load as many images as possible

– Manage content hierarchy• Most important stuff first• Visual breaks to break up topics

– Labels/headings, small images, colors, etc

Functionality weight

• Phone processing is slower than a computer– Keep functionality simplistic– Focus more on a clean delivery and content than

“bling”• Device compatibility– Certain devices may or may not use certain

programming languages• Flash, etc

Design weight

• Use core HTML and CSS capabilities instead of JavaScript, image swapping, etc– Think “flat design” concepts

“Mobile First” mentality

• Start your planning by looking at mobile first• What are our primary:– Products or services– Call(s) to action– Pages and pieces of content• Make the first paragraph a teaser or summary, not

an intro• Once real estate is allocated to these items,

build downward to large resolutions

Discussion

• How does this affect content:– Content?– Design?– Development?– SEO?

Discussion

• What kinds of things might our clients like?

• What kinds of things might our clients dislike?– How do we lead them to believe that these things

are best?

Discussion

• Open…