Responsive Web Design & Development

Responsive web design is all about providing the end user with the optimum experience, whether using a basic mobile phone or the latest cutting-edge tablet.

The core experience

To ensure that all users receive the same content, it is important to strip a website down to its core elements. Low-end devices receive a basic core site experience, whereas high-end devices are provided with an enhanced experience through the use of a JavaScript application that is layered on top of the basic site. Additional elements, such as drop-down menus and tabs can be implemented using plugins or CSS when the site is being viewed on larger devices.

mobile optimisation

Structure

Smart phones vary wildly in size, so it is important for a website structure to be both simple and flexible. Fluid grid systems with fixed gutters, whereby columns can contract on a small device, or expand to fit a larger screen are key to the success of responsive structure. There are two major breakpoints – 640 pixels (mobile and tablet) and 1050 pixels (tablet to desktop) – which inform the grid size used, plus many minor content breaks where needed.

Images

Although the W3C are working to develop a responsive image specification, at present there is no method for creating images that can be sized according to device. The best solution in the meantime is to add dummy images, which hold space for a real image to be inserted into the page later. These dummy images, or placeholders, calculate the width of the container being used, and grab an appropriately-sized image from the server. This saves users time spent downloading bulky images, and, if they are on pay-as-you-go or limited data plans, also saves them money.

Testing

Behaviour Driven Development (BDD) tests are essential to ensuring that a website is responsive and functioning perfectly cross platform. Some great tools for testing are

  • Phantom JS – a fake browser where testers can resize the browser window to make sure responsive components are working
  • Snappy Snaps – which allows testers to take screenshots of the site as it appears live and examine these in a sandbox
  • Remote Preview – which allows testers to drive multiple devices from one browser, so they can check the whole site looks correct on all devices

Challenges

The main challenge for responsive web design is balancing the need to make a website’s codebase future proof, whilst maintaining the need to support older browsers. The best way to try and tackle this challenge is to use specific style sheets and JavaScript for older browsers that have a smaller market share. When those smaller user bases disappear and with them those browsers become obsolete, this specific code can be discarded, leaving a clean codebase underneath procurer viagra.

The future

What’s next for the world of responsive web design? It is essential to develop a method of real-time user monitoring, which will allow developers to check how different components of a website are performing, and capture errors on devices as they occur, live. This will not only help to identify core website issues, it will determine if there is a problem with a particular device rather than the site itself, making troubleshooting much more focused.