• Save
Webinar on-best-practices-in-responsive-web-design-by-harbinger-systems
Upcoming SlideShare
Loading in...5
×
 

Webinar on-best-practices-in-responsive-web-design-by-harbinger-systems

on

  • 2,169 views

The market dynamics are changing. The 2013 ComScore mobile report states that ‘Smartphones have surpassed 125 million U.S. consumers and tablets are now owned by more than 50 million. We have now ...

The market dynamics are changing. The 2013 ComScore mobile report states that ‘Smartphones have surpassed 125 million U.S. consumers and tablets are now owned by more than 50 million. We have now crossed into the Brave New Digital World – in which consumers are always connected’. It also reveals that ‘more than one out of every three minutes online is now spent on devices beyond the PC’. As an aside, research tells us that the attention span of a modern internet customer is diminishing. Companies are finding innovative ways to enhance customer engagement and create a better digital experience for their customer, partners and prospects.

In this scenario, a company’s website becomes an undisputed heavyweight factor responsible for attracting and retaining audience to the company. In this multi-device world, from the audience’ viewpoint, ease of navigation across all devices and responsiveness of a website are of prime importance in their buying cycle. Be it on a desktop, mobile or a tablet, the uniformity of experience for the customer is of utmost significance. Thankfully, ‘Responsive web design (RWD)’ can be the optimum solution to address this need. RWD has been there for a while. Conceptually it has matured and emerged as a preferred choice for companies aiming to achieve a seamless user experience with minimum of resizing across devices - a ‘one-face’ from any device, any place and any time.

Statistics

Views

Total Views
2,169
Views on SlideShare
821
Embed Views
1,348

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 1,348

http://www.harbinger-systems.com 1342
http://localhost 4
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Put media queries in CSS not HTML header
  • Iterative : go from mobile to desktop or consider mobile and desktop and then breakpoints
  • Convert tables to Graphs..Video and third party content
  • iFrame Support, Video Codec, CSS sprints, Physical Screen Size

Webinar on-best-practices-in-responsive-web-design-by-harbinger-systems Webinar on-best-practices-in-responsive-web-design-by-harbinger-systems Presentation Transcript

  • Harbinger Systems Welcomes you A Webinar on Best Practices in Responsive Web Design
  • Panellists Prachi Kulkarni DGM Technology Solutions Vibhuti Agrawal Manager Design and User Experience Amit Kaveeshwar Associate VP Business Development
  • Agenda • Introduction to Responsive Web Design • Key Components • Best Practices • Advantages • Limitations and Solutions • Q&A
  • Device Usage Preferences in a Day
  • It’s Explosion of Devices 60% of users in all age groups use multiple devices simultaneously – activities involve email, sports, travel, news, reviews, shopping etc. - Survey by COMSCORE Google sees 1.5 million android devices activated per day! 119 M US TVs will be connected to Internet by 2015 - Factbrowser Review Mobile internet is expected to overtake desktop internet usage this year. This makes it necessary to design websites that are flexible and can be viewed from almost any device. In Q1 2013, 43.5% users used Mobile Net compared to 79% on desktop. The desktop net usage slipped 8% in 6 months! - Media Behavior
  • Nature is Responsive… What we need is Smart, Adaptive, Logical and Single Source Design
  • Other Attempts • UI Designer’s Community have been attempting to be responsive for quite a while now.. • Widths in percentages to support various browsers - Adaptive Design • Mobile First Design Style – Possible Simplistic design • A combination of all these attempts culminated in RWD
  • What is Responsive Web Design? Responsive Web Design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones). - Wikipedia
  • RWD Sample Phone Tablet/iPad Desktop (Continued…)
  • RWD Sample Phone Tablet/iPad Desktop
  • RWD Sample Phone Tablet/iPad Desktop (Continued…) Disclaimer: Harbinger has not designed or developed this website.
  • Components of RWD Fluid Layout- Use of Grid Widths for Dynamic change of Layout .entity {width = 22.75%;} Media Queries + HTML5 + CSS3 @media screen and (max- width: 800px) {} @media screen and (max- width: 480px) {} Flexible Images and Media RESS RWD
  • Best Practices 1. Clean , Logical and Optimized Code 2. Content First – Design with Final Content 3. Use of Frameworks 4. Consider Breakpoints
  • Best Practices (Continued…) 5. Iterative Visual Design and Coding 6. Test on Real Devices 7. Think Outside Design • Layouts to suit the device styles • Content Presentation • Forget about perfect • Fluid Inconsistencies 8. Awareness of CSS Constraints
  • Best Practices (Continued…) 9. Liquid Layouts and Grids (@media, viewport, respond.js and media queries library) 10. Lazy Loading is better for performance 11. Use SVG No Pixels, Always Crisp, Small File Sizes, Very Scalable 12. Videos and Data Tables will need specific considerations
  • RWD Can Help in Many Ways… Single Source and URL Better for SEO Similar User experience and Content across devices Common Deployment, easier Version Control Works for all Current and Future Devices
  • Keep this in Mind • Use RWD only if it fits • Features and Content, User Friendliness, eCommerce and SEO strategy • Progressively Enhancing Mobile Site can be good • Fluid Mobile Layouts + media queries to optimize for bigger screens • RWD may cost more initially but it will have lasting benefits
  • All would be well only if…
  • RWD Limitations • Single-solution may not mean delivering the optimal experience for each visitor • Desktop and Mobile UI has to be different with respect to Layout and many times content • Converting existing site to RWD is usually a Rebuild of UI – Can be tough decision for working site • Build and Maintain are time consuming
  • RWD Limitations (Continued…) • Site Load Takes Time • Media Queries are Client Side • 86% of designs are observed to send same content to desktops and Mobile Devices • This is over-downloading specially for mobile • Backward compatibility on devices is tough due to device limitations– NO CSS3 NO RWD! • Handling Third Party Content • Can wrap in iFrames!
  • Making it ‘Responsive’ All the Way!!!
  • RESS • Responsive Server Side Design will take help from Server to do the following: • Determine Context specific content • Cache Device specifications • Image Handling • In addition to the above, following Sensors can also be considered • Time of the day • Network speed • Page weight
  • RESS Workflow Detect the device before page load • Device Lookup (based on HTTP Headers) First Load: Server side selection • Based on the device select appropriate content • Have image server appropriately scale the images and send them • Send device capabilities to JavaScript • Send markups based on capabilities Device Feature Detection on Client Side
  • RESS Workflow (Continued…) Store in cookies •Client width and height •Grid widths Maintain Context in the form of User Information – server side selection is faster Cookies, User context, Device Detected values at the Server Subsequent Loads
  • Some More Examples…
  • Questions?
  • Thank You! Visit us at: www.harbinger-systems.com Write to us at: hsplinfo@harbingergroup.com Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306 Follow us