• Like
  • Save
Responsive Web Design
Upcoming SlideShare
Loading in...5

Responsive Web Design



Responsive Web Design - Testing Process and Best Practices

Responsive Web Design - Testing Process and Best Practices



Total Views
Views on SlideShare
Embed Views



3 Embeds 21

http://www.scoop.it 13
https://twitter.com 5
http://www.linkedin.com 3


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.

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

    Responsive Web Design Responsive Web Design Presentation Transcript

    • Responsive Web Design“Testing Process and Best Practices" desktop mobiles bootstrap fluid layout CSS3 desktop media queries media queriesRWD tabletsresponsive
    • “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen
    • One site for every screen Small / Medium / Large RESPONSIVE WEBDESIGN
    • ….a 4-step process followed by
    • Responsive Web Design Frameworks mastered by
    • is Responsive
    • Desktop Version
    • Tablet Version
    • Phone Version
    • Header with MENU Desktop Tablet Phone
    • Test a Responsive Website
    • Basic Approach Pages should be readable on all resolutions Content defined ‘important’ need to be visible in all breakpoints OS and Browser support No visual lock on the element Device rotation - Check that all items carry the resize together … to be taken under consideration while testing responsive web design
    • 320 x 480 480 x 320 768 x 1024 1024 x 768 980 x 1280 Viewport Sizes Smartphones Tablets Desktop For responsive design to work well, it is especially important to test sites and applications at different viewport sizes.
    • LOGO Menu LOGO Menu LOGO Menu Design Fluid Layout
    • TESTING TOOL for Responsive Web Design
    • ScreenQueries Test your website on exact pixel width and height by changing the provided ruler
    • Step 1 Enter URL at top bar to start. It supports http:// as well as Localhost. Step 2 Resize handle along X-Axis to set custom width to the viewport.
    • Step 3 Resize handle along Y-Axis to set custom height to the viewport. Step 4 Select mobiles & tablets viewport on various device presets.
    • Portrait or landscape mode Step 5
    • ….other tools for testing Responsive Websites Responsive.is Screenfly Matt Kersley’s RWD Responsivepx R Responsinator Resize My Browser
    • “ It has been a great experience to engage professionally with InnovationM - an excellent and committed organization. Look forward to a long lasting relationship. ” Head – IT of a Consumer Goods Company (India) “Thank you for all your hard work on building the app…it looks great! We approached you with a tight deadline & you - DELIVERED!! We appreciate your responsiveness, organization, and efficiency.” Project Manager of a Health Communication Company (USA) “I would like to thank you for the exceptional work InnovationM team has done for building Social Gaming Solution for us. It is truly a great piece of work. Hope to work with you in future.” Co-founder & Head Honcho of a Social Gaming Company (Australia) “InnovationM will be my first choice always for any work related to Mobile apps. I had to launch an Android Tablet apps in very tight timelines. We had some not-so-good code base developed already. Even the Sr. management executives in my company are applauding their work who were earlier a bit reluctant about offshoring……..” Development Manager of a Financial Service Firm (Canada) What clients say about us?
    • End to End Mobile Solution Provider We build Mobile Experience
    • E-3, Sector 3 Noida 201301 (India) Phone: +91 120 4153799, +91 8447 227337 +91 120 4153899, +91 8860 227337 Email: info@innovationm.com Corporate Office Explore www.innovationm.com Tech Blog: http://blogs.innovationm.com/ UX Design Blog: www.innovationm.com/ux/