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 ?

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.bakerJan 12 '14 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.
– DA01Jan 13 '14 at 17:14

6 Answers
6

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.

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.

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:

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.

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?
– Graham HerrliJan 14 '14 at 22:29

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).