Thou shalt care about whether your website looks good on a phone or not, and that is because the majority of internet users are accessing the internet from their phones. Does your site’s content on a phone look as nice as it does on a computer? Do all your site’s images fit well on a mobile screen? If not then you have probably broken one or more of these commandments. But worry not, because I’m here to help you avoid these unholy mistakes and make sure your website looks good on all devices, no matter if you are looking at your website on a 30-inch screen or a 6-inch screen.
- Mobile-first design is the way to go
Instead of creating a website for computers and then trying to cram it into a mobile phone. Try creating and optimizing your site for mobile devices first and then scale it up for bigger devices like tablets, laptops and desktops. Going in reverse is much smarter because this way you will ensure that your site has no issues on mobile devices. As you move to bigger devices you might have to load different or larger images, making your site heavier and your navigation bar can also change into a more computer-friendly format.
- Your layout must be fluid
As a modern web designer, you will be designing websites that are optimized for many different devices. For that, you will be setting the width of your containers as percentages of your browser’s viewport. This will ensure that your content fits within the width of your device’s viewport. Another thing you need to keep in mind is how your content will look within that viewport. Avoid using elements with fixed or absolute positionings because they are prone to cause issues on devices with smaller screens, and you have probably experienced this on sites that force you to scroll horizontally.
- Use media queries
After the introduction of something called “media queries” in CSS3 making responsive websites got a lot easier. Media queries allow you to query the screen size or the “media” and update the CSS in real time. That means that for example if you have 2 containers next to each other and they each take 50% of the width of the screen, you can get them stacked on top of each other at widths smaller than a specific number(768px for example). That is the essence of responsive web design.
- Take advantage of relative units
Using relative units allows you to break free from the traditional fixed-width layouts that we used to have back in the day. Relative units will help you have a fluid design and can simplify the design of your layout. They also allow browsers to render content based on the zoom level of the user so you won’t have to look at any horizontal scroll bars.
- Your images can be responsive too
It’s not just the layout of your website that should be fluid and responsive, it’s the content as well. Images are an important part of your content and can become a bit tricky if you don’t know how to size them correctly so that they look good and load up fast enough. Experts at Team-X, a digital marketing agency that offers responsive web design services in Australia say that over 50% of users are likely to leave a site if it takes longer than 3 seconds to load. Just like we mentioned in the previous paragraph, it is very important that you use relative units for your images as well.
- Don’t forget about user experience(UX)
It’s good to have a responsive website but you can’t neglect your UX. Many users might not even know what a responsive website is or what it even means. Ask yourself, is my website functional and beneficial to the users? Does my website feel good to scroll through? If you can’t answer these questions positively then maybe it’s time you take a good look at your website’s UX.
Conclusion
As we can clearly see the direction that web design is moving to, it is very important that we design websites that are responsive. Mobile devices with many different screen sizes are being released and we should make sure our websites can look good on all of them, the demand for responsive websites is increasing. As always keep getting feedback and test out different ideas to take your websites to the next level.
Author Bio:
Harrison Buckley is a business consultant. He has a deep passion for technology and on days when he is not busy at the office, he writes to share his knowledge with the world.
