Let's go responsive!
The responsive theme allows people to access the same website using a host of different devices such as ipads, tablets, iPhones and many other smartphones.
The great thing about responsive is that people don't need to zoom in and out, scroll left to right, top to bottom and so on to view content. The website design means that the layout is adaptable to whatever device you are using, therefore making the change a fluid experience. After all, this is the main purpose of the responsive theme; to make the user experience as easy and smooth as possible.
How do I do this I hear you say? Well, the website is built with proportional grids, flexible images, and CSS3 media queries. The main CSS file is used for the general style of the website, and an extra CSS file will be created using the @media rule. This rule affects the layout of the website depending on the device.
There are two options when building; either you can use a framework or you can create your own responsive templates from scratch. The advantage of using the framework is that it is a great time saver, as most of the modules are already created so all you need to do is design and implement the website style. However, if you were to start from scratch and create your own style you are going to have a much deeper understanding of the responsive theme that will benefit you on future projects, as it allows you to be much more precise in terms of design.
The mobile size is our starting point. We start from the smallest screen and the mandatory functions that the website requires, such as the main menu and links, the search, the main content, etc. The design is then adopted, as the screen is designed for gets bigger, in order to add more options or functionalities. It is helpful at this stage to use the right mark-ups and classes.
The use of a grid template will help to design the website and provide a visual and structural balance based on columns that represent the different sizes of the devices being used.
Fluid Grids layout:
Navigation is the main attention point of a web page, therefore, this will also need to be adapted to each device being designed for. In addition, the majority of the time, the menu design needs to be adapted to the device. The same principle is applied to the footer.
There are so many benefits to a responsive website it is hard to know how we functioned without them. To name just a few:
- They are accessible from any device.
- The quality of the design is no longer compromised.
- It is a highly effective way to reach mobile and tablet users
- It saves time and cost in mobile development and website management
- It has improved online sales dramatically as customers can use the mobile site on their mobile device in- shop. Research by LivePerson has shown that in the UK 22% of shoppers use the mobile site of a retailer whilst in the store making this is a particularly important point.
- It is SEO friendly, therefore maintaining the ranking and backlinks of the website.
- We just think it’s really cool to be able to adapt your website to different sizes without any extra loading time!