Making Your Responsive Website a Success

NERDERY WEBINAR

PLANNING FOR RESPONSIVE DESIGN

#NERDERYWEBINAR @THE_NERDERY

Thanks for joining us for the pre-show discussionWe’ll be starting in just a few minutes

YOUR HOSTS

Ryan CarlsonErica TavaAnthony LukesSenior Front End Developer Business Analyst Technology Evangelist

@anthonyLukes @ryancarlson@emtjohnson


THE NERDERY

WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS

HTTP://NERDERY.COM

2,262,193 7,770HOURS WORKED SINCE 2003 PROJECTS COMPLETED DOGS IN OUR OFFICE BIKE COMMUTERS

HOURS WORKED, LAST 12 MONTHS

PEOPLE WHO WORK AT THE NERDERY

AVERAGE JANUARY TEMPERATURE

FOUR HUNDRED SIXTY-SEVEN

TWENTY-EIGHT

80

FOUR º

http://www.nerdery.com/people#Tt



HOW TO PARTICIPATEUse the questions panel in the GoToMeeting app

Send us an email at [email protected]

Fill out the survey at the end of the webinar

Tweet with the #nerderywebinar hashtag



All registered viewers will receive a link to the full recording later this week



Additional Q&A will be featured on our podcast

BLOG.NERDERY.COM

NERDERY WEBINAR

PLANNING FOR RESPONSIVE DESIGN


YOUR HOSTS

Ryan CarlsonTechnology Evangelist

@ryancarlson

Erica TavaBusiness Analyst

@emtjohnson

Anthony LukesSenior Front End Developer

@anthonyLukes


1

2

3

4

5

6

Why Plan For Responsive?

OVERVIEW

How the web has been adapting to change

Nuts and bolts of responsive design

Planning for Responsive Design

The Future of Responsive Design

Is Responsive Design the Right Fit?


DISCLAIMER THIS IS NOT A TECH TALK


WHY PLAN FOR RESPONSIVE DESIGN?

CHAPTER 1 OF 6


THE STATE OF THE WEB

Mobile Usage Trends and Expectations

How decisions are made

The growing cost of a fragmented mobile market


Mobile Consumer Report for 2013 – The Nielson Company

AMERICANS THAT OWN A MOBILE PHONE

AMERICANS THAT OWN A SMARTPHONE

SMARTPHONE OWNERS FOR AGES 25-34

94% 64% 78%

MOBILE TREND DATA

SHOPPING/RETAIL

56%












THE EVOLUTION OF THE MOBILE REVOLUTION

1994 PocketWeb for Apple Newton

1997 HandWeb

1999 Blackberry OS

on Pager

2002 Blackberry

Smartphone

2007 First iPhone

“mobile web”

2008 iPhone

SDK Released

2008 HTC Dream G1

Released


THE WEB IS CONSTANTLY CHANGING

CHAPTER 2 OF 6


WEB TRENDS HAVE THE FOLLOWING IN COMMON ¼ They all have been reactive to user

preference in technology.


MOBILE FRIENDLY SITES

(NOW WITH 100% LESS FLASH)


M.DOMAIN DESIGN


MOBILE-LAST RESPONSIVE DESIGN (AHEAD OF ITS TIME)


ADAPTIVE DESIGN

(PROGRESSIVE ENHANCEMENT)


MOBILE-FIRST RESPONSIVE DESIGN (FLEXIBLE CONTENT)


SINGLE DESIGN WITH MANY BREAK POINTS

800px645px

355px510px

435px400px

385px350px

320px


HYBRID APPROACH

DESKTOP EXPERIENCE

MOBILE EXPERIENCE

(A NEW DESIGN TREND)

TWO DESIGNS BASED ON TWO USER EXPERIENCES


NUTS AND BOLTS OF RESPONSIVE DESIGN

CHAPTER 3 OF 6


WHAT IS RESPONSIVE?

Screen Size and Hardware Agnostic

Content First Design

Proactively assumes change in the future.


