The Beginner’s Guide to Responsive Web Design (Code Samples & Layout Examples)

In Web design

The Beginner’s Guide to Responsive Web Design (Code Samples & Layout Examples) - read the full article about web design errors, Web design and from Kinsta on Qualified.One

Share

Tweet

Kinsta
Youtube Blogger

Hi, Im Mike and today Im going to give an overview of responsive web design.

(upbeat music) With an internet increasingly access from mobile devices, its no longer enough to have a static website design that only looks good on a computer screen.

Slapping your content into a single column and calling it quits, isnt going to cut it.

With responsive web design you can make sure your website looks its best in all types of screens.

Smartphones, tablets, laptops and desktop screens.

In this video, we will highlight everything you need to know about responsive web design, including definitions, a step-by-step walkthrough, examples and more.

But before we get too far, I wanna let you know that therell be links and more resources in the video description below.

And remember, subscribe and ring that bell to get notifications for future helpful content.

So lets get started.

If youre new to web design, development or blogging, you might wonder why responsive design matters in the first place.

The answer is simple.

Its no longer enough to design for a single device.

Mobile web traffic has overtaken desktop and now makes up the majority of website traffic accounting for more than 51%.

When over half of your potential visitors are using a mobile device to browse the internet, you cant just serve them a page designed for desktop.

It would be hard to read and use and lead to bad user experience.

But thats not all.

Users on mobile devices also make up the majority of search engine visits.

Finally, over the last few years mobile has become one of the most important advertising channels.

Even in a post pandemic market, mobile ad spending is growing 4.8% to 91 and a half billion dollars.

Whether you choose to advertise on social media or use an organic approach like YouTube SEO, the vast majority of your traffic will come from mobile users.

If your landing pages arent optimized for mobile and easy to use, you wont be able to maximize the return on investment of your marketing efforts.

Bad conversion rates will lead to fewer leads and wasted ad spend.

Lets now look at the underlying foundation for responsive website design and its different building blocks starting with CSS and HTML.

The foundation of responsive design is a combination of HTML and CSS.

Two languages that control the content and layout of a page in any given web browser.

HTML mainly controls the structure, elements and content of a webpage.

For example, to add an image to a website, you have to use HTML code like this.

You can set a class or ID that you can later target with CSS code.

You could also control primary attributes such as height and width within your HTML but this is no longer considered best practice.

Instead, CSS is used to edit the design and layout of the elements you include on a page with HTML.

CSS code can be included in a style section of an HTML document or as a separate style sheet file.

For example, we could edit the width of all HTML images at the element level like this.

Or we could target the specific class full with image by adding a period in front.

You can also control the design beyond just height, width and color.

Using CSS like this is how you make a design responsive when you combine it with a technique called media query.

A media query is a fundamental part of CSS3 that lets you render content to adapt to different factors like screen size or resolution.

It works in a similar way to an if clause in some programming languages, basically checking if a screens viewport is wide enough or too wide before executing the appropriate code.

If the screen is at least 780 pixels wide, full width image class images will take up 90% of the screen and be automatically centered by equally wide margins.

A fluid layout is an essential part of modern responsive design.

In the good old days, you would set a static value for every HTML element like 600 pixels.

A fluid layout relies instead on dynamic values like a percentage of the viewport width.

This approach will dynamically increase or decrease the different container element sizes based on the size of the screen.

While a percentage base layout is fluid, many designers and web developers felt it was not dynamic or flexible enough.

Flexbox is a CSS module designed as a more efficient way to lay out multiple elements even when the size of the contents inside the container is unknown.

A flex container expands items to fill available free space or shrinks them to prevent overflow.

These flex containers have a number of unique properties that you cant edit with a regular HTML element.

Its a complicated topic so if you want to use it in your design, you should click on the link to read our CSS tricks Flexbox guide found in the video description below.

The most basic iteration of responsive images follows the same concept as a fluid layout, using a dynamic unit to control the width or height.

The sample CSS code we covered earlier, already accomplishes this.

The percent unit approximates to a single percentage of the width or height of a viewport and makes sure the image remains in proportion to the screen.

The problem with this approach is that every user has to download a full-sized image even on mobile.

To serve different versions scale for different devices, you need to use the HTML source set attribute in your image tag to specify more than one image size to choose from.

WordPress automatically uses this functionality for images included in posts or pages.

When youre attempting to create a responsive design for your website the loading speed should be a top priority.

