As a new breed of phones and tablets with screen resolutions higher than some PCs grows ever-bigger, we ask what this means for web developers and their designs.
From desktops to netbooks, mobiles and tablets, the variety of media from which we can browse the web is ever-expanding, along with the number of screen sizes and resolutions. This presents quite a headache for web developers who find themselves having to be increasingly adaptive when it comes to new tech trends. The launch of Samsung’s Galaxy Note 3, a mobile phone with a screen resolution of 1920 x 1080, is illustrative of the challenges faced by developers who want their designs to provide the best, most crisp user experience.
Consumers have come to expect the same online experience no matter what device they are using to browse the web. Websites that haven’t been optimised for use on certain screen sizes, operating systems or interactions present problems such as slow page load speeds, unusable functionality and grainy images.
For businesses, this often means the potential customer going elsewhere to look at a better performing site. Responsive web design (RWD) is one way that developers can optimise the users’ experience, and more firms are being urged to make use of it. Essentially, RWD means that sites can change shape and size according to the device being used. It is essential that designs have the ability to anticipate and respond to user need, providing quality and the same level of user experience no matter what the size of the display.
There are many areas that designers have to consider. Images present problems if the resolution on the screen of the device is particularly high, as with the Samsung Galaxy Note 3, so they need to be adaptive. Images that might have looked sharp and clear elsewhere will look pixelated on a device like this. Pictures also need to be appropriate to the size of the screen – it wouldn’t work to have users downloading large file size images designed for desktop computers on a smartphone device!
Flexible imagery automatically adjusts images when they’re loaded to suit the type of device on which they are being viewed. Web developers can exploit the flexibility of CSS 3 when coding responsive web designs. Clearly, there is a lot to think about.
Mike Swift, director of Manchester Creative, summarised the issue encountered by developers, commenting: “I think it’s safe to say that as the smartphone explosion creates a multitude of opportunities for all businesses and manufacturers, it also creates a multitude of dilemmas.
“Pace of change is an issue; what was an ultimate solution six months ago could well be out of date today.”
Swift also pointed out that challenges created by the development of devices such as the Samsung Galaxy Note 3 are as much a commercial decision as they are a design one. “Developers can produce as many versions of the site as are needed and device recognition code can pick up models and serve the appropriate code. Anything is possible but nothing is free!
“Companies have to ask themselves, ‘Is it worth it commercially to rework our product site so that this new resolution of smartphone gets a version that’s optimised to their requirements and not just the generic smartphone version?’ When they were all fairly standard, around 960 res, you could have a fairly acceptable solution across the board but this new resolution adds another level of complexity. It all comes down to interrogating your user base and finding out what kinds of devices your site is being accessed from.”