• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ssn rwd

Ssn rwd






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Ssn rwd Ssn rwd Presentation Transcript

    • Content First Mobile Tablets Laptops TV  Responsive Web Design
    • Your Site Doesn't Sit On A Desk Anymore What is Responsive Web Design ?
    • 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
    • Why is it Important ?
    • 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
    • Benefits & Downsides of RWD !
    • 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
    • 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
    • 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/
    • Let’s Adapt to RWD
    • 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