Responsive Web Design Testing

Tools you need to know …..
Over the last 5 years, Use of mobile devices continued to rise all across the world, now it became a
challenge to deliver for those devices on web. The best way to design a website is Responsive Web
Design instead of designing multiple versions of mobile webpages as a standard way.
Who Created Responsive Design?
than !arcotte is the creator of Responsive Web Design.
The only problem is testing the responsive websites on multiple devices or operating
systems.
Ta"e an e#ample of $lways %reative which is built using responsive web design.
Emulate Mobile Devices on Chrome Browser:
&revious 'ersions of %hrome(
Open the website on %hrome des"top browser and &ress )*+ Dev
Tools ,- .ettings ,- Overrides ,-
1. nable
2. nable on DevTools .tartup
3. User$gent
4. Override Device orientation
5. mulate Touch &oints
6. Device !etrics
7. )it in window
New Version o Chrome:
Open the website on %hrome des"top browser and &ress )*+ This
shows Developer Tools ,- .elect /.ettings0
.elect /Overrides0 ,- nable , .how 1mulation2 'iew in %onsole Driver. Then close the window.
.elect lements in the developer tools. &ress .% 3utton, 4t opens /%onsole Drawer0
%onsole Drawer shows( /%onsole 5 .earch 5 mulation0 6. .elect /mulation0 tab.
This mulation tab helps to emulate and test the mobile website using devices.
To choose a device to emulate, select the Device from the dropdown list.
$nd clic" /mulate0 5 Then the screen si7e refresh to a scaled si7ed.
The screen display settings can be changed using /.creen0 Options.
.elect .ensors 5 nable Touch .creen, this shows how the mouse cursors appears on the mobile.
.elect mulate geo,location coordinates to %hange the latitude and 8ongitude
http://itouchmap.com/latlong.htm l
To stop the emulation, %lic" the Device and select the Reset 3utton.
9ote( %hrome mulation is easy to do on a des"top for a very :uic" chec" on the site.
4t is always a better to replicate the issues on physical devices, found on the emulator,$lthough
it2s impossible to purchase all the &hysical devices.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulatio n
Then slowly ma"e resi7e the browser. $s you resi7e, the ob;ects on the browser will start dynamically
resi7e and change the order they appear on the site. This gives a rich e#perience to the viewers.
Remote !review
Remote preview allows testers to drive multiple devices from one browser, how whole site appears
in all devices.
"elpul Remote !review tools or Responsive Web Design #esting
1. Responsinator ,, This is a simple tool for viewing a web page in most popular screen si7es
all at once. This allows you to rapidly test your responsive design. <ust go
to responsinator.com and enter the UR8 of the responsive website to test in the upper left
corner. 9ow, the site will load on a variety of pseudo,devices that you can browse
individually on one screen.
2. !att "ersley Responsive 5 This is a simple and popular tool. 4t allows you to test your
website on entering the UR8 and shows results according to 5 different standard widths
or device si7es.
=. .creenfly ,, This is easy way to test the website by entering the UR8 of the website and
show results on any screen si7e including des"tops, tablets, televisions, and mobile phones.
4. Dimensions app ,, This app can allow testing website both locally and preview on
various mobile devices on remote servers. This offers measuring scale to see the
difference on different screen widths by dragging the handle.
5. Responsive.net 5 This is easy way to test the website by entering the test UR8 and chec"
the responsive web layouts on different devices and resolution si7es.
6. .creen >ueries ,, This is a beta version for testing the website across ?@A device
viewports using pi#el perfect media :uery debugging tool. This can ma"e the
differences even by pi#els.
7. Design !odo ,, This tool helps to test the responsive web site on e#tensive set of screen
si7es and devices by ;ust typing the website UR8 and selecting the device or customi7ing
the screen si7e and also on rotation.
8. %ybercrab 5 This .creen%hec" tool helps to test the responsive website on an e#clusive set
of screen si7es by entering the test website UR8 and selecting the devices or custom pi#els.
$dditionally, it can also chec" the BT!8 errors on the page using W=% 'alidator.
9. !4T 5 Ceynote 5 !4T "nown as !obile 4nteractive Testing nvironment, provides :uic" test
and validation of mobile content with over +,+@@ emulated devices right away from your des"top.
10. There are many simulatorsDemulators( ios .imulator , Opera !ini .imulator , Oper a !obile
mulato r
11. Responsive Test 5 Open .ource Tool lets to see how web page renders on 'arious .creen .i7es
12. Responsive Tools 5 Bandy Tool to switch between different devices
13. Am I Responsive 5 Responsive Tool
14. View Port Resizer 5 Responsive Design 3oo"mar"let
15. Resize ! "rowser , Resi7e 3rowser 3oo"mar"let
16. Pi#el T$rner 5 $ handy tool for Responsive Web Testing
17. ResponsiveP# 5 Responsive Website Tool
18. PiResponsive 5 Responsive Website Testing Tool
Behavior Driven Development $BDD%
The behavior driven development tests such as &hantom <., acts as a fa"e browser where
testers can resi7e the browser window to ma"e sure responsive components are placed
correctly and wor"ing.
#a&e awa'(
%rucial aspects of a web e#perience simply can2t reali7e by resi7ing your browser or using
emulators( 4t also includes true site performance, device capabilities, form factor, pi#el density
and the impact of the networ".
Top Des"top and !obile browsers as .tats( http(DDgs.statcounter.comDEdes"topAmobile,browser,
ww,monthly,+@*+*+,+@*=* *
9et !ar"et .hare 5 Real time !obile D Tablet Operating .ystem(
http(DDwww.netmar"etshare.comDoperating,system,mar"et ,
share.asp#F:pridGHI:pcustombG *

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.