GiudittaHow many times have you used a website in its mobile version, and found it impossible to navigate? Responsive websites have been talked about since at least 2010, but if we analyze a random sample of 100 brands, even famous ones, we will not always find responsive websites.
Yet, so-called responsiveness is the number one factor in determining a good user experience on a page, and therefore your advantage over your competitors.
The Psychology of Responsive Web
Have you ever noticed that in many shopping streets in the largest Italian cities the doors are automatic, or do they remain open?
This happens even in the middle of winter, or in summer, when the heating/air conditioning is on. Why this incredible energy expenditure?
Simply because users see an open door, products on display, and marketing psychology studies say that this encourages them to enter.
Creating a welcoming environment on a site is key to the concept of web responsiveness.
Responsive website: meaning
The main problem is that there is not always an understanding of what web responsive means. A responsive website does not only have scalable drop-down menus and fast page loading, contrary to what many believe.
To understand what web responsive means and apply the basic rules of the discipline to your site, you need to start with the basics. Fortunately, there are some rules of responsive web design that are always valid - even if a little vintage - that are clear even to those who do not deal with web design and would simply like to understand more.
As in every technical discipline that intersects with marketing and art, even in web design there are many schools of thought on what is the true meaning of design responsive web.
In the advice we will give here, we base ourselves on the simple assumption that “responsive design” (official translation) is anything that allows the web page to adapt to the user's navigation needs.
What is a responsive website like?
In a truly responsive site, the user will have the same experience of the site from their phone, from a web browser and from a tablet. Even if they use zoom, they will always see the important elements of the page, and can easily navigate from one section to another.
You'll find the menus and sidebars convenient to navigate, and you won't get annoyed by images that get distorted or disappear.
How do you get this effect? Is it enough to choose the right WordPress theme? What if you are creating a site from scratch with a web designer?
It's time to clarify: let's see 3 fundamental rules for obtaining a responsive website, which are valid whether you have structured web design skills or if you use a CMS that reduces web design to the bare minimum.
The 3 rules for creating a responsive website
1) Take care of media queries CSS
The CSS Media Query generally looks like this:
@media media-type and (media-feature-rule) {
/* qui si inseriscono le regole*/
}Essentially, a media query allows you to apply CSS only when the user's device has specific rules. For example, when the device in your customer's hand limits the screen size, such as a smartphone.
Benefits of Correct Media Queries
Media queries are a fundamental part of building responsive websites. When we design any platform, ideally we should address to contact us to all types of devices, so every object on the site must integrate correctly and quickly with the end user's device.
Media queries, when set up correctly and with the right breakpoints, enable a smooth, fast, and scalable user experience.
2) Create Fluid Grids
Mobile devices are becoming smaller and smaller, and vice versa, PC screens are becoming larger, increasing their average resolution.
For those who work in web design, it becomes very important to design interfaces that adapt well to both, without sacrificing anything.
To understand what grids are – we explain it for non-experts – it is useful to imagine actual horizontal and vertical lines that web designers “fill” with information.
The grid is either built from scratch or available in a pre-built framework. It can be ready-made and save a lot of work, because you only have to "fill" it with content, like on Wix, for example.
Or, you can structure them from scratch, with much better results in terms of web responsiveness.
Advantages of Fluid Grids
Making your own grids allows you to:
- Save much more time in the future for any changes;
- Have a screen layout that instantly scrolls and adapts to the end user's screen and zoom;
- For branding reasons: the web designer maintains an image, a logo, a motif consistently within different grids;
- Save time when updating sites and migrating domains.
How to get fluid grids
- Using an existing CSS grid;
- Generate a grid as a basis for designing your layout. You can use programs like Tiny fluid grid o Fluid Grid by Bootstrap.
3) Have smooth images
Last aspect for the creation of responsive websites, often overlooked but extremely important: making images fluid within the grids.
In practical terms, once you have inserted the image and given it the right media queries (float, margin e width, for example), you need to make the image perfectly scalable.
A responsive website is a website that can be adapted
The same principle applies to all three of these features: allowing your site's graphics to adapt to every device regardless of its shape or size, which makes the user experience potentially valid for every device in the world.
Perhaps a correct translation of "responsiveness" could at this point be "adaptability".
Today many CMS have integrated very convenient functions to make your site responsive, but a web designer who deals exclusively with that will certainly be able to to achieve better results in creation of e-commerce and websites responsive.
Want some practical examples of a design that works? design trends of 2020 selected by Pizero Design can be a good starting point!
And to give your website an extra boost, always apply a UX and UI design!
