SlideShare a Scribd company logo
Being Responsive to Change
Experiences from taking Vodafone.ie into Responsive Web Design
Or how I learned to stop worrying and love the bomb
Ian Huet
Lead Developer

Section divider title

• Global design & strategy consultancy based in Dublin.
• Our services run the gamut from user research and
design, through to build, deployment and testing.
Vodafone.ie Mobilisation / Responsive Web Design
Goals
• Convert the highest traffic flows & pages to be Responsive
• Achieve this within a fixed timeframe
•

Use the Vodafone Group framework

Risks
•

Achieve Responsive without affecting the existing site

•

Complete this within a constraint heavy environment
Responsive Web Design
Responsive Web Design / Ethan Marcotte, 2010

1.Flexible grids

Instead of PX use EM or %

2.Flexible images

Max-width: 100%

3.Media queries

@media (max-width: 770px)

alistapart.com/article/responsive-web-design
Full steam ahead...
Dao of Web Design / John Allsop, 2004

“Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So rituals enthrall generation after generation”
Tao Te Ching; 38 Ritual
1. Flexible Grids

Flexible grids & Rigid mindsets
• Omnigraffle & Photoshop are static design tools
• Design by 320px & 960px
• Designing without using representative content
2. Flexible Images

More than just Flexible Images:
Content / Function First
• Content replaces ‘fixed width’ as the first design step
• Revisiting all your existing content presentation
patterns shouldn’t be underestimated

• Media management: Images, Video, Pdf, etc.
3. Media Queries

Adopting new technologies & techniques
• Streamlining a greatly extended browser testing profile
• Effective media queries
• Feature detection and polyfills
4. Page weight & Load speed

Building performant pages
• Consolidate page assets to reduce HTTP calls
• Reduce bloat in all assets: CSS, JS & images
• Leverage Client-side functionality: Backbone & HandlebarsJS
Dynamic Upgrade Flow

Gallery

Detail
JSON feed

Choice
The way ahead
Designing
✤ Embrace the fluid web
✤ Find new tools & develop new processes:
represent all contexts & states
✤ Do you speak Progressive Enhancement?

Upskill in the medium: HTML, CSS, JS, and Browser capabilities
Development
✤ Embrace the increasingly functional Web
✤ Develop consistency & stability
✤ Ensure ample resources to test & develop

Keep scope conservative
Be vigilant in maintaining standards
Content Production
✤ Content/Function first approach
✤ Blob based CMS are not best suited

Responsive Design won’t fix your content problem
alistapart.com/article/responsive-design-wont-fix-your-content-problem
Planning
Planning

✤ Small but devastating
✤ Impacts everything
✤ Develop language everyone
understands
Unknown unknowns / Donald Rumsfeld

“There are known unknowns; this is to say, there are
things that we now know we don’t know.

But there are also unknown unknowns - there are things
we do not know we don’t know”

Donald Rumsfeld

Rigor is required to identify & mitigate unknowns
first, we must accept the ebb and flow of things
alistapart.com/article/dao
Thank you
Section divider title

Twitter: @ianhuet
Email: ian.huet@iqcontent.com

More Related Content

Similar to Responsive to Change

Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
Maria D'Amato
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Dave Olsen
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Doug Gapinski
 
Effective course design
Effective course designEffective course design
Effective course design
WCET
 
student innovation 2014
student innovation 2014student innovation 2014
student innovation 2014
Freelancer
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 
#econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team #econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team
Jean Ayers
 
Consistently Accessible: Building Better Websites with Pattern Libraries
Consistently Accessible: Building Better Websites with Pattern LibrariesConsistently Accessible: Building Better Websites with Pattern Libraries
Consistently Accessible: Building Better Websites with Pattern Libraries
Stacy Carston Sporie
 
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data ChallengesWebinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
Storage Switzerland
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe
 
Internship template for review 1
Internship template for review 1Internship template for review 1
Internship template for review 1
Lahari Gowda
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
Mindy McAdams
 
Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13
Konrad Roeder
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
Russ Weakley
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
Achieve Internet
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
JamesParker406701
 
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveDesign Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Inductive Automation
 
Say no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
Say no to special snowflakes and scale - 2016 Twin Cities Drupal CampSay no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
Say no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
Kevin Crafts
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Karin Tracy
 

