What is a Responsive Website?
A responsive website responds to its environment — that is, it responds to the size of the screen that it’s being viewed on.
The visitors to your site may be using a variety of different devices, each of which has a different screen width. A site design may be perfect on one device, but illegible or even unusable on another.
Designing a site that responds to its environment by slightly changing its layout and appearance to maintain usability is essential! Once “nice to have”, responsiveness is now generally considered a requirement when creating a professional website — it’s become part of what “web design” really means, and what makes it different from print design.
Read on to learn about tools in the TIME Sites application that make responsive design easy to achieve.
Ensuring Your Site is Responsive
The best way to ensure your TIME Sites site is beautiful on every screen size is to first complete your design at desktop width, then work your way downwards using Device Mode. At each smaller screen size, check and see how your design looks. Where necessary, make changes (see the “Common Techniques” outlined below.)
How much work you have to do will depend on the design of your particular website. In some cases, you may find that you have to do very little in order to make your site usable on small screens. In other cases, you may have to make a variety of adjustments to the styling of elements, or to the layout of elements on the page.
Responsive Changes Flow Downwards
One of the most important things to remember as you check your site at different device modes is that any changes you make will be applied at the current device width and below.
So, once you’ve designed your site on desktop, it will appear as-is on all smaller devices, by default. If you see something you don’t like at a tablet width, and decide to change it, your change will also be inherited by smaller devices (the change will be visible on both tablet and phone.)
Some Common Techniques
As you create your site, you should always be thinking of your design as a fluid layout that will expand or contract to fill the space on different screen widths. This makes web design a very different process than creating something static like a poster or the page of a magazine.
There are a number of ways you can ensure your site is beautiful on every device. Ultimately it’s up to you which techniques you want to use, and it will depend on your site’s layout, content, and your own sense of aesthetics. Below are a few commonly-used best practices.
Use grids. Grids (or custom grids) are a fantastic tool for creating a layout that can easily adjust to different device widths. The columns within a grid will automatically flex so that the grid fills the width of its parent. You can also easily change a grid’s layout from horizontal, to a 2-across split, to a stack. Switching between these modes on a per-device basis is one of the simplest, most common ways to make your website responsive.
Use percentage-based widths. Whenever possible, use percentages to define the widths of elements and their spacing. This will allow your page layout to flex with the browser window, and prevent unwanted line-breaking. Of course, there may be cases where absolute pixel values are helpful, too -- giving elements a percentage-based width and a max-width in pixels is a great way to allow your design to flex, but keep it within the limits you want. Being strategic about when to use each unit type is part of the art of web design!
Adjust font sizes. Both for legibility, and also to maintain the integrity of your page layout, you may find that it’s helpful to tweak the sizes of your fonts on different devices. Keep in mind that you can do this via your global styles — if you wanted to reduce the font size of all your <h1>’s on tablets and phones, for example.
Show / hide elements. Sometimes there’s just no way a design element can be adjusted to work properly at a narrow width. In these cases, you can choose to simply hide it completely on that device. You can even use this feature to “swap in” a mobile-friendly version of the same design element, by showing the replacement at the narrower device width, and hiding it on desktop.
Don’t rely on hover states. Remember that hover states don’t work on phones and tablets. Avoid relying on them to convey critical information in your design. Or, consider replacing design elements that have hover states with more mobile-friendly versions, using the show/hide technique mentioned above.
Responsiveness is Styling, not Reorganization
It’s also very important to remember what you can’t do as you are working in different device modes. Click here for a list of changes that are responsive and non-reponsive.
The changes you make at each width must be styling changes. This means you can change a huge number of parameters, including a lot of things that don’t intuitively feel like “styling”: width and height, margin, padding, absolute positioning, filters, and transforms, in addition to more obvious things like font styles, colors, backgrounds, and borders.
But you cannot change the structure of the page itself. If you reorganize elements on the page — drag a container to a new position on the stage, for example, or move things around in the Page Structure panel — your change will be applied on every device.
Also note that you cannot apply inline text styling on a per-device basis. Your styling changes must applied to elements overall, not to pieces of selected text inside those elements. (Styling text inline actually affects the HTML of the page by inserting a <span> tag within the text, and thus changes the structure of the page.)
Keep an Eye on Inheritance
As noted above, styling flows downwards to smaller devices. Tablet and phone sizes will inherit the desktop settings by default. Make a change on tablet, and it’ll be inherited by phone. This makes it very important to pay attention to whether an element’s style is being inherited from a wider screen size or not.
In TIME Sites, an inherited value is always displayed with a light-grey font in the editing panel. If it isn't inherited, and has actually been set at the current device width, it'll appear in black.
You can learn more about inheritance, and how it's conveyed in TIME Sites, in this article.
Mobile Menus
One of the most common needs is to produce a mobile-friendly menu (i.e. a “hamburger” menu) that replaces the standard navigation on smaller devices. We’ve got a great mobile menu how-to article you can check out.