Responsive Web Design
I’ve started planning My Hero website (I’ve chosen my family!) and in my website planning document I’ve said that the website will be responsive. But what does that even mean?
What?
Well, straight off the bat, responsive design means that the website in question will work on any device and browser. The website responds to the device or browser accordingly. It knows that full screen on my laptop looks different to full screen on my phone.
How?
Now that you know what responsive design is, let’s looks at how it’s created.
Use Relative Units: Em units and percentages are relative units assigned depending on the font size of the parent element. So regardless of the screen size, the body text will always be .5em/50% of the parent.
Define Media Queries: Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the types of device being used to view the content in relation to width, height, orientation etc. Here is a website to help test media queries.
Define Breakpoints: A breakpoint is the point at which a website's content and design will adapt in a certain way in order to provide the best possible user experience. For example, when a website is viewed on a desktop screen, the whole navigation menu is seen on the sidebar, whereas on a tablet or mobile device it is represented as three lines in the top corner.
Why?
Alright, so we now know what responsive design is and we know how to do it, but why bother? Responsive web design is so important, and here’s why:
It makes your website mobile-friendly, improves how it looks on big and small screen screens
It increases how much time people are spending on your website
It also helps in improving SEO
Resources
This YouTube video explain 10 top tips for responsive design very clearly.
This article from CatsWhoCode gives a more detailed breakdown on responsive design. Meow.
This handy interactive course on W3schools.com will make sure you become a pro.
