Responsive
Web
Design“Testing Process and Best Practices"
desktop mobiles
bootstrap fluid layout CSS3 desktop
media querie...
“Day by day, the number of devices, platforms, and browsers that need to work
with your site grows. Responsive web design ...
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
breakpoin...
320 x 480
480 x
320
768 x 1024
1024 x 768
980 x 1280
Viewport Sizes
Smartphones Tablets Desktop
For responsive design to w...
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
c...
Step 3
Resize handle along Y-Axis to set custom height to the viewport.
Step 4
Select mobiles & tablets viewport on variou...
Portrait or landscape mode
Step 5
….other tools for testing Responsive Websites
Responsive.is
Screenfly
Matt Kersley’s RWD
Responsivepx
R Responsinator
Resi...
“ It has been a great experience to engage professionally
with InnovationM - an excellent and committed organization.
Look...
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@in...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,463 views
1,056 views

Published on

Responsive Web Design - Testing Process and Best Practices

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

No Downloads
Views
Total views
1,463
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web Design“Testing Process and Best Practices" desktop mobiles bootstrap fluid layout CSS3 desktop media queries media queriesRWD tabletsresponsive
  2. 2. “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
  3. 3. One site for every screen Small / Medium / Large RESPONSIVE WEBDESIGN
  4. 4. ….a 4-step process followed by
  5. 5. Responsive Web Design Frameworks mastered by
  6. 6. is Responsive
  7. 7. Desktop Version
  8. 8. Tablet Version
  9. 9. Phone Version
  10. 10. Header with MENU Desktop Tablet Phone
  11. 11. Test a Responsive Website
  12. 12. 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
  13. 13. 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.
  14. 14. LOGO Menu LOGO Menu LOGO Menu Design Fluid Layout
  15. 15. TESTING TOOL for Responsive Web Design
  16. 16. ScreenQueries Test your website on exact pixel width and height by changing the provided ruler
  17. 17. 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.
  18. 18. Step 3 Resize handle along Y-Axis to set custom height to the viewport. Step 4 Select mobiles & tablets viewport on various device presets.
  19. 19. Portrait or landscape mode Step 5
  20. 20. ….other tools for testing Responsive Websites Responsive.is Screenfly Matt Kersley’s RWD Responsivepx R Responsinator Resize My Browser
  21. 21. “ 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?
  22. 22. End to End Mobile Solution Provider We build Mobile Experience
  23. 23. 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/

×