Prioritizing Devices: Testing And Responsive Web Design

Prioritizing Devices: Testing And Responsive Web Design

• By Tom Maslen


• July 14th, 2014


• DevicesResponsive Web DesignTesting


• 0 Comments

My Android Galaxy smartphone is so sweet. It plays games, has a poetic shade and lets me check all of my favourite websites while I’m travelling to and from work. And my new iPad is even better; it’s all we use during home when I’m relaxing in a vital room, cooking in a kitchen or toileting on a toilet. As a consumer of electronic gadgets, I’m happier than Angelina Jolie in an institution with all of a inclination with that we can use to entrance a Internet.

As a developer, we hatred it.

Have we seen how many browsers and inclination we have to exam now? we remember when Internet Explorer (IE) 8 came out and we were angry that we had to start contrast 6 browsers. Now, we’re contrast during slightest 15! Back then, when any home had broadband and before anyone had a smartphone, we were vital in a Golden Age of web development. We never knew how easy a jobs were.

Because of all a things we have to support now, testing has turn really, really, unequivocally formidable and also super-expensive. But suppose carrying to support and exam all of these browser and device combinations while also responding to a news. When we work in a bustling sourroundings like a BBC News, where many of what we make is pegged to a news story or violation eventuality and all is done regulating manageable web design, a pursuit becomes unequivocally wily and spasmodic unequivocally stressful.

In a Golden Age of web development, we had to support usually 5 desktop browsers on a broadband connection.

Unfortunately, we can never pierce a deadlines that news events benefaction to us. We can’t strike a UK supervision and ask them to postpone an selecting by a few some-more days while we get a new manageable timeline carousel operative in IE 8. And during a flooding in a UK progressing this year, we couldn’t strike God to ask him to postponement a complicated sleet prolonged adequate for my organisation to get a interactive flooding map operative in Android 2.3.

Before manageable web design, we had to exam 5 web browsers on a desktop computer. Now with manageable web design, we have during slightest 15 browsers operative on a innumerable of different-sized devices, with many opposite submit types, mixed pixel resolutions and hugely varying tie speeds.

Your trainer competence have once commanded your contrast plan as such: “This website has to work ideally in all of a browsers on this list.” If we attempted to lift out that plan with a immeasurable series of browser and device combinations that now revisit your website, we would quick spend a happening and get sucked into a contrast black hole.

There contingency be a improved approach to bargain with a problem that manageable pattern has combined for testing. So, let’s step behind from this contrast singleness for a impulse and cruise about a problem.

In this article, we’ll digest a contrast plan so that we don’t have to exam any device any time we wish to refurbish a live website. I’ll pull on my knowledge as a developer operative on a BBC News’ website.

Devising A New Testing Strategy

With total time, income and tellurian resources, you’d be means to exam your whole website on any device, any day of a week. In a genuine world, even vast organizations like a BBC don’t have a resources to try this ideal solution.

Nevertheless, as developers, we’d pattern JavaScript that works in Chrome to substantially work in Safari or Firefox, too. We’d also be assured that a infancy of a CSS would describe correctly. However, we’d be reduction certain that a manageable blueprint would work ideally on mixed devices. And when we exam a blueprint on an aged Nokia device, we’d be some-more shaken than a startup owner about to accommodate a try capitalist.

We can take advantage of similarities between browsers and devices. If some formula works on a Samsung Galaxy S4 regulating Chrome, afterwards it substantially also works on an Android inscription or iPhone 5S. If IE 9 throws no JavaScript errors, afterwards we’d be means to exam IE 10 and 11 with many some-more confidence. But some browsers are so aged and disagreeable and graphic anything else we have to bargain with — yes, IE 8, I’m looking during we — that we should always exam on them.

IE 8 is throwing some-more errors on this page than Miley Cyrus manages to twerk in a concert.

While we should try to support as vast a suit of your assembly as possible, your analytics will uncover that a tiny organisation of browsers and inclination make adult a infancy of your traffic, while a rest are a prolonged tail of problematic browsers and devices. Take advantage of this.

By prioritizing that inclination and browsers we exam first, we can maximize your contrast time. Don’t cruise of contrast as a singular task; break it adult into groups of browsers according to how critical they are to you. You could — brave we contend — take shortcuts. Do 50% of your browser contrast and afterwards release, meaningful that a infancy of your users won’t see bugs, and afterwards exam and repair a prolonged tail.

