SlideShare a Scribd company logo
1 of 31
Download to read offline
Responsive Web Design
R. Kasturika
Sr. Digital Designer, Ideafarms
Work @
May 2015 Not so confidential | Share Freely (but do give us credit ;) 2
What this presentation is about
Understanding Responsive Web Design from a
Design
Usability
&
Business
point of view
May 2015 Not so confidential | Share Freely (but do give us credit ;) 3
What this presentation is notabout
CSS rules
Media Queries
Flexible Images
Responsive frameworks
Hacks
Rants about Internet Explorer
May 2015 Not so confidential | Share Freely (but do give us credit ;) 4
‘… the ebb and flow of things’
“The control which designers know in the print medium, and often desire in the web
medium, is simply a function of the limitation of the printed page. We should
embrace the fact that the web doesn’t have the same constraints, and design for this
flexibility. But first, we must ‘accept the ebb and flow of things.’”
– John Allsopp, “A Dao of Web Design”
Source: http://alistapart.com/article/dao/
May 2015 Not so confidential | Share Freely (but do give us credit ;) 5
Image Source: http://globalwebindex.net/blog/80-of-internet-users-own-a-smartphone
WITHOUT RESPONSIVE WEBSITES
The current scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 6
Without Responsive Design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 7
What an unresponsive site
looks like on a small device …
Without Responsive Design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 8
Small Font sizes
Tiny links
Horizontal scroll
Slow loading time
Bad User Experience
+
+
What an unresponsive site
looks like on a small device …
… and how it impacts user experience:
+
RESPONSIVE WEBSITES
The desired scenario
May 2015 Not so confidential | Share Freely (but do give us credit ;) 9
May 2015 Not so confidential | Share Freely (but do give us credit ;) 10
May 2015 Not so confidential | Share Freely (but do give us credit ;) 11
Content adjusts according to the
device on which it is being viewed
So just rearrange stuff, right?
{
‘Responsive’ : more than just moving content to fit a smaller screen;
}
May 2015 12Not so confidential | Share Freely (but do give us credit ;)
A web page must begin as a responsive design.
Elements of Responsive Design
Content Hierarchy
Performance Optimization
May 2015 Not so confidential | Share Freely (but do give us credit ;) 13
May 2015 Not so confidential | Share Freely (but do give us credit ;) 14
Content hierarchy
Live Case Study
http://www.bostonglobe.com/
May 2015 Not so confidential | Share Freely (but do give us credit ;) 15
Navigation menus Ad spaces Content AreaInfo/Search
May 2015 Not so confidential | Share Freely (but do give us credit ;) 16
Navigation menus Ad spaces Content AreaInfo/Search
Condensed navigation
Condensed navigation
Summarized information
Minimized search
Main content in a
single column
Ad spaces shifted
‘below the fold’
May 2015 Not so confidential | Share Freely (but do give us credit ;) 17
But there’s more…
“Responsive web design is great, but it’s not a silver bullet.”
– Maximiliano Firtman
“You May Be Losing Users If Responsive Web Design Is Your
Only Mobile Strategy”
Source: http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
May 2015 Not so confidential | Share Freely (but do give us credit ;) 18
Performance Optimization
Responsive web design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 19
Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/
72% of responsive websites
deliver the same number of
bytes regardless of screen
size, even on slow mobile
network connections.
Responsive web design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 20
72% of responsive websites
deliver the same number of
bytes regardless of screen
size, even on slow mobile
network connections.
Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/
Not all users will wait
for your website to load.
May 2015 Not so confidential | Share Freely (but do give us credit ;) 21
Performance
Responsive
Website
The big bulky site leaves
performance hanging in the air
May 2015 Not so confidential | Share Freely (but do give us credit ;) 22
Responsive
Website
Performance
Striking the right balance –
designing mobile-first
HOW DOES A RESPONSIVE WEBSITE
AFFECT YOUR BUSINESS?
Why a responsive website should be your top priority
May 2015 Not so confidential | Share Freely (but do give us credit ;) 23
It’s good for visibility
Google now includes
‘Mobile-friendly’ label to
mobile search results.
May 2015 Not so confidential | Share Freely (but do give us credit ;) 24
… very good for visibility
May 2015 Not so confidential | Share Freely (but do give us credit ;) 25
*Source: http://googlewebmastercentral.blogspot.in/2015/04/rolling-out-mobile-friendly-update.html
We’re boosting the ranking of
mobile-friendly pages on mobile
search results.
– Google Webmaster Central Blog*
“
Being mobile-friendly will now affect search rankings
That means a higher ranking on Google search results
May 2015 Not so confidential | Share Freely (but do give us credit ;) 26
It’s good user experience
“…when a team designs mobile first, the end result is an experience focused
on the key tasks users want to accomplish… That's good user experience and
good for business”
– Luke Wroblewski
May 2015 Not so confidential | Share Freely (but do give us credit ;) 27
Improves conversion rates
“An optimized and consistent site, no matter what platform it’s viewed on,
provides a better experience for the user which is more likely to lead to them
engaging with you than going elsewhere.”
- Paul Mist
May 2015 Not so confidential | Share Freely (but do give us credit ;) 28
It’s future-proof
With increasing number of devices with different dimensions, a dedicated
mobile site is no longer an option. A single responsive site adapts to different
screen sizes and reduces the cost of development
and maintenance.
May 2015 29Not so confidential | Share Freely (but do give us credit ;)
Responsive
 user friendly
 higher visibility
 more users
 good for business
 site is usable across all devices
 improved conversion rate
 reduces development costs
