This is how a website responds when viewed through different hardware. Responsive websites change their content when shown on smaller devices like a tablet or mobile phone. Adaptive refers to website design that is tailored to hardware functionality.
Tablet sales are expected to exceed 100 million this year. Their sales numbers may top notebooks next year. Smartphones, of course, are also in high demand – according to Nielsen. The majority of US mobile subscribers now own smartphones and in Australia over 50% of mobile users operate smartphones.
For those of us who build and develop websites, there is only a singular conclusion. There are a million new screens watching, different sizes and shapes with a variety of new features. We need to build websites for all of them.
Building apps may seem like the obvious solution. There’s no doubt that having mobile apps for the major platforms is better than having no apps at all however, you still need to build an app compatible with every device type and size.
When it comes to news sites, there’s even more data suggesting that the mobile web is key. According to the Pew Research Center, 60% of tablet users prefer reading on the mobile web rather than on an app. It’s clear that having a great mobile website should be the priority of every leading business.
The solution of course is to make a website that works equally well on every device, capable of detecting the device and responding with a specifically suitable layout. The aim here isn’t merely prettiness or technical trickery, we are seeing a major shift in the consumption habits of audiences and we need to move with them.
Technically speaking, a responsive web design uses ‘media queries’ to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. Images and content columns will shrink, then the sidebars may disappear altogether on smaller screens.
A responsive website design completely rearranges itself for a narrow layout and then again for a medium size tablet.
Some of the things that change are:
- Columns reduce and then disappear
- Menus shrink, reduce and stack
- Logos and graphics resize and disappear
- Headers and footers condense and disappear
- Navigation responds to swiping and touch
- Text reduces and images may disappear
- Layouts blocks will stack vertically
All of these changes may appear automatic however, they have all been carefully planned and coded into the website. The website detects the browser, device and size which triggers responses that make sense. Often very specific coding is required for specific effects or particular device functionality.
- V1.0 The first solution involved developing multiple websites, one for each size of device. This involved creating whole new websites that sits next to your normal website. The second or third layout is designed specifically for a smaller device like a tablet. It is automatically displayed when the device is detected. This involves building multiple websites.
- V2.0 The next level solution involves adding multiple versions of code within the one build. When someone views your website and a mobile device is detected, different images, text and menus are displayed. This involves writing multiple versions within the code.
- V3.0 Finally, pure responsive utilises any fully fluid design that revolves and realigns itself to any size. This is completely responsive to any size device. The looks is completely restructured to repeating tiles or boxes that can be rearranged simply. A fixed design is not possible. No extra costs are involved after buying a suitable theme.
There are not just two types and sized devices. There are 5″, 7″, 8″, 8.7″, 9″, 10″, 10.5″ and 11 inch tablets. Mobile phones vary from 3.2″ to 5 inch. All have different resolution screens.
One of the biggest questions in responsive designing is which devices your client like to optimise. At what point does the layout switch to the second or third website?
Testing is then imperative to be sure that all these solutions work on all devices. The website must undergo testing on mobile and tablet using Apple, Android and Windows. Website developers do not own all of these devices, instead we utilise virtual environments specifically set up for testing. This attracts extra fees and charges.