What is responsive design?
Responsive design consists in making website design adapt well to different screen sizes and devices, such as tablets and mobile.
It is a fundamental part of web design nowadays as more than half of internet traffic generates from mobile.
Unresponsive web design simply shows the same page on any screen size, forcing users to zoom in to read text or see content on mobile. If a website is responsive, on the other hand, its layout and text size also changes to optimize for each viewport.
Responsive design on STUDIO
Viewing pages on different screen sizes
You can view a page in multiple screen sizes in two ways.
Using the Responsive Bar. The Responsive bar is located under the top bar on STUDIO. You can visualize pages on specific breakpoints from desktop to mobile in various sizes.
Dragging the side edges of the page.
Making your website responsive
There are a few points to consider when making your website responsive.
Change text size & image size, margin & padding
It is usually necessary to adapt text and other content size for each breakpoint.
From the largest breakpoint (Desktop L size) make your way towards the center.
Some tips:
Once you edit text size and direction & alignment on responsive mode, changes made at default mode (desktop) won’t have effect anymore.
Always start creating your page from default desktop mode. If you add content from mobile, it won’t adapt to bigger screen sizes.
2. Adapt the layout
You may need to change the layout for smaller screen sizes, as in the example below.
Learn more about how to adapt layouts here.
3. Hide certain elements or content on specific devices
As the space on small screen sizes is limited, you may hide some elements in order not to overcrowd the page. Often, it is necessary to hide a header menu because of the lack of space.
You can find the ‘Display’ option on the top bar left hand side (box tab).
In order to hide an element:
Select it
Open the box tab from the top bar
Click on ‘display ‘ from the left corner of the top bar and uncheck the devices where you would like to element to be hidden
4. Create an hamburger menu for smaller devices
As header menus cannot be easily shown on mobile and sometimes tablet, hamburger menu are common in responsive design.
We will explain more how to make hamburger menus later.