Pages that load in two seconds have an average 9% bounce rate, while pages that take five seconds lead to a 38% bounce rate.

Your approach to responsiveness must not block or delay your pages first render any more than it needs to.

There are several ways you can make your pages load faster.

Optimizing your images, implementing caching, minification, using a more efficient CSS layout, avoiding render blocking JS, and improving your critical rendering path are all great ideas you should consider.

You could also try to implement Google AMP for your mobile pages.

But in our Google AMP case study, our mobile leads dropped by a whopping 59%.

To work with media queries, you need to decide on the responsive break points or screen size break points.

A break point is the width of the screen where you use a media query to implement new CSS styles.

If you choose a mobile first approach to design with a single column and smaller font sizes as the basis, you dont need to include mobile breakpoints, unless you want to optimize the design for specific models.

So you can create a basic responsive design with just two break points, one for tablets and one for laptops and desktop computers.

As one of the first and most popular responsive frameworks, Bootstrap led the assault on static web design and helped establish mobile first design as an industry standard.

As a result, many designers to this day still follow Bootstrap screen with break points.

They use media queries to target landscape phones, tablets, laptops and extra large desktop screens.

Now that youre familiar with the building blocks, its time to make your website responsive.

Set your media query ranges based on the unique needs of your design.

For example, if we wanted to follow the Bootstrap standards for our design, we would use the following media queries.

The first and most important step is to set up different sizes for different layout elements, depending on the media query or screen break point.

The number of layout containers you have will depend on the design, but most websites focus on these elements, wrapper or container, header, content, sidebar and footer.

Using a mobile first approach, you can style the main layout elements like this with no media query for basic styles for mobile phones.

In a percentage based approach, the float attribute controls what side of the screen and element will appear on, the left or the right.

If you want to go beyond the basics and create a cutting edge responsive design, you need to familiarize yourself with the CSS Flexbox layout and its attributes like box sizing and flex.

One way to make sure that your images dont break is merely using a dynamic value for all pictures as weve covered earlier.

But that wont reduce the load placed on your mobile visitors when they access your website.

Make sure you always include the source set attribute with different sizes of your photo when you add images to your pages.

Doing this manually can be quite time-consuming.

But with the CMS like WordPress, it automatically happens when you upload media files.

The main focus of responsive web design is on the responsiveness of the layout blocks, elements and media.

Text is often treated as an afterthought, but for a truly responsive design you should also adjust your font size appropriately to match the screen size.

The easiest way to do this is to set a static value for font size like 22 pixels and adapt it in each media query.

You can target multiple text elements at the same time by using a comma to separate each one.

First, you want to test whether your site is mobile friendly with Googles Mobile-Friendly Test.

Simply enter the URL of your website and click the test URL button to get the results.

Dont worry if it takes a while to fetch your site.

That doesnt reflect your page loading speed.

If you follow the steps Ive outlined in this video, it should say that you have a mobile friendly website.

Then, you want to test your site on multiple screen sizes with a tool like Chrome developer tools.

If youre in Chrome, press control, shift and I on Windows computers or command, option, I on Macs to open the relevant device view.

From there, you can select the mobile device or tablet of your choice to test the responsiveness of your design.

There are a couple of questions you want to answer when going through this process.

First, does the layout adjust to the correct amount of columns? Does the content fit well inside the layout elements and containers on different screens? And do the font sizes fit each screen? CSS has both absolute and relative units of measurement.

An example of an absolute unit of length is a centimeter or a pixel.

Relative units or dynamic values depend on the size and resolution of the screen or the font sizes of the root element.

A new web designer or developer should probably stick with pixels for texts because they are the most straightforward unit of length in CSS.

But when setting the width in Macs width of images and other elements using percentage is the best solution.

This approach will make sure that components adjust to the screen size of every device.

There are a lot of different elements that go into responsive web design.

Without a basic understanding of HTML and CSS, it can be easy to make mistakes.

But through familiarizing yourself with the different building blocks, analyzing the examples with web dev tools and testing as you go using the sample code, you should be able to make your website responsive without any major issue.

Kinstas WordPress hosting can speed up your website by up to 200% and youll get 24/7 support from our expert WordPress engineers.

Let us show you the Kinsta difference.

Try a free demo of our MyKinsta dashboard at demo.kinsta.com.

Thanks for watching.

And dont forget to subscribe for more tutorials, explainers and helpful content like this.

(upbeat music)