SlideShare a Scribd company logo
1 of 35
Download to read offline
Mobile-first
Mindset
in Responsive Web Design
HSU 01/2018
Trần Trọng Thanh
Co-founder & CTO Nâu Studio
• int3ractive.com
• twitter.com/trongthanh
• fb.me/trongthanh
• linkedin.com/in/trongthanh
What is mobile-first
responsive web design?
Design from
Design from
Why mobile first?
Bounce rate of mobile is still higher than desktop
Why so?
Many websites are not mobile-friendly
Many responsive websites are not optimized for mobile
It is graceful degradation.
Mobile phones are slower than desktop in terms of
performance but often be the last devices to be
considered by designers and developers.
Mobile-first
Mindset
Entering
Progressive Enhancement
Mobile First 

=
Example of Graceful Degradation
Chrome is the new Internet Explorer
Do websites need to look exactly
the same in every browser?
Example: CSS border-radius
Content First Strategy
Mobile First 

=
The mobile-first approach organically leads to a design 

that’s more content-focused, and therefore user-focused
Stop using Lorem ipsum
Mobile-First 

Design Process
1. Content Inventory
2. Wireframing with Visual
Hierarchy
3. Prepare Design Style Guide
and Component Kitchen Sink
4. Design with the smallest
breakpoints and then scale up
Phone Tablet Desktop
5. Design for touchscreen
and one-handed
• Enlarge touch targets (minimum 40x40px)
• Avoid UI hidden behind mouse hover
• Optimize UI for one-handed interactions
• Test look and feel in real devices
6. Iterate the designs in an
Agile process
• Wireframing using Sketch or Axure
• Design with Sketch or Photoshop
• Share mockups to client to get feedbacks and approval using Marvel
(free) or Invision Apps
• Deliver designs to developers with: Sketch files or upload to Zeplin
• Iterate designs
What’s next for 

Web Designer?
• Save money and buy a smartphone ;)
• Practice and side projects
• Learn HTML & CSS
• Learn CSS Grid
• Get to know new Web features (https://codepen.io/una/
full/Wjvdqm)
Q&A

More Related Content

Similar to Mobile-first Mindset in Responsive Web Design

Should Tour SEO Include Responsive Web Design
Should Tour SEO Include Responsive Web DesignShould Tour SEO Include Responsive Web Design
Should Tour SEO Include Responsive Web DesignContent Equals Money
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive DesignR2integrated
 
Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Jose L. Truchado
 
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designMobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designVivek Parihar
 
Managing Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonManaging Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonRebekah Walker
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive DesignUXMattFiore
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove DesignMike Vdovin
 
Mobile First and Tablet-Centric Design
Mobile First and Tablet-Centric DesignMobile First and Tablet-Centric Design
Mobile First and Tablet-Centric DesignJeff Wisniewski
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdfTECHCENTRAL3
 
Delivering Content via Mobile
Delivering Content via Mobile Delivering Content via Mobile
Delivering Content via Mobile Adam Fellowes
 
Gra410 process book_mariepost
Gra410 process book_mariepostGra410 process book_mariepost
Gra410 process book_mariepostMarie Post
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Hall_
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...City of Vancouver
 

Similar to Mobile-first Mindset in Responsive Web Design (20)

Why go mobile
Why go mobileWhy go mobile
Why go mobile
 
Should Tour SEO Include Responsive Web Design
Should Tour SEO Include Responsive Web DesignShould Tour SEO Include Responsive Web Design
Should Tour SEO Include Responsive Web Design
 
Web development Toronto
Web development TorontoWeb development Toronto
Web development Toronto
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive Design
 
Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>
 
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designMobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
 
Managing Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonManaging Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – Boston
 
What is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdfWhat is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdf
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Mobile First and Tablet-Centric Design
Mobile First and Tablet-Centric DesignMobile First and Tablet-Centric Design
Mobile First and Tablet-Centric Design
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Delivering Content via Mobile
Delivering Content via Mobile Delivering Content via Mobile
Delivering Content via Mobile
 
Gra410 process book_mariepost
Gra410 process book_mariepostGra410 process book_mariepost
Gra410 process book_mariepost
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case S...
 
What is Web Designing?
What is Web Designing?What is Web Designing?
What is Web Designing?
 

Recently uploaded

Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)ICT Watch - Indonesia
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...vmzoxnx5
 
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...ICT Watch - Indonesia
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirtsrahman018755
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfrajats19920
 

Recently uploaded (6)

Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
 
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirts
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdf
 

Mobile-first Mindset in Responsive Web Design