View
109
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
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
#NERDERYWEBINAR @THE_NERDERY
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 º
#NERDERYWEBINAR @THE_NERDERY
#NERDERYWEBINAR @THE_NERDERY
HOW TO PARTICIPATEUse the questions panel in the GoToMeeting app
Send us an email at webinar@nerdery.com
Fill out the survey at the end of the webinar
Tweet with the #nerderywebinar hashtag
#NERDERYWEBINAR @THE_NERDERY
#NERDERYWEBINAR @THE_NERDERY
All registered viewers will receive a link to the full recording later this week
#NERDERYWEBINAR @THE_NERDERY
#NERDERYWEBINAR @THE_NERDERY
Additional Q&A will be featured on our podcast
BLOG.NERDERY.COM
NERDERY WEBINAR
PLANNING FOR RESPONSIVE DESIGN
#NERDERYWEBINAR @THE_NERDERY
YOUR HOSTS
Ryan CarlsonTechnology Evangelist
@ryancarlson
Erica TavaBusiness Analyst
@emtjohnson
Anthony LukesSenior Front End Developer
@anthonyLukes
#NERDERYWEBINAR @THE_NERDERY
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?
#NERDERYWEBINAR @THE_NERDERY
DISCLAIMER THIS IS NOT A TECH TALK
#NERDERYWEBINAR @THE_NERDERY
WHY PLAN FOR RESPONSIVE DESIGN?
CHAPTER 1 OF 6
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF THE WEB
Mobile Usage Trends and Expectations
How decisions are made
The growing cost of a fragmented mobile market
#NERDERYWEBINAR @THE_NERDERY
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%
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF THE WEB
Mobile Usage Trends and Expectations
How decisions are made
The growing cost of a fragmented mobile market
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF THE WEB
Mobile Usage Trends and Expectations
How decisions are made
The growing cost of a fragmented mobile market
#NERDERYWEBINAR @THE_NERDERY
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
#NERDERYWEBINAR @THE_NERDERY
THE WEB IS CONSTANTLY CHANGING
CHAPTER 2 OF 6
#NERDERYWEBINAR @THE_NERDERY
WEB TRENDS HAVE THE FOLLOWING IN COMMON ¼ They all have been reactive to user
preference in technology.
#NERDERYWEBINAR @THE_NERDERY
MOBILE FRIENDLY SITES
(NOW WITH 100% LESS FLASH)
#NERDERYWEBINAR @THE_NERDERY
M.DOMAIN DESIGN
#NERDERYWEBINAR @THE_NERDERY
MOBILE-LAST RESPONSIVE DESIGN (AHEAD OF ITS TIME)
#NERDERYWEBINAR @THE_NERDERY
ADAPTIVE DESIGN
(PROGRESSIVE ENHANCEMENT)
#NERDERYWEBINAR @THE_NERDERY
MOBILE-FIRST RESPONSIVE DESIGN (FLEXIBLE CONTENT)
#NERDERYWEBINAR @THE_NERDERY
SINGLE DESIGN WITH MANY BREAK POINTS
800px645px
355px510px
435px400px
385px350px
320px
#NERDERYWEBINAR @THE_NERDERY
HYBRID APPROACH
DESKTOP EXPERIENCE
MOBILE EXPERIENCE
(A NEW DESIGN TREND)
TWO DESIGNS BASED ON TWO USER EXPERIENCES
#NERDERYWEBINAR @THE_NERDERY
NUTS AND BOLTS OF RESPONSIVE DESIGN
CHAPTER 3 OF 6
#NERDERYWEBINAR @THE_NERDERY
WHAT IS RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assumes change in the future.
#NERDERYWEBINAR @THE_NERDERY
WHAT IS RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assumes change in the future.
#NERDERYWEBINAR @THE_NERDERY
WHAT IS RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assumes change in the future.
#NERDERYWEBINAR @THE_NERDERY
QUESTION BREAK UP NEXT: WHY PLAN FOR RESPONSIVE DESIGN?
#NERDERYWEBINAR @THE_NERDERY
CHAPTER 4 OF 6
WHY PLAN FOR RESPONSIVE DESIGN?
#NERDERYWEBINAR @THE_NERDERY
OVERVIEW
Mobile First
Ground Up Flexibility
General Rules of Responsive Design
#NERDERYWEBINAR @THE_NERDERY
CREATING A MOBILE FIRST PLAN
ASSETS SCALE UP FROM MOBILE
DESIGNS
CONTENT HIERARCHY BASED
ON USE CASES
NAVIGATION AND UI ELEMENTS
#NERDERYWEBINAR @THE_NERDERY
PLANNING FOR GROUND UP FLEXIBILITY
ITERATIVE DESIGN PROCESS
EMBEDDED DEVELOPMENT DURING
UX AND DESIGN
EMBEDDED QA TO UNCOVER
ISSUES EARLY
#NERDERYWEBINAR @THE_NERDERY
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
#NERDERYWEBINAR @THE_NERDERY
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
#NERDERYWEBINAR @THE_NERDERY
WHEN IS RESPONSIVE DESIGN THE RIGHT FIT?
CHAPTER 5 OF 6
#NERDERYWEBINAR @THE_NERDERY
VIEWER POLL
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experience or Workflow
#NERDERYWEBINAR @THE_NERDERY
BUDGET VARIABLES ¼ Unique Device Support ¼ Overlapping OS / Browser Versions or
Required Support of Legacy Browsers ¼ Too many content types.
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experience or Workflow
#NERDERYWEBINAR @THE_NERDERY
TIMELINE VARIABLES ¼ Desktop Experience is already complete. ¼ Project is on a tight deadline.
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experience or Workflow
#NERDERYWEBINAR @THE_NERDERY
SUPPORTED BY DATA ¼ Analytics from your existing websites ¼ User Research for new websites ¼ Industry Demographic information ¼ Business to Business or Business to
Consumer?
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experience or Workflow
#NERDERYWEBINAR @THE_NERDERY
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
#NERDERYWEBINAR @THE_NERDERY
GOOD FIT FOR RESPONSIVE
#NERDERYWEBINAR @THE_NERDERY
POOR FIT FOR RESPONSIVE
#NERDERYWEBINAR @THE_NERDERY
CHAPTER 6 OF 6
THE FUTURE OF RESPONSIVE DESIGN
#NERDERYWEBINAR @THE_NERDERY
RESPONDING TO CHANGES IN EMERGING TECHNOLOGY
#NERDERYWEBINAR @THE_NERDERY
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)
#NERDERYWEBINAR @THE_NERDERY
NEXT STEPS
#NERDERYWEBINAR @THE_NERDERY
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.
#NERDERYWEBINAR @THE_NERDERY
VIEWER POLL
#NERDERYWEBINAR @THE_NERDERY
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?
#NERDERYWEBINAR @THE_NERDERY
Topic suggestions or questions? webinar@nerdery.com
More answers online at http://nerdery.com
Questions & Answers will air on The Nerdery’s podcast
THANK YOU FOR ATTENDING
#NERDERYWEBINAR @THE_NERDERY
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
Recommended