May 2015 Not so confidential | Share Freely (but do give us credit ;) 30
Making the web a friendly place…
Ideafarms is a design-led IT company. We are pioneers in the application of
Industrial Design concepts and approaches to IT-enabled services and solutions.
Find out more at:
http://ideafarms.com/mobile-web/
May 2015 Not so confidential | Share Freely (but do give us credit ;) 31
Where to find us:
Ideafarms
C 94A, South City I,
Gurgaon - 122001
India
Tel: +91 124 4075513
Email: its.magic@ideafarms.com
Visit us at www.ideafarms.com
If you have a legacy website which requires to be adapted
for different devices, drop us a line. We’re happy to help!

More Related Content

Similar to Usable web design

Secrets to Realistic Load Testing
Secrets to Realistic Load TestingSecrets to Realistic Load Testing
Secrets to Realistic Load TestingSOASTA
 
All about web design trend of 2015
All about web design trend of 2015All about web design trend of 2015
All about web design trend of 2015Davis Brown
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsSynapseIndia
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
 
5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web AppPixel Crayons
 
10 Secrets to high - converting website
10 Secrets to high - converting website 10 Secrets to high - converting website
10 Secrets to high - converting website Zaidnaikwadi1
 
Designing for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesDesigning for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesHileman Group
 
SOASTA mPulse update webinar
SOASTA mPulse update webinarSOASTA mPulse update webinar
SOASTA mPulse update webinarCloudBees
 
Secrets to Realistic Load Testing
Secrets to Realistic Load TestingSecrets to Realistic Load Testing
Secrets to Realistic Load TestingSOASTA
 
Getting Your Boss Excited about Mobile Marketing
Getting Your Boss Excited about Mobile MarketingGetting Your Boss Excited about Mobile Marketing
Getting Your Boss Excited about Mobile MarketingRay Pun
 
7 web development trends that will rule 2018
7 web development trends that will rule 20187 web development trends that will rule 2018
7 web development trends that will rule 2018Helios Solutions
 
Using Smartphones, Social Media And Semantic Search
Using Smartphones, Social Media And Semantic SearchUsing Smartphones, Social Media And Semantic Search
Using Smartphones, Social Media And Semantic SearchChristy Hunt
 
Uses Of HTML, Tagss, Tags And Targets
Uses Of HTML, Tagss, Tags And TargetsUses Of HTML, Tagss, Tags And Targets
Uses Of HTML, Tagss, Tags And TargetsHeidi King
 
Website Redesign Proposal PowerPoint Presentation Slides
Website Redesign Proposal PowerPoint Presentation SlidesWebsite Redesign Proposal PowerPoint Presentation Slides
Website Redesign Proposal PowerPoint Presentation SlidesSlideTeam
 
Embracing mobile: How can we track customer interaction outside of the PC?
Embracing mobile: How can we track customer interaction outside of the PC?Embracing mobile: How can we track customer interaction outside of the PC?
Embracing mobile: How can we track customer interaction outside of the PC?Avanade Nederland
 

Similar to Usable web design (20)

Secrets to Realistic Load Testing
Secrets to Realistic Load TestingSecrets to Realistic Load Testing
Secrets to Realistic Load Testing
 
Why responsive websites?
Why responsive websites?Why responsive websites?
Why responsive websites?
 
All about web design trend of 2015
All about web design trend of 2015All about web design trend of 2015
All about web design trend of 2015
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trends
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App
 
10 Secrets to high - converting website
10 Secrets to high - converting website 10 Secrets to high - converting website
10 Secrets to high - converting website
 
Designing for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesDesigning for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn Series
 
SOASTA mPulse update webinar
SOASTA mPulse update webinarSOASTA mPulse update webinar
SOASTA mPulse update webinar
 
Secrets to Realistic Load Testing
Secrets to Realistic Load TestingSecrets to Realistic Load Testing
Secrets to Realistic Load Testing
 
Weebly review
Weebly reviewWeebly review
Weebly review
 
Getting Your Boss Excited about Mobile Marketing
Getting Your Boss Excited about Mobile MarketingGetting Your Boss Excited about Mobile Marketing
Getting Your Boss Excited about Mobile Marketing
 
7 web development trends that will rule 2018
7 web development trends that will rule 20187 web development trends that will rule 2018
7 web development trends that will rule 2018
 
Using Smartphones, Social Media And Semantic Search
Using Smartphones, Social Media And Semantic SearchUsing Smartphones, Social Media And Semantic Search
Using Smartphones, Social Media And Semantic Search
 
Web Design
Web DesignWeb Design
Web Design
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
 
Uses Of HTML, Tagss, Tags And Targets
Uses Of HTML, Tagss, Tags And TargetsUses Of HTML, Tagss, Tags And Targets
Uses Of HTML, Tagss, Tags And Targets
 
15 Ways To Improve Your Website's Conversion Rate
15 Ways To Improve Your Website's Conversion Rate15 Ways To Improve Your Website's Conversion Rate
15 Ways To Improve Your Website's Conversion Rate
 
Website Redesign Proposal PowerPoint Presentation Slides
Website Redesign Proposal PowerPoint Presentation SlidesWebsite Redesign Proposal PowerPoint Presentation Slides
Website Redesign Proposal PowerPoint Presentation Slides
 
Embracing mobile: How can we track customer interaction outside of the PC?
Embracing mobile: How can we track customer interaction outside of the PC?Embracing mobile: How can we track customer interaction outside of the PC?
Embracing mobile: How can we track customer interaction outside of the PC?
 

More from Ideafarms

Transportation 2050 | The future of personal mobility
Transportation 2050 | The future of personal mobilityTransportation 2050 | The future of personal mobility
Transportation 2050 | The future of personal mobilityIdeafarms
 
Design Thinking Case Studies | In Their Own Words | Ideafarms
Design Thinking Case Studies | In Their Own Words | IdeafarmsDesign Thinking Case Studies | In Their Own Words | Ideafarms
Design Thinking Case Studies | In Their Own Words | IdeafarmsIdeafarms
 
Design Thinking Offerings by Ideafarms
Design Thinking Offerings by IdeafarmsDesign Thinking Offerings by Ideafarms
Design Thinking Offerings by IdeafarmsIdeafarms
 
Design Thinking - the buzzword
Design Thinking - the buzzwordDesign Thinking - the buzzword
Design Thinking - the buzzwordIdeafarms
 
DealChaat - Hyper local communication platform for advertising and discovery
DealChaat - Hyper local communication platform for advertising and discoveryDealChaat - Hyper local communication platform for advertising and discovery
DealChaat - Hyper local communication platform for advertising and discoveryIdeafarms
 
Mobility in the social sector
Mobility in the social sectorMobility in the social sector
Mobility in the social sectorIdeafarms
 
