Many developers are worried about responsive web design mobile or desktop first, the one to go first should be based on you as the developer and who the target audience is. A lot of developers prefer to go for the desktop first and then mobile later because they make use of large devices to write the programming code, which for me is the best but in some cases, there may be a need to do mobile first if the majority of your target audience will be coming from smaller screen devices.
Table of Contents
Responsive web design is a way by which we make our website layout fit into different devices that are used in accessing them. Responsive web design is an important part to be mastered as a web designer or developer, most especially if you plan to become a front-end developer, that doesn’t mean you should not understand the concept too as a back-end developer. Making a website responsive will help a business and its prospective users a lot, even as a developer. Website being responsive is part of what we should consider in our web design career.
Some of the reasons why you should implement responsive web designs are:
- Users’ accessibility: Making a website responsive will give the users the ability if access the website easily, the users will be able to navigate through the website without any difficulty.
- SEO: Search Engines like google, yahoo like a website that is very responsive, this will not only help them to serve their users with good content, but it will also help the brand to be found easily to increase the brand presence and reputation.
- Easy Content Management: Implementing responsiveness for different screen sizes will help the website manager or developer to able to remove, add or edit the content of the website with just one click.
what is mobile responsive design?
This is a type of design that majorly focus on users that are accessing the website on their various smaller screen devices be it a tablet or smaller ones. That doesn’t mean the desktop version won’t be available too, but the mobile responsiveness will be the top priority of the developer or designer working on the website. Don’t forget that whenever you are making media queries for different mobile devices, they also have different screen sizes and you need to make sure that your design layouts look perfect for the different sizes for better responsive designs.
how to learn responsive web design
When it comes to making a website responsive many ways and things that can be done to make it work, for you as a developer to make responsiveness work, you need to be very well acquitted with media queries and breakpoints for different screen sizes. Understanding layouts patterns like Flexbox and Grid would help too. These techniques should help you in implementing responsive web design:
- Make use of flexible Layouts: creating a flexible layout is the beginning of a responsive web design pattern, these layouts will adapt to the viewport of the device that is being used to access the web pages. When giving sizes to components or objects in your layout, try to make use of percentage or viewport heights (VH), and avoid the use of pixels completely. For the website layout patterns, it is highly recommended that you make use of a flexbox or grid if your layouts are one-dimensional try to use a flexbox but if it is 2 or more dimensional then you should use a grid. Using a flexible layout will make the website responsive to any device easily and look more professional on all devices.
- Use of high-resolution Fluid Images and Videos: In the process of implementing responsiveness for the website, make sure that the images and videos to be used on the website is well optimized for multiple screen sizes. Having an image or video that doesn’t look perfect on the screen sizes will bring about a bad design layout leading to a bad user experience, which will affect the website’s reputation too. The images should be of high resolution. For example, try to make use of vector graphics because they don’t lose quality no matter the screen sizes viewed.
- Adapt to media queries: One of the most powerful tools that are used when learning website responsiveness is media queries, the use of media queries allows a developer to make use of different screen sizes and resolutions. It is just a CSS rule that can be included in your CSS file. A media query rule is like this;
The ”max-width: 75em” is a condition or the screen size that the queries have to follow, while the “.featured” is the CSS selector we are making changes to, and the “padding: 0 3.2rem 0 6.4rem” is the property that we want to implement at that particular screen size.
The use of media queries improves the user experience of the website, traffic conversion, and a better impact on the SEO.
Responsive web design mobile or desktop first sizes
When it comes to choosing sizes or breakpoints for your website, some developers suggested some breakpoints that could help, at the same time it should not be a fixed size that you will be using for all your design because not all designs will fit into the sizes. A method I do use in most of my designs is following the point where it breaks.
For example using the inspection or developer tools on chrome to view the website on different screen sizes (some developers use different mobile and tablets devices, and this works too if you have a lot of devices but if otherwise, make use of the chrome developer tools), all you have to do is take note of the screen size that does not make a particular layout of the design and then adjust the CSS property in the media query rule.