SlideShare une entreprise Scribd logo
1  sur  44
The world has gone mobile.
But has your web experience?
@petesena
#rwdCADC
A little about me.
Hi there. I’m @petesena
You would expect a fancy bio of me to go here or
something but that would just be douchey. You should
follow me on twitter. I tweet about the intersection
of design and technology in marketing. Cool tools,
trends, tutorials and all that jazz. If this presentation
has been useful for you please share it with someone.
This is the web today.
77% of people use smart phones as
their preferred medium for searching.
-Google / Nielsen
mobile search moments march 2013
WTF! I just want
to get information
on admissions.
Where did responsive design come from?
So what the hell is responsive design?
flexible grid flexible media media queries
It means you are device agnostic!
Why responsive?
• One application to maintain which runs everywhere
• Improve SEO and user confusion with one set of URLs
• Such a variety of devices, platforms and browsers
• Mobile and desktop simply isn’t enough
• Don’t discriminate, one site for all devices
• Future proof and ready for the next device
Breaking some old habits.
The old waterfall web design process
Discovery
Strategy &
Planning
Design Development Optimize
It’s time to evolve.
Evolving to a new iterative process
Project
Planning!
Discovery
(Immersion)!
Strategy! Content
Strategy!
UX & IA! Design! Development! Post
Launch!
A new web design process
A new web design process
Strategy
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy Outcome
Not content first.
Not content first.
Not mobile first.
Not content first.
Not mobile first.
Context first.
sketchearly.
Some handy UserExperiencedesigntools
Design systems. Not comps.
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
Responsive
web design
resources
• Style Tiles (http://styletil.es/)
• Gumby grid & UI Kit templates
(gumbyframework.com)
• Sketchsheets (sneakpeekit.com)
• Modular Scale (balanced typography)
A photoshop UI kit
A photoshop user interface kit can be very helpful as a
starting place. It will contain virtually all HTML elements
which will be a great reference asset for when it comes
time for building the markup/css. Gumby Framework
includes all the grid photoshop files as well as the
interface elements.
Analog & digital grids
Resources for web typography
Fonts
Resources for front-end development
The best advice ever.
wait for it...
Learn to code.
</>
Where to learn front-end development ?
If you enjoyed this gimme a shout on twitter
@petesena.
Go make something.

Contenu connexe

En vedette

En vedette (15)

The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Hello I'm Taylor!
Hello I'm Taylor!Hello I'm Taylor!
Hello I'm Taylor!
 
PSFK Future Of Light Report
PSFK Future Of Light ReportPSFK Future Of Light Report
PSFK Future Of Light Report
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
Акция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснствоАкция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснство
 
The shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsThe shift: UX Designers as Business Consultants
The shift: UX Designers as Business Consultants
 
Why use responsive web design?
Why use responsive web design?Why use responsive web design?
Why use responsive web design?
 
The 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck PresentationsThe 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck Presentations
 
SXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional PeopleSXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional People
 
UX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safetyUX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safety
 
Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012
 
Tech Trends 2014
Tech Trends 2014 Tech Trends 2014
Tech Trends 2014
 
The Other #WorldCup #FIFA
The Other #WorldCup #FIFAThe Other #WorldCup #FIFA
The Other #WorldCup #FIFA
 
Motion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interactionMotion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interaction
 
American Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern ConsumersAmerican Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern Consumers
 

Plus de Digital Surgeons

Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you think
Digital Surgeons
 

Plus de Digital Surgeons (20)

Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
Machine learning
Machine learningMachine learning
Machine learning
 
CraftCMS 3.x Deep Dive
CraftCMS 3.x Deep DiveCraftCMS 3.x Deep Dive
CraftCMS 3.x Deep Dive
 
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More Customers
 
In Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreIn Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is More
 
Unlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationUnlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital Transformation
 
Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignBetter Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
 
How to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvHow to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tv
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers
 
Creating Powerful Customer Experiences
Creating Powerful Customer ExperiencesCreating Powerful Customer Experiences
Creating Powerful Customer Experiences
 
How to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitHow to Build a Brand Voice Toolkit
How to Build a Brand Voice Toolkit
 
Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you think
 
What You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyWhat You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable Technology
 

Dernier

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
amitlee9823
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
amitlee9823
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 

Dernier (20)

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 

Responsive Web Design Process

  • 1. The world has gone mobile. But has your web experience? @petesena #rwdCADC
  • 3. Hi there. I’m @petesena You would expect a fancy bio of me to go here or something but that would just be douchey. You should follow me on twitter. I tweet about the intersection of design and technology in marketing. Cool tools, trends, tutorials and all that jazz. If this presentation has been useful for you please share it with someone.
  • 4.
  • 5.
  • 6. This is the web today.
  • 7. 77% of people use smart phones as their preferred medium for searching. -Google / Nielsen mobile search moments march 2013
  • 8. WTF! I just want to get information on admissions.
  • 9. Where did responsive design come from?
  • 10. So what the hell is responsive design? flexible grid flexible media media queries
  • 11. It means you are device agnostic!
  • 12. Why responsive? • One application to maintain which runs everywhere • Improve SEO and user confusion with one set of URLs • Such a variety of devices, platforms and browsers • Mobile and desktop simply isn’t enough • Don’t discriminate, one site for all devices • Future proof and ready for the next device
  • 13. Breaking some old habits.
  • 14. The old waterfall web design process Discovery Strategy & Planning Design Development Optimize
  • 15. It’s time to evolve.
  • 16. Evolving to a new iterative process Project Planning! Discovery (Immersion)! Strategy! Content Strategy! UX & IA! Design! Development! Post Launch!
  • 17. A new web design process
  • 18. A new web design process Strategy
  • 19. A new web design process Sketching Review Validate Prototyping DesignWireframe Strategy
  • 20. A new web design process Sketching Review Validate Prototyping DesignWireframe Strategy Outcome
  • 21.
  • 23. Not content first. Not mobile first.
  • 24. Not content first. Not mobile first. Context first.
  • 26.
  • 27.
  • 28.
  • 29.
  • 32. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 33. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 34. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 35. Responsive web design resources • Style Tiles (http://styletil.es/) • Gumby grid & UI Kit templates (gumbyframework.com) • Sketchsheets (sneakpeekit.com) • Modular Scale (balanced typography)
  • 36. A photoshop UI kit A photoshop user interface kit can be very helpful as a starting place. It will contain virtually all HTML elements which will be a great reference asset for when it comes time for building the markup/css. Gumby Framework includes all the grid photoshop files as well as the interface elements.
  • 38. Resources for web typography Fonts
  • 39. Resources for front-end development
  • 43. Where to learn front-end development ?
  • 44. If you enjoyed this gimme a shout on twitter @petesena. Go make something.