Responsive Web Design | 10 Basics

Do you need to know about responsive web design? Responsive web design is an awesome solution to the multitude of different screen sizes and resolutions that we have to deal with as digital designers. This would be a great article for those of you 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.

Personally, I miss the days of pinching and zooming in your mobile browser on old-school websites. I thought that was really the best way to do it. I’r just kidding. The first principle that you need to know about is the difference between responsive and adaptive web design, responsive web design. Your content is going to AB & Flow. It’s 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 at certain sizes, yeah, there’s no right or wrong answer; it just depends on which one you want. The second principle that you need to know about is the flow. Every HTML document which websites are built on are made up of a natural flow of the elements on that page and as screen real estate starts to get smaller. Your content starts to take up more vertical space.

It’s something to keep in mind if you’re not used to it. The third principle that you need to know about is relative units of measurement no longer Suri’s you’d be designing with pixels or millimeters or pikas, who still designs using PICUs. But we now have the opportunity to use relative units of measurement like percentages and viewport width and viewport height, as well as m and r e-m-s. 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 easily, so I’m going to put a bunch of information about relative units of measurement down the description. The fourth basic principle of responsive web design are breakpoints. Breakpoints are predefined areas of measurement that allow you to rearrange your layout dependent on the size of the browser or the device. So if you have a desk design with a really wide layout in twelve 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 twelve column layout to a 6-3 or one column layout.

This is really really important because it allows you to take control your layout where things start to get a little funky and squished and no longer make sense. The fifth principle that you need to know about are maximum and minimum values. Sometimes it makes sense for your content to stretch 100 of the browser, 100 percent of the time, but other times it makes less sense and you might want to set a max width.

So it feels like there’s a containing element that it stays in, as the browser starts to stretch your content never goes past a certain point. This is really 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. Number 6 on our list of basic principles you need to know is containers or nested objects.

Sometimes it makes sense to take chunks of your content. Like a headline body copy, an image that are related to each other and insert them inside of a div you’ve now nested that content inside another containing element. Now you can control the containing element instead of constantly having to control each individual 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 or an article, and each of the individual elements inside of them are relative to the parent container.

So understanding how to use containers and nested elements is super important. The seventh basic that you need to know about is actually an ongoing debate of 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, really it’s an ongoing debate because there’s no right or wrong answer.

I think the cool thing to say is actually mobile first, but I actually designed the desktop first, because that’s just how I roll basic number eight is web fonts versus system fonts. Do you want that super duper 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 in your website 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 and so 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 responsive website number. Nine is understanding the difference between bitmap images and vector 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, that’s 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 is going to be nice and clean.

It’s math, something like an SVG, but you’ve got ta 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 information to store in the SVG and so understanding the difference, how to balance them and when to use them is a super-important Basic foundation of responsive web design, number 10 and the final item on our list of foundational principles for a responsive web design was coined by Brad Frost whose con and one of the grandfather’s were responsive.

Web design and his famous words were make it until you break it, which basically means make your website work as much as you possibly can, wherever you can and then, when it breaks, maybe consider a break point 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 type of device sizes without having to intervene and create some sort of first aid scenario.

Well, that’s it! That’s my list of 10 foundational principles for responsive web design. I hope you guys enjoyed the article if you did make sure to leave a thumbs up subscribe, the blog. I do lots of articles about design and development and websites just like this one. So maybe stick around hit that subscription button and the Bell notification icon, if you have any questions, leave those down in the comments and check the description for tons of links to helpful resources that I mentioned in this article, I’ll be guys are having amazing week.

Designing amazing things, making amazing things and building amazing responsive websites I’ll see in the next one.

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101