Common elements used in responsive design
Designing a responsive website requires that you know how to scale elements to make the best use of available screen space, from a desktop computer to a mobile phone. Adjusting your designs based on the size of the screen might mean using different amounts of text, utilizing icons, scaling the size of images, and more. As you begin to create your own responsive designs, here are some common elements and components that you can use.
A hamburger menu is a type of navigation menu that is represented by an icon with three horizontal lines. The hamburger menu gets its name because the three lines resemble a hamburger’s top and bottom buns, with a patty in the middle!
As shown in the image above, when users click on a hamburger menu, a pop-up list unfolds to cover part of the page or even the whole screen. The expanded menu has a list of navigation options that link to various pages of the website.Typically, hamburger menus are shown at the top left corner of a website design. Hamburger menus are often featured in mobile versions of websites, because a lot of text can be placed inside of the list, which keeps the main pages of the design clean. In other words, a desktop version of a website design might have a top navigation bar that lists text horizontally across the screen, but a mobile phone screen size doesn’t have room for this text, so it’s placed within a hamburger menu.
Cards are compact surfaces that contain content and actions about a single subject or topic. This design component gets its name because each card resembles a traditional playing card with its rectangular shape.
You’ve likely interacted with cards in a real world design, such as browsing thumbnails for online articles, organizing a Pinterest board, or swiping through profiles in an online dating app. In these examples, each card represents a new article, pin, or profile. Because cards are compact, there’s little room for details. This means using cards in your designs can encourage user interactions, by teasing content that the user might want to click or tap.
Cards are also helpful when creating responsive designs because they can be easily arranged in predictable ways across devices. Each card can contain a similar amount of information from desktop to mobile designs, since little content is included. But desktop designs might include five columns of cards, while mobile designs might include only two columns of cards.
Carousels, or slideshows, are scrolling feeds of images or cards that can be sifted through with a click, a swipe, or on automatic loop. Think of a carousel at a carnival or shopping mall that rotates in a circle. In the same way, users can swipe through a loop of images in a carousel. You’ll often find carousels on websites with lots of images, like social media platforms and photo galleries. Carousels are also frequently featured in e-commerce websites to showcase multiple items within one page.
Carousels may appear differently across device sizes. For example, on a desktop computer with a large screen size, you can preview multiple images in the carousel, as shown in the image above. On a mobile phone with a small screen size, the carousel can be condensed to show only one image at a time.
In addition, images within a carousel can be scaled to fit the size of the device. On desktop, carousels can be large or even take over an entire page, like a traditional slideshow would. On mobile, images within a carousel are smaller or might even change to a more compact shape, like a square instead of a rectangle.
A call-to-action (CTA) button is an interactive and appealing button that invites users to click on it. As shown in the image above, CTA buttons are usually emphasized in a design by using a different color or font than the rest of the design. CTA buttons are common on e-commerce websites to encourage users to “Add to cart” or “Buy now.” CTA buttons are also used frequently in responsive designs to get users to take a specific action like “Sign up” or “Confirm.”
Alternatively, CTA buttons can lead users to a different page within the website. For example, clicking a CTA button on the home page of a website could lead users to a detailed product description page that requires space that the home page doesn’t have.
CTA buttons are used across all screen sizes in responsive design. But their appearance and function depends on each device. For example, CTA buttons might occupy more space on mobile devices than on desktop. CTA buttons might also be more interactive on mobile devices with touch screens, since they allow for more nuanced gestures beyond a simple click.
More on creating responsive designs
You now know about some common elements and components that are used in responsive website designs! Take a moment to think about the responsive website you’re designing in this course. Would using a hamburger menu, cards, a carousel, or CTA buttons be useful in your designs?
If you want to learn even more about creating responsive designs, check out these responsive design techniques from Microsoft. You might also want to explore these five navigation patterns from UX Planet to make your designs user friendly. Or, if you want to really get into the details, read this deep dive into page design from Just in Mind.
Sources: Google UX Design Professional Certificate
Coursera | Responsive Web Design in Adobe XD
