Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 Resp...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 3
What this presentation is notabout
CSS rules
Media...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 4
‘… the ebb and flow of things’
“The control which ...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 5
Image Source: http://globalwebindex.net/blog/80-of...
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 sit...
Without Responsive Design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 8
Small Font sizes
Tiny li...
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 ...
So just rearrange stuff, right?
{
‘Responsive’ : more than just moving content to fit a smaller screen;
}
May 2015 12Not s...
Elements of Responsive Design
Content Hierarchy
Performance Optimization
May 2015 Not so confidential | Share Freely (but ...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 14
Content hierarchy
Live Case Study
http://www.bost...
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/Searc...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 17
But there’s more…
“Responsive web design is great...
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.gu...
Responsive web design
May 2015 Not so confidential | Share Freely (but do give us credit ;) 20
72% of responsive websites
...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 21
Performance
Responsive
Website
The big bulky site...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 22
Responsive
Website
Performance
Striking the right...
HOW DOES A RESPONSIVE WEBSITE
AFFECT YOUR BUSINESS?
Why a responsive website should be your top priority
May 2015 Not so c...
It’s good for visibility
Google now includes
‘Mobile-friendly’ label to
mobile search results.
May 2015 Not so confidentia...
… very good for visibility
May 2015 Not so confidential | Share Freely (but do give us credit ;) 25
*Source: http://google...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 26
It’s good user experience
“…when a team designs m...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 27
Improves conversion rates
“An optimized and consi...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 28
It’s future-proof
With increasing number of devic...
May 2015 29Not so confidential | Share Freely (but do give us credit ;)
Responsive
 user friendly
 higher visibility
 m...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 30
Making the web a friendly place…
Ideafarms is a d...
May 2015 Not so confidential | Share Freely (but do give us credit ;) 31
Where to find us:
Ideafarms
C 94A, South City I,
...
Upcoming SlideShare
Loading in …5
×

Usable web design

3,287 views

Published on

At Ideafarms, we take design seriously. And everyone - including sales admin and HR participate along with the tech and creative teams during workshops. These are the accompanying slides from the interactive session we recently had on Responsive Web Design.

Published in: Design
  • Be the first to comment

Usable web design

  1. 1. Responsive Web Design R. Kasturika Sr. Digital Designer, Ideafarms Work @
  2. 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. 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. 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. 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. 6. WITHOUT RESPONSIVE WEBSITES The current scenario May 2015 Not so confidential | Share Freely (but do give us credit ;) 6
  7. 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. 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. 9. RESPONSIVE WEBSITES The desired scenario May 2015 Not so confidential | Share Freely (but do give us credit ;) 9
  10. 10. May 2015 Not so confidential | Share Freely (but do give us credit ;) 10
  11. 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. 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. 13. Elements of Responsive Design Content Hierarchy Performance Optimization May 2015 Not so confidential | Share Freely (but do give us credit ;) 13
  14. 14. May 2015 Not so confidential | Share Freely (but do give us credit ;) 14 Content hierarchy Live Case Study http://www.bostonglobe.com/
  15. 15. May 2015 Not so confidential | Share Freely (but do give us credit ;) 15 Navigation menus Ad spaces Content AreaInfo/Search
  16. 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. 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. 18. May 2015 Not so confidential | Share Freely (but do give us credit ;) 18 Performance Optimization
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!

×