Responsive Web Design - Testing Process and Best Practices

1. Responsive
Web
Design“Testing Process and Best Practices"
desktop mobiles
bootstrap fluid layout CSS3 desktop
media queries
media queriesRWD tabletsresponsive

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. One site for every screen
Small / Medium / Large
RESPONSIVE
WEBDESIGN

4. ….a 4-step process
followed by

5. Responsive Web Design Frameworks
mastered by

6. is Responsive

7. Desktop Version

8. Tablet
Version

9. Phone
Version

10. Header with MENU Desktop
Tablet
Phone

11. Test a Responsive Website

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. 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. LOGO
Menu
LOGO
Menu
LOGO
Menu
Design Fluid Layout

15. TESTING TOOL
for Responsive Web Design

16. ScreenQueries
Test your website on exact pixel width and
height by changing the provided ruler

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. 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. Portrait or landscape mode
Step 5

20. ….other tools for testing Responsive Websites
Responsive.is
Screenfly
Matt Kersley’s RWD
Responsivepx
R Responsinator
Resize My Browser

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. End to End Mobile Solution Provider
We build Mobile Experience

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/