Ssn rwd

427 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
427
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ssn rwd

  1. 1. Content First Mobile Tablets Laptops TV  Responsive Web Design
  2. 2. Your Site Doesn't Sit On A Desk Anymore What is Responsive Web Design ?
  3. 3. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Image source: http://johnpolacek.github.com Fluid Grids | Flexible Images | CSS Media Queries | Screen Resolutions
  4. 4. Why is it Important ?
  5. 5. The total number of people using the web on mobile devices is set to surpass desktops by 2015 - International Data Center (IDC) 2015 2013 2011 Desktop/Laptop Mobile/Tablets
  6. 6. Benefits & Downsides of RWD !
  7. 7. Benefits  One Website – One Content Benefits Users, Developers  A Single Code base, Less Expensive to maintain Benefits Developers, Business Stakeholder  It's not just about the Mobile devices Benefits Users with higher-resolution screens  Designing for Mobile first Helps UX, IA, even business with identifying important functionality and content  Stats & SEO Search Engine can discover your content more efficiently, Web Analytics will find easy in reporting
  8. 8. Downsides  Development times and resources Initially. Have trained designers and developers who are aware of the techniques  Complex for transactional business applications E-Commerce or Process driven Enterprise Applications  Loading times Data Speed on mobile devices is still isn’t great  Creativeness in Design Sometimes you need extra cool graphics to enhance the users experience  Navigation & Content Navigation pattern are varied and content hierarchy should be based on user needs  Hardware functions Cannot utilize the device functions like camera, compass, gyroscope, gpu power
  9. 9. Let’s Experience it  Some sites to test them www.froont.com/ http://quirktools.com/screenfly/ http://responsivepx.com/ http://960.gs/ Layouts:  Mostly Fluid http://www.fivesimplesteps.com/  Column Drop http://modernizr.com/  Layout Shifter http://foodsense.is/  Tiny Tweaks https://path.com/  Off Canvas http://facebook.com/
  10. 10. Let’s Adapt to RWD
  11. 11. Obrigado!! Thanks! Visit us at Photoshop User Group https://www.facebook.com/groups/ photoshopug/ Face me at https://www.facebook.com/KeshavSoniUX Sweet Tweet @Kesshav Email Bkeshav.soni@gmail.com

×