You may have heard the term responsive web design, but do you know what it really is — and why it’s important for your business? These days, the vast majority of your audience is looking at your website on their mobile devices. A responsive website is one that looks good no matter how it’s being viewed —on phone, tablet, or desktop, and therefore can better reach your customers.
Responsive web design (RWD) is more than just making sure a website shrinks down to the size of a phone screen. Good RWD is about developing a user experience that best suits the platform. For example, the mobile website might have a one-column layout rather than a multi-column grid. Page elements might be rearranged to make it easier for the visitor to read and engage with the content. This adaptability is key to responsive web design.
Here are some key components and terms to know about RWD:
Bootstrap
Bootstrap is a set of CSS rules that allows elements to rearrange themselves in a fluid grid layout. RWD developers are free to code their own grid systems, of course, but Bootstrap is a popular, highly adaptable choice. It permits web designers to lay out content in a way that adjusts to the viewport (which we’ll define in a moment).
Hamburger Button
Mobile devices usually aren’t wide enough to show the full breadth of the traditional navigation menu. To resolve this, RWD develop- ers will use what’s called the hamburger button, a stack of three lines that appears at the upper left or right corner of the site. Most users know that tapping on this will reveal a dropdown menu with which they can navigate the site.
Media Queries
A media query is used in a site’s CSS code to describe the size, behavior, and other attributes of page elements when a certain de- vice is used. For example, you could set your header image to be no more than a certain width when viewed on desktop, but stretch across the screen on mobile.
Media queries enable a single stylesheet to accommodate multiple modes for the page. They’re crucial to good RWD. They can even prevent certain elements from showing up in certain devices, which might be good if you have specific content you want to show a mobile audience versus a desktop one.
Vector
One issue with RWD is that it can be hard to choose images that look good at any size. Either the image is so large that it hogs a lot of server speed and decreases your page’s load time, or it’s small enough that users with big desktop screens will see a pixelated version. The solution is a vector, which is meant to scale in proportion to the overall size of the page. Especially for elements such as logos and calls-to-action, your web developer should use vector images.
Viewport
The size and screen resolution of a device used to view a website is called the viewport. Typically, web developers will create multiple wireframes for different viewports. Depending on the needs of the site, the layout and elements may be drastically different between platforms (i.e. phone, tablet, laptop, desktop), but similarly sized viewports should look fairly alike. For example, people using an iPhone and a Samsung Galaxy should see nearly identical sites, but people visiting the site on an HP laptop will see a different layout from both of them.
Wrapping Up
By knowing these terms and why they’re important to good RWD, you can have productive conversations with your web developer. Remember, RWD is here to help you reach your broadest audience and give everyone an equally good experience. You don’t want to isolate either your mobile or desktop users, and you can also leverage different platforms to drive traffic in a way that best suits your business goals. For example, a landing page that appears on mobile could direct users to your Instagram profile, but this element could be hidden on desktop.
Have clearly defined marketing goals for your site, then get your marketing and web development teams on the same page to ensure a user-friendly, branded, and well-functioning experience for your site visitors.