In this article, I’m going to be talking about the 9 basic principles, you need to know about responsive web design. Responsive web design is an excellent solution to the number of different screen sizes and resolutions that we have to deal with as digital designers.
This would be a great article for those who are just getting started building websites, whether it’s design or development and you want to make sure you have a firm grasp of the basics before you get started.
Responsive & Adaptive
The first principle that you need to know, the difference between responsive and adaptive web design.
Responsive web design
Your content is going to squish and release consistently as the browser or device size changes.
Adaptive web design
On the other hand, is just going to adapt to certain sizes and there’s no right or wrong answer. It just depends on which one you want.
1. The Flow
The first principle that you need to know about is the flow of every HTML document that websites are built on is made up of a natural flow of the elements on that page and as the screen starts to get smaller your content starts to take up more vertical space.
It is something to keep in mind if you are not used to it.
2. Relative Units
The 2nd principle that you need to know about is relative units of measurement. No longer you’d be designing with pixels or millimeters but we now have the opportunity to use relative units of measurement like percentages and viewport width and viewport height as well as EM and REM.
All of these measurements are relative to the browser size or relative to other elements on the page. Relative units allow you to design responsive layouts so much more quickly and easily.
3. Breakpoints
The 3rd basic principle of responsive web design is breakpoints. Breakpoints are predefined areas of measurement that allow you to rearrange your layout reliant on the size of the browser or the device.
So, if you have a desk design with a really wide layout in 12 columns and it starts squishing down to tablet or mobile device sizes, you might want to insert a breakpoint that allows you to rearrange that 12 column layout to a 6 or 3 or 1 column layout.
This is important because it allows you to take control of your layout where things start to get a little funky and squished and no longer make sense.
4. Max and Min Values
The fourth principle that you need to know about is maximum and minimum values. Sometimes it makes sense for your content to increase 100% of the browser, 100% of the time but other times it makes less sense and you might want to set a max-width so it feels like there is a containing element that it stays in as the browser starts to increase your content, never goes past a certain point.
This is important for legible text, you don’t want to read measures of text that are 3000 pixels wide. it’s really hard for the eye and so you want to capture, control, govern and maintain with minimum and maximum values.
5. Nested Objects
Number 5 on our list of basic principles, you need to know is containers or nested objects. Sometimes it makes sense to take parts of your content like a headline, body copy, an image that are related to each other and insert them inside of a div.
You have now nested that content inside another containing element. Now you can control the containing element instead of constantly having to control each element. This makes a lot of sense if you look at a layout like a list of blog posts.
All of those blog posts are contained most likely in a div element or an article and each of the individual elements inside of them are relative to the parent container so it is important to understand how to use containers and nested elements is super important.
6. Mobile or Desktop First?
The 6th basic that you need to know about is an ongoing debate on either mobile or desktop?
First, how do you start designing?
Do you start designing the full desktop experience or do you strip it down to that one column simplified mobile-first approach? It’s an ongoing debate because there’s no right or wrong answer, I think the cool thing to say is mobile-first.
7. Web fonts vs System Fonts
Do you want that super-trendy new typography on your web, like you should have it but just keep in mind that every piece of typography or font that you load up on your site is going to have to go out to a server and make a request and come back and that’s going to slow down your load times for the users who are browsing your site?
Maybe consider a system fault because they’re pretty stinking fast and if they don’t have it on their system, it’ll default to something else so finding the balance between those two, is a basic thing to understand in a responsive website.
8. Bitmaps vs Vector
Number 8 is understanding the difference between vector images and bitmap images.
Bitmap images are contained information, if they’re stretched up too much, they start to look a little bit fuzzy or if you have something really small on a Retina screen, it’s going to look a little wonky so if you have that problem you can move over to vectors which are going to be nice and clean.
It’s something like an SVG but you’ve going to balance how to use those SVG’s are great for simple graphics like logos and icons whereas an image really should be a bitmap because that’s too much data to store in the SVG.
So understanding the difference between how to balance them and when to use them is super-important.
9. Make it Work
The basic foundation of responsive web design number 10 and the final item on our list of foundational principles for a responsive web design make it work until you break it. This means make your website work as much as you possibly can, wherever you can, and then when it breaks maybe consider a breakpoint or media query or a layout change or some kind of fix for it.
But you should try to make your layouts and your websites work as much as you possibly can and as many different types of device sizes without having to intervene and create some sort of first aid scenario.
That’s my list of 9 foundational principles for responsive web design. I hope you guys enjoyed the article.
No Comments