This new plan could be carried out in opposite ways:

• Making a vital new chronicle of your website? Test all browser groups.


• Making a teenager change that needs to be expelled unequivocally quickly? Test your primary and delegate browser groups, release, and afterwards exam a rest and recover again if need be.

In a industry, regulating a shred of tests is called “smoke testing.” Smoke contrast is a discerning routine that gives we certainty that we haven’t damaged anything elemental in your product. By infrequently selecting to exam usually your primary organisation of browsers, you’re effectively fume contrast for certain browser and device combinations.

Every Website Is Different

Before we benefaction a tip of this essay to your trainer and start contrast usually iPhones, cruise that any website is different. Websites have opposite objectives and audiences and, thus, will be visited by opposite browser and device combinations.

With any new strategy, initial cruise a assembly of your product:

• Age and class
  
  Young people and reduction abundant people are some-more expected to use non-desktop devices. As a developer who’s been in a attention for 15 years, we onslaught to accept that my desktop-centric mental indication of a web is now in a minority.


• Global distribution
  
  Different form factors are renouned in opposite regions of a world. High-end smartphones are many renouned in a West. “Phablets” (i.e. unequivocally vast phones) are renouned in a East since a incomparable shade distance creates it easier to form content messages with Eastern impression sets. Phones with prolonged battery life are renouned in farming India and Africa.


• Engagement time
  
  In a UK, desktop browsers now make adult reduction than 50% of a customary website’s traffic. This series drops dramatically on a weekend and rises dramatically during workday lunchtime (especially for bequest versions of IE commissioned in offices).

Testing All The Things

¹

Setting adult this print caused a remarkable spike in trade from aged Nokia inclination to a website.

The indicate of organisation is to get a many out of contrast as few inclination as possible. So, for your initial group, exam as many opposite properties as possible. we call this a “test matrix”:

• Screen size
  
  Designing responsively means being dubious to device type. So, get a good thought of how your website works on a far-reaching operation of shade sizes.


• Connection speed
  
  Treat tie speed a same way. Unfortunately, there is no association between shade distance and tie speed. While a given device competence be means to bond to Wi-Fi as good as to several mobile tie forms that offer opposite Internet speeds, mobile inclination generally extent a series of indicate downloads to two. This means that even when an iPhone has a Wi-Fi connection, it still won’t be as quick as a MacBook. You’ll have to comment for this.


• Pixel density
  
  Pixel firmness refers to a series of pixels that make adult a screen. The aloft a pixel density, a clearer a pattern on a shade will be. Differences in pixel firmness can means issues that are pointed and tough to debug. The biggest emanate I’ve come opposite is browsers that calculate subpixel values differently (which happens when widths are tangible with a floating indicate percentage, such as 33.3%), so violation a layout.


• Interaction style
  
  Make certain to cover not usually mouse-and-keyboard communication and hold interaction, yet also D-pad styles of interaction, that happens with a arrow keys on a phone keyboard or a “nipple” on a BlackBerry (honestly, it’s called a “nipple” — ask your silent if we don’t trust me). However, don’t prioritize D-pad communication unless Nokia and BlackBerry phones make adult a poignant share of your traffic.


• Similarity to other browsers
  
  If browser A is unequivocally identical to browser B, and browser A passes your test, afterwards browser B has a reduce possibility of causing critical problems than other browsers. So, we can reduce a priority of browser B and pattern to bargain with usually teenager blueprint issues after on. If browser C has a smaller user bottom than browser B yet is many comparison and has some-more differences, afterwards we should substantially exam browser C progressing in a growth cycle to locate issues that are harder to solve than teenager blueprint bugs.


• Browser digest mode
  
  Browsers have dual ways of digest a page:
  
  • the customary client-side digest that we are all used to,
  
  
  • proxy rendering.
  
  

A substitute browser sends a requested URL to a server, that downloads and renders a page before portion an picture of a page to a user. A substitute browser renders many faster than a customary web browser and so is renouned among users who are supportive about their information plans, yet they come during a cost.

