The increasing market penetration by smartphones and tablets like iPhone and iPad have forced a rethinking of website design.
Smartphones and tablets have become part of our daily lives. On our commute, during a lunch break or in a cafe, we always want to be online and be able to surf. Website resolution isn’t always a perfect fit for smartphones. This results in bigger data downloads, which can start to feel like an eternity. Responsive web design for mobile websites can help.
Responsive web design implies websites that are capable of adjusting to specific screens. It is a creative as well as technical development, whereby the website is able to adjust nearly completely to all end devices. This is primarily dependent on Media Queries, which are a concept from CSS3. The queries may include asking the width of the browser window or display resolution. This makes it possible for a mobile page to adjust to the device and ensure high speed and user friendliness.
“Form follows function” – in responsive web design, function, design and content orient themselves according to the specific display resolution and the end device being used.
In contrast to responsive web design, it is also possible to create a mobile page using a new domain or subdomain such as m.examplepage.com. The advantage here is that it is possible to use a completely new design or use functions that are available only for the mobile version. This lets you control content as you like and create or hide targeted contents, which would be found only on the desktop version. In addition, changes to the mobile page would have no effect on the desktop version. But, the other side of the same coin is that you have to think of 2 layouts, which, in worst case, don’t even share a URL. Another disadvantage is using double the space on a server.
With responsive web design, you have to worry only about one layout and the user has a similar visualization of the mobile version as the one seen on a tablet or desktop screen. And we are on to the next advantage: responsive web design operates not only the mobile view for an average smartphone. It adapts to all other mobile end devices, too. There is a risk that elements will get progressively smaller, two-column text will be separated and confuse readers. It is also difficult and time-consuming to adjust complex contents.
Tip: It’s easy to find out which sites use responsive web design. Open any website in your browser. When it is fully loaded, minimize the window to resemble the shape of a smartphone or a tablet, and you can see whether the menus and text appear different.
Those who offer a desktop and a mobile website version separately, are making their lives more difficult than they need be. Both versions require a lot of care and adjustments. For this reason, it is recommended to invest more time in designing one responsive website.Customers and visitors to the site will also be happier not having to wait for the page to load, or having to view displaced or rotated content.
The following points should be considered when deciding whether to create a responsive website or a mobile website version:
- Will the functions of both versions be the same? Which functions are most important to you?
- Should the content be the same or different (e.g. less content on the mobile version)?
- Is the page crawlbar?
- The mobile version has to have a link to the desktop version in its header, and the other way around.
- Loading times (average attention span is 1.8 sec)
- Backlinks will lead to the desktop version
The third option is Google’s AMP project. Accelerated Mobile Pages are a highly optimized method of content creation for mobile end devices.
Compared to mobile versions and responsive web design, AMP websites are capable of loading faster, even with narrow bandwidth connections. Common web browsers for mobile devices load the page using HTML rendering quickly. This is made possible thanks to streamlining the page code. Images are scaled down to the right size already on the server and contents that aren’t immediately visible on the display are loaded only when the user starts to scroll.
AMP solves the specific problem of delivering content optimized for mobile phones as quickly as possible. Accelerated Mobile Pages offer a great deal of user friendliness. However, this version isn’t simple to implement, for example because common HTML elements aren’t always supported, and it’s not recommended for everyone.
It is possible to create mobile websites using HTML5 and CSS3. This primarily involves setting up Media Queries.
The following post is a step-by-step explanation of how it is possible to design a responsively designed website:
But you can create a responsive website even without programming skills. Make your website mobile with MAGIX Web Designer! You can custom design your website and let it appear optimally on all end devices. Discover the program’s possibilities in Tutorial area and create & edit your own website with ease.