3 Point Something
3 Point Something3 Point Something
3 Point SomethingIdeafarms
 
3 Point Something
3 Point Something3 Point Something
3 Point SomethingIdeafarms
 
Mentoring 101: A microcompilation
Mentoring 101: A microcompilation Mentoring 101: A microcompilation
Mentoring 101: A microcompilation Ideafarms
 

More from Ideafarms (9)

Transportation 2050 | The future of personal mobility
Transportation 2050 | The future of personal mobilityTransportation 2050 | The future of personal mobility
Transportation 2050 | The future of personal mobility
 
Design Thinking Case Studies | In Their Own Words | Ideafarms
Design Thinking Case Studies | In Their Own Words | IdeafarmsDesign Thinking Case Studies | In Their Own Words | Ideafarms
Design Thinking Case Studies | In Their Own Words | Ideafarms
 
Design Thinking Offerings by Ideafarms
Design Thinking Offerings by IdeafarmsDesign Thinking Offerings by Ideafarms
Design Thinking Offerings by Ideafarms
 
Design Thinking - the buzzword
Design Thinking - the buzzwordDesign Thinking - the buzzword
Design Thinking - the buzzword
 
DealChaat - Hyper local communication platform for advertising and discovery
DealChaat - Hyper local communication platform for advertising and discoveryDealChaat - Hyper local communication platform for advertising and discovery
DealChaat - Hyper local communication platform for advertising and discovery
 
Mobility in the social sector
Mobility in the social sectorMobility in the social sector
Mobility in the social sector
 
3 Point Something
3 Point Something3 Point Something
3 Point Something
 
3 Point Something
3 Point Something3 Point Something
3 Point Something
 
Mentoring 101: A microcompilation
Mentoring 101: A microcompilation Mentoring 101: A microcompilation
Mentoring 101: A microcompilation
 

Recently uploaded

ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 

Recently uploaded (20)

ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 