Because a user is looking during a screenshot of a web page, a pattern competence not work utterly as intended. While substitute browsers competence sound like a niche box and not value prioritizing, note that Nokia’s Ovi browser, Opera Mini and a Chrome mobile browser possibly are substitute browsers or have substitute digest modes.

Understand Your Testing Options

We have utterly a few options for contrast in a attention now: emulators, practical machines, contrast services like BrowserStack² and grassroots village efforts like Open Device Lab¹⁶⁸³. While contrast services are good during display what your website looks like, they will never be as good as contrast your formula on tangible devices. Emulators and contrast services are some-more fit than shopping and progressing your possess device lab, and they unequivocally assistance we to know how your formula behaves on opposite platforms, yet they don’t tell we all we need to know about a UX.

Are loading times quick enough? Are a strike sizes vast enough? Will a user’s palm get in a approach of a shade and keep them from saying a change? Does a time between dire a shade and a ensuing change feel adequate?

⁴

BrowserStack is good for saying how your website renders opposite many devices, yet it doesn’t give we any haptic feedback.

Testing services are good for anticipating judicious issues with your formula — JavaScript errors, timeouts, etc. — yet a coverage is usually as good as a exam that we run. The services humour from a certain bias, in that they are good for reporting that things works. They won’t tell we either something feels wrong or looks strange. we always advise eyeballs for testing; unfortunately, this doesn’t scale to vast products, generally if we miss dedicated testers.

You need to make a visualisation call, balancing a volume of contrast compulsory with a contrast resources available. Can we separate adult programmed and primer testing, focusing a latter on new features? Are we ceaselessly contrast something that never changes? If we exam frequently, could we exam a suit of any partial of a product or incidentally select facilities to test?

Group Devices By Priority

Now that we’ve gotten a speculation out of a way, let’s demeanour during an instance in practice. The device groups tangible next are specific to a statistics for a BBC News, so adjust a list to your website according to a recommendation in a territory above “Every Website Is Different.”

Group 1

Group 1 is radically a Chrome, Safari and Android browsers on opposite inclination and a desktop (“desktop” here clarification both Mac and Windows). Group 1 generally covers usually over 50% of an assembly for a customary website and is a comprehensive smallest volume of contrast we would suggest before any kind of release.

I strongly suggest that we squeeze a following devices:

This could simply cost we a best partial of $2,500. we am unequivocally contemptible about this, yet I’m guessing that since we review Smashing Magazine, you’re a technologist, so we substantially already have one of these inclination in your pocket.

Android inclination are many cheaper than iOS inclination anyway, so spending some of your bill on dual Android inclination is worthwhile. These 4 inclination and Chrome on a desktop should be your primary contrast group. Chrome is a many renouned desktop browser — fortunately, too, since many developers cite to work in it.

You’ll need to exam both Chrome and Android’s default browser on a Samsung Galaxy device regulating Android 4.*. All top-end Android inclination (made by HTC, Sony and Motorola) solely for Samsung now boat by default with Chrome. Only Samsung uses a somewhat mutated chronicle of a browser that ships with a Android Open Source Initiative — that browser is a season of WebKit.

Recommended buys:

• Buy an iPad and an iPhone. Make certain they have opposite versions of iOS so that we can exam Safari 5 and 6 in opposite resolutions.


• Buy a top-end Samsung Galaxy Android 4.* device and a inexpensive Android 2.3 device. This will give we an thought of how your formula runs on Android inclination with opposite forms of processors and memory sizes.

Cheaper alternative:

• Download Apple’s Xcode IDE and use a iPhone practical machine. This will give we entrance to all versions of iOS on all devices, yet afterwards you’d have to buy a Mac, so that would still cost we a best partial of $2,500 anyway.


• Download a Android IDE (Java, yuck) and use a Android practical machine. This isn’t rarely recommended, though, since we wouldn’t be means to see your website in movement on low-end hardware.

Group 2

The good news about organisation 2 is that there are no inclination to buy (if we rise on a Mac). The bad news is that it requires downloading a lot of practical machines. Group 2 consists mostly of desktop browsers:

Note: Depending on a chronicle of OS X your MacBook is running, we will many expected have Safari 6 or 7. Mavericks is a latest and many renouned chronicle of OS X, so prioritizing Safari 7 is recommended.

