responsive web design basics

58
RESPONSIVE WEB DESIGN MARCH 2016

Upload: austin-walker

Post on 16-Jan-2017

352 views

Category:

Technology


1 download

TRANSCRIPT

RESPONSIVE WEB DESIGN

MARCH 2016

INTRO

AUSTIN WALKERSenior UX Designer at Credera

AUSTIN WALKERDad at Home

CHALLENGE

INTERNET USERS

199535MM, 0.6% of world pop.

http://www.kpcb.com/internet-trends

INTERNET USERS

20142.8B, 39% of world pop.

http://www.kpcb.com/internet-trends

MOBILE PHONE USERS

199580MM, 1% of world pop.

http://www.kpcb.com/internet-trends

MOBILE PHONE USERS

20145.2B, 73% of world pop.

http://www.kpcb.com/internet-trends

THAT WAS IN 2012

THAT WAS IN 2012at a small web conference

DEVICE SIZES AND CAPABILITIES CONTINUE

TO PROLIFERATE

HOW SHOULD WE DELIVER OUR VALUE TO PEOPLE

ON DIFFERENT DEVICES?

POSSIBLE SOLUTIONS

BASIC CRITERIADiscoverability Highly targeted audience or broadly available?

Control How detailed do we want to be?

Functionality Do we need device specific functionality such as utilizing accelerometers?

Overhead Does the value of operating separate customer facing applications outweigh the effort to maintain separate codebases? How quickly can we update?

POSSIBLE SOLUTIONSSOLUTION WINS ON LOSES ON

Native App Control, Functionality Overhead, Discoverability

Mobile Site Control, Discoverability Overhead, Functionality

Responsive Discoverability, Overhead Functionality, Control

WE’RE GOING TO ASSUME…• We can deliver everything we need to in a browser • We want to quickly reach as many people as easily as possible • We don’t want to maintain separate codebases

WE DECIDED TO BUILD A RESPONSIVE WEBSITE

WE DECIDED TO BUILD A RESPONSIVE WEBSITESurprise!

BUILDING

LAYOUT VIA GRIDS

1 1 1 1 1 1 1 1 1 1 1 1

Example 12 Column Grid

LAYOUT VIA GRIDSExample 12 Column Grid

9

3

12

82 2

LAYOUT VIA GRIDSExample 12 Column Grid

9

3

12

82 2

LAYOUT VIA GRIDSExample 12 Column Grid

9

3

12

82 2

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

Too Tight?

Breaks out?

Unused Width?

Wraps?

CSS MEDIA QUERIES• CSS defines the visual style of the HTML elements on a page • CSS media queries allow you to define specific visual styles

whenever the browser meets certain criteria • Usually based on the width of the browser window

CSS MEDIA QUERIESMobile First For screens larger than X, apply these styles…

Desktop First For screens smaller than Y, apply these styles…

MOBILE FIRST.headline-container { width: 100%; }

@media screen and (min-width: 320px) { .headline-container { width: 66.6666667%; }}

Best practice is to start developing ‘Mobile First’ but for this demo we’ll be doing ‘Desktop First’.

DESKTOP FIRST.headline-container { width: 66.6666667%; }

@media screen and (max-width: 320px) { .headline-container { width: 100%; }}

Best practice is to start developing ‘Mobile First’ but for this demo we’ll be doing ‘Desktop First’.

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

META

NAV

OVERSIZED HEADLINE

Too Tight?

Breaks out?

Unused Width?

Wraps?

LAYOUT VIA GRIDSExample 12 Column Grid

ARTICLE

NAV

OVERSIZED HEADLINE

EXAMPLESThis Is Responsive Bare bones responsive layout demo

Uncrate Simple layout with responsive aspects

The Onion More complex than Uncrate

Invision Labs Highly polished responsive example

Rally Interactive Highly polished responsive example

BEST PRACTICESKeep page weight light

Utilize a mobile first approach to ensure you don’t accidentally punish mobile users

Characteristics ≠ Capabilities

Don’t infer device capability from device characteristics or type

Be consistent across breakpoints

Don’t unreasonably remove or display content / functionality based on breakpoints

ADVANCED RESPONSIVE

CLIENT SIDE + SERVER SIDE• Responsive Web Design is focused on the client side (browser) • RESS = Responsive with Server Side components • Server detects device type based on UA (User Agent) and sends

content specifically for that type of device • Benefits of an m. site without a redirect or separate codebase

SAFARI USER AGENT STRINGS

RESS AT AMAZON

Desktop Content Type A

Desktop Content Type A

iPhone Content Type B

LATEST DEVELOPMENTS

THE LATEST DEVELOPMENTSGoogle’s Mobile Friendly Tag

In mobile search results, Google will tag your site as ‘Mobile Friendly’ and penalize you if it’s not

Google’s Accelerated Mobile Pages (AMP)

Special stripped down HTML pages that Google’s promoting in search results

Increasing support for flex box

More flexible in layout control than floated columns

WRAP UP

WHAT WE TALKED ABOUTDevice Proliferation

As device sizes fragment, we need a solution that covers this breadth

Why Responsive Responsive web design provides more breadth but less functionality compared to native apps

Grids & Media Queries

We can adapt the layout (and other) characteristics of our site for different devices

RESS & Latest Developments

New approaches continue to be developed to meet different needs

• RWD is only a small part of what we do

• Our TechnologySolutions practice coverscustom app dev,eCommerce, mobile apps, analytics and other

• We’re looking for FEDs inthe UX practice

CREDERA MC

UX

TECH

AUSTIN WALKERSenior UX Designer at Credera

[email protected]