Usable web design

  • 1. Responsive Web Design R. Kasturika Sr. Digital Designer, Ideafarms Work @
  • 2. May 2015 Not so confidential | Share Freely (but do give us credit ;) 2 What this presentation is about Understanding Responsive Web Design from a Design Usability & Business point of view
  • 3. May 2015 Not so confidential | Share Freely (but do give us credit ;) 3 What this presentation is notabout CSS rules Media Queries Flexible Images Responsive frameworks Hacks Rants about Internet Explorer
  • 4. May 2015 Not so confidential | Share Freely (but do give us credit ;) 4 ‘… the ebb and flow of things’ “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’” – John Allsopp, “A Dao of Web Design” Source: http://alistapart.com/article/dao/
  • 5. May 2015 Not so confidential | Share Freely (but do give us credit ;) 5 Image Source: http://globalwebindex.net/blog/80-of-internet-users-own-a-smartphone
  • 6. WITHOUT RESPONSIVE WEBSITES The current scenario May 2015 Not so confidential | Share Freely (but do give us credit ;) 6
  • 7. Without Responsive Design May 2015 Not so confidential | Share Freely (but do give us credit ;) 7 What an unresponsive site looks like on a small device …
  • 8. Without Responsive Design May 2015 Not so confidential | Share Freely (but do give us credit ;) 8 Small Font sizes Tiny links Horizontal scroll Slow loading time Bad User Experience + + What an unresponsive site looks like on a small device … … and how it impacts user experience: +
  • 9. RESPONSIVE WEBSITES The desired scenario May 2015 Not so confidential | Share Freely (but do give us credit ;) 9
  • 10. May 2015 Not so confidential | Share Freely (but do give us credit ;) 10
  • 11. May 2015 Not so confidential | Share Freely (but do give us credit ;) 11 Content adjusts according to the device on which it is being viewed
  • 12. So just rearrange stuff, right? { ‘Responsive’ : more than just moving content to fit a smaller screen; } May 2015 12Not so confidential | Share Freely (but do give us credit ;) A web page must begin as a responsive design.
  • 13. Elements of Responsive Design Content Hierarchy Performance Optimization May 2015 Not so confidential | Share Freely (but do give us credit ;) 13
  • 14. May 2015 Not so confidential | Share Freely (but do give us credit ;) 14 Content hierarchy Live Case Study http://www.bostonglobe.com/
  • 15. May 2015 Not so confidential | Share Freely (but do give us credit ;) 15 Navigation menus Ad spaces Content AreaInfo/Search
  • 16. May 2015 Not so confidential | Share Freely (but do give us credit ;) 16 Navigation menus Ad spaces Content AreaInfo/Search Condensed navigation Condensed navigation Summarized information Minimized search Main content in a single column Ad spaces shifted ‘below the fold’
  • 17. May 2015 Not so confidential | Share Freely (but do give us credit ;) 17 But there’s more… “Responsive web design is great, but it’s not a silver bullet.” – Maximiliano Firtman “You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy” Source: http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
  • 18. May 2015 Not so confidential | Share Freely (but do give us credit ;) 18 Performance Optimization
  • 19. Responsive web design May 2015 Not so confidential | Share Freely (but do give us credit ;) 19 Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/ 72% of responsive websites deliver the same number of bytes regardless of screen size, even on slow mobile network connections.
  • 20. Responsive web design May 2015 Not so confidential | Share Freely (but do give us credit ;) 20 72% of responsive websites deliver the same number of bytes regardless of screen size, even on slow mobile network connections. Image Source: http://www.guypo.com/real-world-rwd-performance-take-2/ Not all users will wait for your website to load.
  • 21. May 2015 Not so confidential | Share Freely (but do give us credit ;) 21 Performance Responsive Website The big bulky site leaves performance hanging in the air
  • 22. May 2015 Not so confidential | Share Freely (but do give us credit ;) 22 Responsive Website Performance Striking the right balance – designing mobile-first
  • 23. HOW DOES A RESPONSIVE WEBSITE AFFECT YOUR BUSINESS? Why a responsive website should be your top priority May 2015 Not so confidential | Share Freely (but do give us credit ;) 23
  • 24. It’s good for visibility Google now includes ‘Mobile-friendly’ label to mobile search results. May 2015 Not so confidential | Share Freely (but do give us credit ;) 24
  • 25. … very good for visibility May 2015 Not so confidential | Share Freely (but do give us credit ;) 25 *Source: http://googlewebmastercentral.blogspot.in/2015/04/rolling-out-mobile-friendly-update.html We’re boosting the ranking of mobile-friendly pages on mobile search results. – Google Webmaster Central Blog* “ Being mobile-friendly will now affect search rankings That means a higher ranking on Google search results
  • 26. May 2015 Not so confidential | Share Freely (but do give us credit ;) 26 It’s good user experience “…when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish… That's good user experience and good for business” – Luke Wroblewski
  • 27. May 2015 Not so confidential | Share Freely (but do give us credit ;) 27 Improves conversion rates “An optimized and consistent site, no matter what platform it’s viewed on, provides a better experience for the user which is more likely to lead to them engaging with you than going elsewhere.” - Paul Mist
  • 28. May 2015 Not so confidential | Share Freely (but do give us credit ;) 28 It’s future-proof With increasing number of devices with different dimensions, a dedicated mobile site is no longer an option. A single responsive site adapts to different screen sizes and reduces the cost of development and maintenance.
  • 29. May 2015 29Not so confidential | Share Freely (but do give us credit ;) Responsive  user friendly  higher visibility  more users  good for business  site is usable across all devices  improved conversion rate  reduces development costs
  • 30. May 2015 Not so confidential | Share Freely (but do give us credit ;) 30 Making the web a friendly place… Ideafarms is a design-led IT company. We are pioneers in the application of Industrial Design concepts and approaches to IT-enabled services and solutions. Find out more at: http://ideafarms.com/mobile-web/
  • 31. May 2015 Not so confidential | Share Freely (but do give us credit ;) 31 Where to find us: Ideafarms C 94A, South City I, Gurgaon - 122001 India Tel: +91 124 4075513 Email: its.magic@ideafarms.com Visit us at www.ideafarms.com If you have a legacy website which requires to be adapted for different devices, drop us a line. We’re happy to help!