WHAT IS RESPONSIVE?





WHAT IS RESPONSIVE?





QUESTION BREAK UP NEXT: WHY PLAN FOR RESPONSIVE DESIGN?


CHAPTER 4 OF 6

WHY PLAN FOR RESPONSIVE DESIGN?


OVERVIEW

Mobile First

Ground Up Flexibility

General Rules of Responsive Design


CREATING A MOBILE FIRST PLAN

ASSETS SCALE UP FROM MOBILE

DESIGNS

CONTENT HIERARCHY BASED

ON USE CASES

NAVIGATION AND UI ELEMENTS


PLANNING FOR GROUND UP FLEXIBILITY

ITERATIVE DESIGN PROCESS

EMBEDDED DEVELOPMENT DURING

UX AND DESIGN

EMBEDDED QA TO UNCOVER

ISSUES EARLY


GENERAL RULES ¼ Content stays in the same order ¼ Follow the same page structure ¼ Same functionality and content throughout ¼ Design with progressive enhancement

in mind ¼ Effective use of hardware resources that

scale across known devices


MOBILE FRIENDLY

UX

1X

FE

1X

BE

3X

PM

.5X

QA

.5X

RESPONSIVE/ADAPTIVE

BEFEUX PM QA

1X 1X 3X .5X .5X

+.75X +.75X

+.5X


WHEN IS RESPONSIVE DESIGN THE RIGHT FIT?

CHAPTER 5 OF 6


VIEWER POLL


FACTORS FOR RESPONSIVE DESIGN

Budget

Timeline

Data Driven Decisions

Consistent User Experience or Workflow


BUDGET VARIABLES ¼ Unique Device Support ¼ Overlapping OS / Browser Versions or

Required Support of Legacy Browsers ¼ Too many content types.



Budget

Timeline




TIMELINE VARIABLES ¼ Desktop Experience is already complete. ¼ Project is on a tight deadline.



Budget

Timeline




SUPPORTED BY DATA ¼ Analytics from your existing websites ¼ User Research for new websites ¼ Industry Demographic information ¼ Business to Business or Business to

Consumer?



Budget

Timeline




UX AND UI CONSIDERATIONS ¼ Interactive Elements that don’t

translate to mobile experience ¼ Touch Interactions ¼ Specific Screen Needs (games)

¼ Hardware Intensive Visuals ¼ Mobile experience better served by

native App


GOOD FIT FOR RESPONSIVE


POOR FIT FOR RESPONSIVE


CHAPTER 6 OF 6

THE FUTURE OF RESPONSIVE DESIGN


RESPONDING TO CHANGES IN EMERGING TECHNOLOGY


AS THINGS CHANGE SO CAN OUR WEBSITE

TRANSMITTED USER PREFERENCES

(THINK ACCESSIBILITY)

EXTERNAL SENSORS FOR DISTANCE FROM SCREEN OR LIGHTING

CONDITIONS

EXTERNAL SENSORS TO DETECT MOTION OR USER ORIENTATION.

(EX. WALL SCREENS)


NEXT STEPS


NEXT STEPS

3

2

1 Identify Business Goals and Implement a Content Strategy

Look at the Data to inform Technology Choices and meeting User Needs and/or perform User Research

Engage Development and QA early in the decision making process to reduce development time and costly design decisions from the beginning.


VIEWER POLL


OVERVIEW1

2

3

4

5

6

Why Plan For Responsive?

How the web has been adapting to change

Nuts and bolts of responsive design

Planning for Responsive Design

The Future of Responsive Design

Is Responsive Design the Right Fit?


Topic suggestions or questions? [email protected]

More answers online at http://nerdery.com

Questions & Answers will air on The Nerdery’s podcast

THANK YOU FOR ATTENDING

mailto:[email protected]

http://nerdery.com


Tweet with the #nerderywebinar hashtag

Check your inbox for upcoming webinar news

THANK YOU FOR ATTENDING

Fill out the survey at the end of the webinar

Internet

Making Your Responsive Website a Success