Over recent years there has been a huge shift in the way that websites are designed. The move to mobile (laptops and notebooks, as well as phones and tablets) has necessitated a change in design. Websites now tend to be more text-heavy and less modularised into columns and grids. To make matters more complicated there has also been a shift upwards in screen size (mainly in width to greater than 1024 pixels), as well as downwards to smartphone screen sizes. This has largely meant that aspects of websites (like advertising banners) are being missed out because there simply isn’t a way to integrate them in the same manner. The changes in design are intended to prevent people ever having to scroll sideways. And now there is a new answer to the problem: Responsive Website Design.
Responsive web design is the process of designing a website which will change dynamically depending upon the size of the browser in use. In theory, whether you are using a smartphone, notebook or super computer, the website should adapt perfectly for your screen. This is obviously a complicated process but the accessibility that it offers will undoubtedly allow you to attract a wider audience because potential customers will not be driven away by unsuitable websites. Here are 5 key elements involved in creating a responsive website:
1. Navigating the Page
Navigation icons should be properly positioned for each medium, instead of being scaled up to massive proportions. On a mobile device like a phone, navigation should logically be situated at the top of the screen for ease of access. On a wider screen, the navigation points will more logically be situated near the logo or in the top right of the screen as they will be easier to access.
2. Column Changes
The Boston Globe provides a great example of a website which acts responsively. It has the capability of changing to show one column or three depending on the size of the screen. More impressively, the responsive programming works when you expand a window too. The webpage will show one column if you make it small and three if it fills your page. A responsive site such as this will also amend title and image sizes to fit with the columns so that there is never a need to horizontally scroll.
3. Call to Action First
One of the major translation problems with unresponsive websites is the fact that calls to action get lost. A responsive website needs to maintain calls to action in a prominent position as this is essentially the point of the website.
4. Brand Retention
Brands depend largely upon their location within a webpage and this is often lost when changing devices. An important aspect of responsive sites is that the brand, logo and core message are maintained across all platforms.
5. Utilising Good White Space
White space can be good for preventing a cluttered feeling in a website. The amount of white space does, however, need to vary depending upon the platform in use. Managing white space is another crucial element of creating a site that looks beautiful no matter how you log in.
Unlike designing a printed item, web design has always needed to vary for different sizes. Responsive web design offers the latest and greatest means of ensuring a quality message regardless of the device used to view it.