IE 11 and 8 can be tested regulating practical machines downloaded from modern.IE⁹⁵. Windows Phone Emulator⁶ can be downloaded from Microsoft. Notice that I’ve not mentioned IE 9 or 10. You can exam those browsers with practical machines, too, yet a infancy of those users would have upgraded to IE 11 by now, so their priority is lower.

IE 8 is a special box since there is no ascent trail for users stranded on Windows Vista or Windows XP, and, being so old, it will be a browser that gives we a many problems. The BBC News’ statistics uncover roughly no IE 8 users on weekends or on weekday mornings or evenings, yet we get a remarkable spike of IE 8 activity during workday lunchtimes. This indicates that people now mostly use IE 8 when they are on their lunch mangle during work.

Recommended buys:

• If your growth appurtenance is a Mac, afterwards really embody Safari 6 in this group. If not, afterwards depending on a distance of your audience, we competence wish to cruise about removing a Mac. Spending $2,500 for one device is expensive, and your bill would be improved spent on other devices, so this is endorsed usually if we have a vast bill for devices.

Cheaper alternative:

• If your growth organisation is PC-centric, afterwards we could demeanour to BrowserStack to exam Safari 6. BrowserStack can be used instead of all of these practical machines, too, and competence be preferable if your appurtenance is old. Virtual machines need during slightest 1 GB of memory to themselves to run smoothly. I’d suggest a smallest of 8 GB to run practical machines since you’ll wish a integrate of them adult during a same time.

Expensive alternative:

• Buy a Nokia Windows Phone. Devices are always some-more preferable than emulators.

Group 3

A third organisation consisting of Opera Mini and Nokia’s Ovi browser is also value considering. These are “proxy browsers” that act differently than customary browsers (see above for a outline of how they work):

Download and exam Opera Mini on your iOS 7 device. If we have an general audience, afterwards a Nokia Ovi device is a imperative purchase; we have a Nokia C5 in a device drawer. While Nokia bill phones are not insanely renouned in a UK or US, they are some-more renouned in markets that value low prices, battery life and robustness (dropped your iPhone recently?). If we have a tellurian audience, afterwards really allot partial of your bill to a Nokia Ovi.

A few years ago, there was a transparent eminence between a new operation of smartphones that were appearing on a marketplace and normal “feature” phones. Unfortunately today, that eminence is not transparent during all. The clarification of a smartphone used to be that it supports Wi-Fi, has a complicated browser, has a touchscreen and supports apps. The Nokia C5 has all of these features. Every phone is a smartphone now.

The vast disproportion between a tip and bottom ranges of phones is hardware capability. Manufacturers compute and contest by varying a volume of estimate energy and RAM accessible in any phone. This means that, while a disproportion in browser (read “software”) capabilities between, say, an HTC One and a Sony Experia Typo is nil, a disproportion in ability to routine your website and in greeting times to user submit (read “hardware”) is huge. You can’t detect a device’s estimate energy or memory, so bargain how your website works with singular hardware is important.

Recommended buys:

• Nokia Ovi phone

Group 4

Group 4 is a prolonged tail of browser support. The prior 3 groups had graphic characteristics (popularity, desktop, substitute rendering). Group 4’s evil is randomness! This is where your contrast gets some-more sundry and where a value of spending time on edge-case bugs decreases.

• Firefox desktop chronicle 4 is a final chronicle of Firefox that doesn’t auto-update; it’s a usually aged chronicle of Firefox still trending in a statistics. It’s vast adequate for we to cruise testing; fortunately, though, notwithstanding a age, it’s still a decent browser, so unless we are regulating modernized CSS3 features, we shouldn’t find many problems.


• Firefox Mobile and Opera Mobile are glorious complicated web browsers. They are a low priority since they describe pages so good that we can pattern your website to work in them with usually teenager blueprint issues by a time we make it down to a fourth organisation of browsers.


• IE 9 and 10 are quick disintegrating from a statistics. We cruise they will be totally left by a finish of a year. Check your possess statistics before determining either to support them.


