If you work or follow the web news carefully, you've necessarily heard of the responsive design. It is a design technique that allows users who navigate mobile to have a user experience without addict. Let's see in more detail what responsive design is and what it consists of technically speaking.
What is responsive design?
Responsive design is the approach that suggests that web design and development must respond to the user's behavior and environmental depending on the size of the screen and the platform used. This practice consists of a mixture of flexible grids and layouts, images and intelligent use of media queries CSS. When the user goes from his laptop to his iPad, the website must automatically adapt to the resolution and size of the screen. It may also be necessary to take into account the parameters of your device; If it has a VPN on its iPad for example, the website should not block user access to the page. In other words, the website must have the technology necessary to automatically respond to user preferences. This is the responsive design!
Responsive design, technical aspects
Responsive design is based on three fundamental principles:
Fluid grid system
The elements occupy the same percentage of space, regardless of the size of the screen. This means that you choose where pixels must appear and define a layout size so that the elements are growing or reduced. It's easier if you use a grid system and a CSS generator for the basis of your design.
You must calculate the maximum width of your design element divided by the maximum width of the user browser. When you apply these percentages to the properties required in the CSS script, you get a unique design that grows or is reduced depending on the size of the user screen.
Use of fluid images
Unlike the text, the images are not naturally fluid. This means that they have, by default, the same size and the same configuration from one screen to another. An obvious risk is that your design appears incoherent from one device to another, because the images may not adjust, and therefore appear out of proportion compared to other elements. You must therefore apply a CSS-: IMG {Max-Width: 100%;} command to make sure that an image shrinks for smaller screens. If you decide to include several images, you should use another CSS command.
Media queries
Thanks to these filters, you can determine the size of the screen on which a user visualizes your design. These filters modify the presentation of the site to meet certain conditions. You also include them through CSS. The most frequently used are:
- The minimum width,
- The maximum width,
- The minimum height
- and the maximum height.
Thus, depending on the width, the height, the orientation, etc. From a screen, you can precisely specify how your design will appear so that the different users can see it.
Minimalism counts
Imagine you try to keep the same amount of business in suitcases of different sizes: the less business you have, the easier it will be. Conviviality (and performance) is one of the reasons why minimalist interfaces are so popular today.
Prioritize and hide the content appropriately
The size of the desktop screens offers a room for maneuver that smartphones screens do not offer. Take advantage of hidden commands such as navigation drawers. To reduce the number of elements that require restructuring, try gradual disclosure.
Large clickable area for buttons
The Fitts law stipulates that the larger the clickable zone of a button, the easier the user can interact with it.
You can very quickly check if your site complies with responsive design standards. For this (example with Google Chrome):
- Open your browser,
- Go to the website you want to check,
- Press CTRL + Shift + I To open the Google Chrome console,
- Press CTRL + Shift + M to display your site differently,
- You can now see it as a user would see it on mobile, tablet or desktop.
You can also use a free tool, such as Google's mobile optimization test, to check if your website pages are compatible with mobile phones. If other design approaches, such as adaptive design, make it possible to reach mobile conviviality, responsive design is the most common because of its advantages.
What determines the cost of design and development of responsive websites?
Many factors determine the cost of designing and developing a responsive website. One of the determining factors is whether you choose to call on an agency or an independent. The other is the content you want to add to your new website.
The cost of designing a website varies depending on the person you engage to create your design.
Do you want to hire a freelance for the design of your website? Do you prefer to call on an agency? Would you like to build your site yourself using a manufacturer like WordPress?
At Churchill, we believe that it is in your interest to initiate an agency specializing in responsive website design. For what ?
- They have the necessary expertise : When you use a professional agency, you can be sure that your site will be designed and developed thanks to specialized skills and great precision.
- They save you time : When you call on an agency specializing in website design rather than a self -employed worker, a whole team is available to work on your project, which allows you to save long -term time. In addition, the construction of your own site on a platform like WordPress can take much more time than if you entrust your project to an agency.
- They personalize your site on their fingertips : If you are wondering if you need to use a website creation agency or use a CMS to build your site yourself, you will get a more personalized result by using an agency. Personalization options are limited on platforms like WordPress, but an agency can personalize each item of your site as you wish.
Although the use of an agency is often the most expensive option, you will make the best investment for your business since you will save time and have a personalized site. And, as everyone knows, time is money.