Similar to Responsive to Change (20)

Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
 
Effective course design
Effective course designEffective course design
Effective course design
 
student innovation 2014
student innovation 2014student innovation 2014
student innovation 2014
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
#econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team #econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team
 
Consistently Accessible: Building Better Websites with Pattern Libraries
Consistently Accessible: Building Better Websites with Pattern LibrariesConsistently Accessible: Building Better Websites with Pattern Libraries
Consistently Accessible: Building Better Websites with Pattern Libraries
 
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data ChallengesWebinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
Webinar: Preserve, Distribute and Deliver - M&E's Three Biggest Data Challenges
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
 
Internship template for review 1
Internship template for review 1Internship template for review 1
Internship template for review 1
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
 
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveDesign Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
 
Say no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
Say no to special snowflakes and scale - 2016 Twin Cities Drupal CampSay no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
Say no to special snowflakes and scale - 2016 Twin Cities Drupal Camp
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
 

Recently uploaded

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 

Recently uploaded (20)

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 

Responsive to Change

  • 1. Being Responsive to Change Experiences from taking Vodafone.ie into Responsive Web Design Or how I learned to stop worrying and love the bomb
  • 2. Ian Huet Lead Developer Section divider title • Global design & strategy consultancy based in Dublin. • Our services run the gamut from user research and design, through to build, deployment and testing.
  • 3. Vodafone.ie Mobilisation / Responsive Web Design Goals • Convert the highest traffic flows & pages to be Responsive • Achieve this within a fixed timeframe • Use the Vodafone Group framework Risks • Achieve Responsive without affecting the existing site • Complete this within a constraint heavy environment
  • 5. Responsive Web Design / Ethan Marcotte, 2010 1.Flexible grids Instead of PX use EM or % 2.Flexible images Max-width: 100% 3.Media queries @media (max-width: 770px) alistapart.com/article/responsive-web-design
  • 7. Dao of Web Design / John Allsop, 2004 “Well established hierarchies are not easily uprooted; Closely held beliefs are not easily released; So rituals enthrall generation after generation” Tao Te Ching; 38 Ritual
  • 8.
  • 9. 1. Flexible Grids Flexible grids & Rigid mindsets • Omnigraffle & Photoshop are static design tools • Design by 320px & 960px • Designing without using representative content
  • 10. 2. Flexible Images More than just Flexible Images: Content / Function First • Content replaces ‘fixed width’ as the first design step • Revisiting all your existing content presentation patterns shouldn’t be underestimated • Media management: Images, Video, Pdf, etc.
  • 11. 3. Media Queries Adopting new technologies & techniques • Streamlining a greatly extended browser testing profile • Effective media queries • Feature detection and polyfills
  • 12. 4. Page weight & Load speed Building performant pages • Consolidate page assets to reduce HTTP calls • Reduce bloat in all assets: CSS, JS & images • Leverage Client-side functionality: Backbone & HandlebarsJS Dynamic Upgrade Flow Gallery Detail JSON feed Choice
  • 14. Designing ✤ Embrace the fluid web ✤ Find new tools & develop new processes: represent all contexts & states ✤ Do you speak Progressive Enhancement? Upskill in the medium: HTML, CSS, JS, and Browser capabilities
  • 15. Development ✤ Embrace the increasingly functional Web ✤ Develop consistency & stability ✤ Ensure ample resources to test & develop Keep scope conservative Be vigilant in maintaining standards
  • 16. Content Production ✤ Content/Function first approach ✤ Blob based CMS are not best suited Responsive Design won’t fix your content problem alistapart.com/article/responsive-design-wont-fix-your-content-problem
  • 18. Planning ✤ Small but devastating ✤ Impacts everything ✤ Develop language everyone understands
  • 19.
  • 20. Unknown unknowns / Donald Rumsfeld “There are known unknowns; this is to say, there are things that we now know we don’t know. But there are also unknown unknowns - there are things we do not know we don’t know” Donald Rumsfeld Rigor is required to identify & mitigate unknowns
  • 21. first, we must accept the ebb and flow of things alistapart.com/article/dao
  • 22. Thank you Section divider title Twitter: @ianhuet Email: ian.huet@iqcontent.com