Empower your business with Vev for:
Enterprise
Enterprises use Vev to transform how their teams build for web.
Agencies
Agencies are using Vev to deliver powerful digital products to clients.
Marketers
Marketers are using Vev to create and scale interactive content and campaigns.
Publishers
Publishers are using Vev to enhance their digital storytelling.
Start creating content that demands attention
Set your imagination free with content that inspires
August 9, 2024
Words by Jeff Cardello
Ever wondered, "What is responsive design?". Well, think about what needs to happen for a web app to adjust to all those different devices you use.
When designing a website, text, graphics, navigational options, and other elements need to take their appropriate positions and scale across everything from large displays to small touch screens. This adaptability happens through a combination of HTML and CSS, which causes a design to shift and scale elements depending on what you’re using.
Whether you’re looking at a website leisurely on a desktop computer at work, or checking it out on mobile while out and about, responsive design makes it possible to offer a consistent experience, no matter what device is being used to view a website.
Let’s take a comprehensive look at what is responsive web design, how it works, tools you can use, and best practices to help you out in your work.
Responsive design is a fairly new phenomenon. Popularized by Ethan Marcotte, in an article he wrote for A List Apart in 2010, he made the case for designing websites that would be flexible based on singular layouts rather than having mobile sites relegated to subdomains. At the time of its publishing, mobile use was just beginning to proliferate, and responsive design emerged as a solution in meeting the needs of smartphone users.
While there have been many advancements in web development since the mid 2000s, the basic foundations of what is responsive design, as proposed by Marcotte, are still relevant today. Responsive design is a set of techniques, touching on both CSS and HTML, that makes websites usable across a variety of screen sizes. Through scalable grids, media queries, and text and visuals that are proportioned to fit different viewport sizes, responsive design allows for web apps to look and feel the same way on whatever computer or mobile phone they’re being used on.
According to an article published by Forbes, 96.5% of users access the web through mobile devices. With this gigantic number of people and the variety of technologies they use to get on the internet, a web app needs to be responsive.
While a website that hasn’t had responsiveness built into it won’t always be unusable, all sorts of issues can come up that can potentially impede its functionality. What is responsive design is meant to accommodate the many screens and devices that are out there, making sure that the content is readable, loading times are speedy, and visitors have smooth experiences.
Early websites were typically designed with a fixed width of 960 pixels, as most screens had a resolution of 1024 x 768. What is responsive design as we know it today wasn’t required, as there were far fewer screen sizes to consider.
Fixed websites have defined widths that do not change no matter what. If you set a container to a defined width of 75%, it will occupy this same percentage on mobile, tablet, or desktop. While fixed website layouts are considered somewhat outdated, they are still used today for simpler websites.
While free from advanced CSS, you’ll still come across fixed width websites. Designs like basic portfolios, landing pages, and event websites don’t often require in-depth customization, and fixed widths might be all they need to look good. You’ll also find fixed widths used in hybrid designs alongside responsive and adaptive features.
There are some benefits of fixed websites including:
While there are advantages to fixed websites, there are some major drawbacks:
One of the major things you need to understand when building a responsive website is knowing what technologies people are using. If you have an existing website using analytics tools like those offered by Adobe or Google will show you exactly what devices people are using, providing what you need to know in deciding between a mobile first or desktop first approach.
Global styles are applied to every instance of an element that matches a specific CSS rule and selector throughout the entirety of a website. Common elements, such as headings, background colors, buttons, and other widespread web features should be controlled by a minimum of CSS to keep things simple as well as consistent.
It may be the case that you’re starting a brand new web app, and you don’t have any data showing where people will be coming from. Many designers take a mobile-first approach, starting at the smallest breakpoint, then adapting for larger screens.
It’s no secret that we love responsive web design templates and you’ll find quite a few you can get started with when you open up a new project in Vev.
Let’s first talk about consistency. Responsive templates are pre-made with the styles needed so that a design will offer a similar user experience across digital devices. If you’re using Vev’s responsive templates, you’ll find them already adaptable to desktops, tablets, and mobile. While
there are breakpoint presets, Vev still offers plenty of flexibility in adding specialized breakpoints, inheriting the styles of one breakpoint to the next, and other customizations.
And while we’re on the topic of Vev, you get the option to use Auto Layout on both templates and projects that are started from a blank canvas. Auto Layout is a helpful responsive design tool that automatically scales elements in proportion to a parent frame.
You’ll find percentages touching many different components of what is responsive web design commonly specifying the scaling of padding, margins, divs, and other elements in a layout.
Let’s say you set up an image that takes up 10% the width of a given screen. This image will resize relative to the container it’s a part of at this proportion, preventing it from shrinking too much or falling outside of smaller screens.
There will always be situations where you want a piece of text to appear at a fixed pixel size, but you’ll find that in many cases you’ll want to use the designations vw, em, or rem, to scale type up or down. These units can seem a bit strange when you first see them, so let’s clear up what they mean.
Rem (root em)
Rem scales up or down depending on the root text size.
Consider a situation where you set up a size of 12px as the root display text size. If you want your h1s to display at 24px, you’d set the CSS font-size to 2rem. Or maybe you have some caption text for photos that you want to display at the smaller size of 8px; you’d simply set the font-size in its CSS properties to 0.67rem, which is ⅔ of 12.
Since it’s tied to the root text size, rem is useful in setting up global styling for repeatable text, ensuring that it scales at the same size no matter the device.
Em
Things can get a bit tricky in differentiating em and rem, as both involve multiplication. While rem uses the root setting to calculate the size of text, em uses the parent element. The em unit makes it so an element inherits the size in what directly precedes it. If you want text to display at a smaller size relative to a header in the same container, you’d multiply it by a value less than one. This is particularly useful in situations where you want to scale different text in proportion to what else it’s grouped with.
Vw (viewport width)
Viewport width takes into account the horizontal space afforded by a particular breakpoint and is measured in percentages. If you set up text to display at 10vw for a 1440px desktop width, it would be 144 pixels wide.
Using vw is particularly well suited for big text in headlines or hero sections, making sure that it scales proportionally with a viewport’s horizontal space.
The writing on a web app needs to communicate the ideas or information that it wants its visitors to take in. Figure out the most important points and an ideal way to organize the content so that will be readable even at smaller sizes. Recognizing what is the purpose of responsive web in relation to readability is important in creating content that won’t feel too dense even on tinier mobile screens.
In this list of tools for responsive website design, we have split them out into the tools that are best for different stages of the design process, as well as for different requirements:
Find the right tool for you below!
Prototyping is an important part of designing for web, as it is the step before building out a fully-fledged design. Try out the tools below to create a responsive prototype.
With a clear user interface, a healthy ecosystem of templates and plugins, and a smooth workflow, Sketch is the go-to for many designers, making it possible to create multiple versions of prototypes to see how they’ll work on different devices and screen sizes.
Symbols
One of the key features of Sketch is Symbols, which makes it possible to build reusable elements like UI buttons, text blocks, forms, and other repeating website features. These elements can be used globally, which makes updates and edits along the way easy, as well as leading to consistency on the final product.
Constraints
Constraints are a great tool in specifying how elements will react to different screen sizes. Constraints make it possible for web features to scale up or down and change position in relation to other elements.
Adobe XD is another popular option for building responsive website prototypes, standing out with its seamless integrations with other apps in the Adobe Cloud, tools for collaboration, and responsive design features. As of this writing Adobe XD has been in the limbo of “maintenance mode” for awhile, but it’s hopeful that Adobe will keep it going.
Artboards
In Adobe XD, designing takes place on Artboards. With presets for different screen size breakpoints, it’s easy to see how a design will look on different digital devices.
Responsive resize
One of the standout features in Adobe XD is its responsive resize capability. Design elements can be set to resize automatically when adjusted across different screen sizes.
Repeat Grid
For elements like lists or grids of items, Adobe XD's Repeat Grid feature is invaluable. It allows designers to create a set of repeated elements and adjust spacing, margins, and padding uniformly across all instances.
While low-code frameworks require some understanding in how CSS works, you don’t need to be an expert to take advantage of the responsive components, libraries, and other elements they have to offer.
Bootstrap is an open-source framework offering a huge component-based selection of responsive grid-based layouts, UI features, as well JavaScript plugins for constructing dynamic websites. All it takes is linking to Bootstrap’s CSS, and integrating its styles in an HTML layout.
While both Bootstrap and Tailwind provide shortcuts to using CSS, Tailwind works through utility classes that are directly added to HTML elements. Utility classes offer a bit more precision in styling with individual properties. Bootstrap is geared towards pre-built features, while Tailwind offers a higher level of control in creating customized elements.
No-code tools often allow for easier responsive design due to their visual-first, drag-and-drop nature. This could be a good option for designers with little-to-no knowledge of code.
We know the importance of a website that’s both dynamic and imaginative, but doesn’t lose anything on smaller devices. Whether you’re starting with a template or from scratch, we’ve put much into our design platform to ensure that your website will look and function the way that you want it to.
Breakpoints
When starting a new project in Vev, you’re given the options of three different breakpoints including 1024px for desktop, 600px for tablet, or 320px for mobile. In Vev, you can also set your own custom breakpoints, as well as enabling one breakpoint to inherit from another.
Auto Layout
Vev’s Auto Layout feature lets you set up the spacing and orientation of elements in a frame without having to mess with complicated CSS. You also get the option to wrap content, which helps content adapt to smaller screens.
Percentages as a default
Building web designs where elements are positioned and sized via percentages takes care of many responsive web design requirements. In Vev, the positioning and width of elements is automatically set to a percentage once it’s dropped on the canvas.
Constraints
Vev’s constraints give you a high degree of precision in how elements appear at different breakpoints. For instance, the constraint settings of “Top”, “Bottom”, “Right”, and “Left” will anchor an element to its designated spot, no matter if the screen is on mobile, table, or desktop. Constraints are effective in maintaining responsiveness as well as making a website experience more cohesive.
Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy
There’s much that can go wrong when you’re not following the practical guidelines of what is responsive web design, so let’s cover some of the common issues you may encounter.
Using fixed heights on elements like containers can push images and text outside of the screen making content difficult or impossible to get to.
It’s easy to mix up when to use max-width and min-width, which can result in weirdly proportioned websites. The general rule is to use minimum heights for elements that need to scale up vertically like divs, and maximum width on containers or other elements that shouldn’t exceed the allotted horizontal space.
A common mistake for beginner designers is creating too many styles. Starting with global styles makes designs more uniform while avoiding errors or strange website behaviors from clashing CSS. It’s also easier to manage a tight and concise CSS style sheet compared to one that is too long.
Using fixed units like pixels may cause text to appear way too big or appear tiny depending on the device. In contrast, relative units such as viewport width (vw), rem, or em adjust dynamically based on the viewport size or page structure, ensuring that they’ll maintain readability.
Desktop screens afford the luxury of space. Elaborate drop-downs and other complex UI elements have plenty of room for visitors to interact with them without issues. If UI elements aren’t set to meet the demands of smaller breakpoints, they can be rendered nonfunctional. A button that works so well on a big screen might be difficult to press if it isn’t scaled correctly or doesn’t have enough padding to set it apart from other interactive features on a mobile touch screen. Prioritize the main actions and paths you want users to take as well as test on different devices to make sure that there aren’t any UI issues.
Let’s take a look at media queries in action, specifically in Vev. In this Eccommerce skincare template the header has its own distinct styling that happens at the 600px mobile breakpoint, with the DERMA logo and whitespace taking up 100% of the width of the top portion of the screen.
In this specific instance, this design choice makes sense visually to how the rest of the design appears on mobile. Vev offers plenty of flexibility if you want your design to have custom styling at different breakpoints.
We love the big and bold typography and scroll-triggered animations in this website for Loket Design. What’s also notable are the text-sizes. We see vw used for large text like this header.
But here in the descriptive text in the Awards and Patents section we see a fixed size of 12px for most of the breakpoints.
While there is a combination of different text-size units, it still succeeds in looking brilliant across a variety of screens.
There are a few ways to go about pulling off flexible grid layouts. There’s the CSS route in manually setting up containers, and setting them to display at flex or grid. You can work with the low-code framework Bootstrap with its grid system or Tailwind’s classes for grid elements. Or there is the no-code route with Vev, where you can set up grids, and use Auto Layout to keep your design responsive.
Built with Vev, Dribe utilizes grids throughout, which are responsive and scale groups of elements in reacting to different screen points.
Computer screens with High Dynamic Range (HDR) color capabilities offer a wider range of colors and brighter brights compared to regular screens. While HDR displays offer more brilliant colors and higher contrasts, designers in the future may face challenges in creating designs that look good across different quality displays.
Container queries are a fairly new development in CSS. As the name implies, elements are scaled depending on the size of containers they’re inside a part of rather than viewport sizes.
Basing dimensions on parent containers, rather than screen size allows for designs that are more adaptable than standard media queries.
Instead of designating set values in CSS, the development of clamp() allows for a range of parameters to be set. This is useful for elements like text, grids, and containers, making them more adaptable to screens of various magnitudes.
There are people with visual impairments and others who prefer less on screen movement. Thankfully many devices give users preferences in controlling motion. The prefers-reduced-motion media query in CSS is a fairly new development for designers that makes it possible to set how transitions and animations will behave based on visitors’ reduced motion preferences.
As we’ve just covered, there’s so much you have to think about when building responsive websites. It can be a huge undertaking if you’re not using the right tools. Vev gives you a no-code solution, letting you manifest your creative ideas and put them into designs that will be enjoyable no matter how your visitors are experiencing them.
Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy
