Some guidelines for Responsive Design

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 desktop design with a really wide layout in twelve columns and when 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 reduced or even single column layout. Breakpoints are really important because it allows you to take control of your layout where things start to get a little funky and squished which no longer makes sense.

Mobile or desktop first?
It is an ongoing debate on either mobile or desktop first? How should you start designing? Should you start designing the full desktop experience or should you strip it down to that one-column simplified mobile-first approach? Mobile-first makes a lot more sense because of the widely spread audience of mobile users which encourages mobile-friendly design, and almost half of the traffic is coming from mobile users. Adapting the mobile-first approach means that we are going to start from a narrow screen to a wider screen. Now the majority of the audience spends more and more time on the internet from mobile ends. You can even do both at the same time. To understand it better let us say if you are doing a home page and started at the mobile version of it and then switched and look at the desktop version of it or maybe we have to change something else on the mobile site or vice-versa. It allows us to look at the whole view of how every user will experience the page. This will enable you to build a creative and attractive website in a better way.



Typography
If you want to adopt that trendy new typography to your website, you can. But just keep in mind that every piece of typography or font that you load up on a website, has to go out to a server and make a request and come back and that is going to slow down your load times for the users who are browsing your site. So maybe consider a system fault as they are pretty, simple, and fast and if the visitors are not able to understand it on their system it will default to something else making it confusing for users to understand the content. Hence, it is an important step to find the balance between those two and is a basic thing to understand in a responsive website.

Bitmaps and vectors images
Bitmap images contain information and if they are stretched up too much they start to look a little bit fuzzy or if you have something really small on a retina screen it is going to look a little wonky. So, if you have that problem, you could move over to vectors which are going to be nice and clean. It enables math something like Scalar vector graphics (SVG) but you have to balance how to use those SVGs as they are great for simple graphics like logos and icons whereas an image really should be a bitmap because there is too much information to store in the SVG. So it is important to understand the difference, how to balance them and when to use them is a super important basic foundation of responsive webdesign.

Take buttons seriously
Buttons are a really important part of your responsive website and getting them right is one of the most essential things in any interface. Buttons are usually the thing that you click or tap on to get to the final page or the final success. For example – In the case of eCommerce store buttons play a huge role as you need to push a couple of buttons to get to the checkout and get you to purchase the goods. Buttons should be built large enough so that it is easier for users to click on them. It is crucial for your buttons to have labels because buttons without labels that only have an icon are way more difficult to understand by users so keep that in mind. All the buttons should have a minimal inner margin which is the safe area inside the button for the label to have some breathing room and to be readable.