Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have to do liferay cms testing for a site / portal. The site will at setup be blank and the client can choose from templates/portlets and upload content as required. It would have a responsive html design and be optimised for IE9/ android 2.3.3 stock and v7 safari. Functional testing is on all these browsers and for IE8+.

I have never done cms testing before and have never tested on mobile phone/ipad etc. Can someone suggest which devices can be used for testing so that the testing coverage is possible for above browsers/devices and below screen resolutions ?

Testing is for minimum screen resolution.

  • desktop/tablet: 1024 x 768 landscape, 768 x 1024 portrait

  • mobile: 320 x 480

I really do appreciate any suggestions for testing approach most beneficial to avoid loopholes ?

share|improve this question
1  
Initially I simply open the web page in Chrome and resize the window. This isn't bullet proof but does reveal most issues that you'll come across. –  tim.baker Jan 12 at 16:52
    
It looks like you are narrowing your supported device range, so that will help, but do note that there's more to mobile support than the browsers. For example, devices that may have keyboard vs. touchscreens (or the ones that have both). Point being, at some point, someone in testing is going to have to test on actual devices to be accurate. –  DA01 Jan 13 at 17:14
    
Thank you so much for your reply. –  user3186569 Jan 20 at 7:43
add comment

6 Answers

I always think it's bad practice to define such a small scope of resolutions. You'll be ignoring a lot of resolutions on a lot of devices.

Trying to test all resolutions on actual devices is hard.

enter image description here

Therefor I recommend breaking the test up in two segments:

Functional testing

Test your application on different browsers in different operating systems to see if any functionality is broken on the different devices or browsers. So if you can, test it on IE, Chrome, Firefox and Safari on a windows computer and the same (without IE) on a mac(book). And if possible, test different browsers on an iPad and iPhone and on an Android tablet and phone. See if the code you used behaves the same in every browser and on every OS.

Aesthetic testing

Resize your browser to see if the design breaks while resizing. By resizing you'll cover every resolution width.
You could also use a tool like the one Designmodo has and choose different devices.

share|improve this answer
1  
    
Thank you so much –  user3186569 Jan 20 at 7:44
add comment

To really answer the question some knowledge of how the web page has been constructed is required.

A page can be built to adjust itself dependent on the resolution, OS, browser, UA etc.

There are a lot of browser plugins, software and websites available that will allow you to emulate different environments but they are not always correct and relying on any of them to test could lead to problems.

It is also worth mentioning that some devices replace commonly used html & css with their own to produce a standard display or function. This is most noticeable with menus (touch functionality is often added) but can occur to any element on a page such as fonts being replaced or resized.

The only way to fully test the display of a page on a device is to fully test the display of the page on the actual device.

This may sound like silly advice but I have been building sites for a long time and have been embarrassed by clients showing me how sites I have built are displaying on their phones (after I have tested on various emulators). Test out the emulation services that have been (or will be suggested) and then compare the results to a real world viewing on an actual device.

I would focus on developing a list of the most commonly used devices and purchasing them. Some info to help you decide which devices to target:

Recent OS data Android Screen Sizes

share|improve this answer
add comment

:Edited:

You really want to test your cms on several devices like Taylor Taff says(ex: ipad, iphone, droid phones, windows phones or tablets etc) to get an exact reference of how your site functions on individual devices - you might want to check out some mobile emulators to get a general idea of what errors/flaws you might encounter, as well. If you own a smartphone yourself, this is a good start to testing as well. Chrome has a built in emulator in its developer tools, and it seems like Firefox does as well.

If you are using media queries, you can usually resize your browser window to check the resize differences on your desktop.

share|improve this answer
    
Welcome to the site, @quesoflorecido! Generally, suggestions of individual products don't hold up very well on a Q&A site like this because the best products grow outdated over time and because there's no clear "best answer." Is there anything you might add to your answer about the methodology of testing for cross-browser compatibility? –  3nafish Jan 14 at 22:29
1  
I think my edit is a little better now? –  quesoflorecido Jan 15 at 18:41
    
Thank you soo much –  user3186569 Jan 20 at 7:44
add comment

To test various resolutions you may be interested in using Firefox's "Responsive Design View," found under "Tools > Web Developer > Responsive Design View."

To test for cross browser compatibility, check browser support for various features you plan on using at http://caniuse.com .

If necessary you can change your user agent using the Firefox plugin "user agent switcher."

Also, you may wish to use the W3C validator to make sure you are using valid W3C compliant HTML, and jslint to test the quality of your javascript code.

And of course there is no substitution for testing your website on the actual browsers/devices you aim to support.

share|improve this answer
    
Thank you sooo much for your reply. Can you please suggest what actual devices can be used ? That is what I am trying to figure out. –  user3186569 Jan 12 at 7:19
add comment

For Safari > Develop > User Agent > [and choose needed browser]

Also check SVG view for mobile devices (I know that old Nokia smartphones get this problem)

share|improve this answer
    
That doesn't change the rendering, does it? –  DanMan Jan 14 at 3:08
    
thank you so much –  user3186569 Jan 20 at 7:45
add comment

The absolute best cross-browser testing is BrowserStack.


Features:


Real Browsers

No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9 and 10 (with metro mode).

Official mobile emulators

Our official iOS, Android and Opera mobile and tablet emulators help you test across a large range of devices.

Test local and internal servers

Test your internal server or local html designs in our remote browsers through our secure local testing setup.

Pre-installed developer tools

For quick cross-browser testing and debugging.

Superfast, cloud-based access

No installation required. Our Cloud setup ensures fast access to remote browsers.

Multiple Desktop OS

Test on multiple flavors of Windows and Mac OSX Operating systems.

share|improve this answer
    
Thank you soo much –  user3186569 Jan 20 at 7:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.