In 2019, the World Wide Web turned 30 years old and has lived up to its name as an indispensable part of the lives of billions of people worldwide.
Another technology that has become just as indispensable to as many people is the smartphone.
So it’s no surprise that the two trends have been coming together so that, according to Statista, by 2018 more than half of all web pages worldwide were being viewed on mobile phones. Every indication is that this trend will continue.
How do these trends impact the work of front-end developers?
As well as the variation in types, your users could be using any one of the many browsers available for these different devices.
With so many devices and browsers out there, each device-browser combination potentially requires its own tweaks to make sure that web pages are rendered properly.
You’ll find that not only do different browsers have different capabilities and variations in how well they support web standards such as HTML and CSS, but even different versions of the same browser might have variations as well. This means that you need to account for these variations when building web pages to make sure they are displaying and functioning correctly.
Different screen sizes also mean that the web page layout might need to change depending on the device. Mobile devices can also be used in portrait or landscape orientation, which affects how a page is displayed. In other words, you need to build responsive layouts, or layouts that respond dynamically to the size and orientation of different screens.
You might have noticed this with the sites that you use regularly. For example, if you use any social media platforms, you’ll see that the developers have built them in a way that renders the interface differently when you’re accessing it on your computer compared to your phone.
You’ll notice the same for this site. Try accessing this page on another device: if you’re reading this on your phone, then open the page on your computer, or vice-versa. Notice how the layout changes to adapt to different screen sizes. This is responsiveness in action!
As a front-end developer who cares about giving your users a good experience, you need to bear these device and browser differences in mind when building for the web. Luckily, many front-end component libraries have been developed so you can spend more time implementing the core designs and functionality of your sites and less time debugging and refactoring to account for all of these variations.
Bootstrap is the most popular front-end component library, and in the next chapter, we’ll take a look at it in more detail so you can decide if it’s the right one for your project.
Access to websites via mobile phones has been an increasing trend that you need to account for as a web developer.
It’s best practice to build responsive layouts for your websites and apps.
Front-end libraries such as Bootstrap will help you build user interfaces that give consistently good user experiences.
Now that you understand the trends in mobile web access and the relevance of front-end libraries, it’s time to take a closer look at Bootstrap.