• BlackBerry inclination are still value testing. From OS 6, BlackBerry’s default browser has indeed been unequivocally complicated and feature-rich. The disproportion between this and other devices, though, is a form. Many BlackBerry owners use a trackball (D-pad) to pierce a cursor around a tiny landscape-oriented screen. This shade creates a hoax of people who pattern for a “fold,” since a overlay on these inclination is 200 pixels tall.


• Safari 6 is a chronicle of Safari that comes with Apple OS 10.7. While 10.7 isn’t a latest chronicle of Apple’s handling system, it’s still comparatively popular. Safari 6 is unequivocally identical to Safari 7, so it’s not value a vast investment compulsory for an additional desktop machine.

Recommended buys:

• As always, we suggest shopping a inclination if your bill allows. Buy a BlackBerry 10 and a BlackBerry Bold regulating OS 6. BlackBerry Bold should still be accessible on eBay, while a BlackBerry Z10 (running BlackBerry OS 10) should be accessible in many stores.

Cheaper alternative:

• Test Safari 6 regulating BrowserStack. It’s still accessible to exam around Mac OS X Lion.


• Test Safari 5 regulating BrowserStack. It’s still accessible to exam around Mac OS X Snow Leopard.


• Unfortunately, BrowserStack doesn’t have BlackBerry inclination to test; however, we can download and run simulators from BlackBerry’s website⁷. You can run a Playbook simulator as a practical appurtenance on a PC or Mac, yet a Playbook was never popular, so a simulator isn’t unequivocally useful. The phone emulators are many some-more useful; we can download accurate indication and OS versions, yet they usually work on a PC, so we will need a second appurtenance if we are a Mac user.


• An Open Device Lab¹⁶⁸³ is an even cheaper choice to BrowserStack, yet a inclination accessible to we will count on what is accessible in a lab in your area. You will also need to comment for a cost and preference of removing to a device lab.

Expensive alternative:

• Buy a Mac regulating 10.7 to exam Safari 6. This competence be a best choice if your growth appurtenance is a PC.


• Buy a Mac regulating 10.6.8 to exam Safari 5 — yet usually if we are severely loaded!

Conclusion

Testing (or, to use a correct term, peculiarity assurance) is a contention unto a own. As designers, we shouldn’t try to facilitate a contrast process; rather, we should know a opposite contrast strategies good adequate to solve a hurdles we now face in perplexing to support browsers.

Although a blast of inclination that started with a iPhone has dramatically increasing a series of browsers we have to support, remember that a vast suit of your assembly use usually a handful of devices. The rest of your assembly consumes a web around a massively different prolonged tail of devices. Test your product on as many inclination as possible, yet also prioritize that inclination to exam in sequence to maximize your time.

Test hard, yet exam smart. Nobody can exam all all a time.

Further Reading

• modern.IE⁹⁵, Microsoft


• Windows Phone Emulator for Windows Phone 8¹⁰, Windows Phone Dev Center


• Android Emulator¹¹, Android Developers


• Xcode¹², Apple


• BlackBerry simulators¹³, BlackBerry


• VirtualBox¹⁴


• “Browsers and Mobile Devices for Live Testing¹⁵,” BrowserStack


• Open Device Lab¹⁶⁸³


• Data Compression Proxy¹⁷, Google Chrome


• “Opera Mini and JavaScript¹⁸ (proxy browsing), Dev.Opera

(al, ml)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-many-devices-opt.jpg


2. 2 http://www.browserstack.com/


3. 3 http://opendevicelab.com


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-browser-stack-opt.jpg


5. 5 http://modern.ie


6. 6 http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx


7. 7 http://uk.blackberry.com/sites/developers/resources/simulators.html


8. 8 http://opendevicelab.com


9. 9 http://modern.ie


10. 10 http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx


11. 11 http://developer.android.com/tools/help/emulator.html


12. 12 https://developer.apple.com/xcode/downloads/


13. 13 http://uk.blackberry.com/sites/developers/resources/simulators.html


14. 14 https://www.virtualbox.org/


15. 15 http://www.browserstack.com/list-of-browsers-and-platforms?product=live


16. 16 http://opendevicelab.com


17. 17 https://developer.chrome.com/multidevice/data-compression


18. 18 http://dev.opera.com/articles/opera-mini-and-javascript/

↑ Back to topShare on Twitter

Prioritizing Devices: Testing And Responsive Web Design