Responsively designed website9/1/2023 ![]() ![]() This means that users are downloading unnecessary bytes, since their browsers downloaded an image that’s unnecessarily large for how it’s displayed. The size at which the Google logo is displayed is smaller than the actual height and width of the logo file. In Figure 5-1, we can see a screenshot of Google’s home page with Chrome DevTools open. Images should be served at the size at which they are displayed on the page to eliminate any unnecessary overhead for your users. We need to be deliberate with how we load content and ensure we are delivering only the bytes that our user absolutely needs. This is especially true when a design starts with a desktop version and is then edited to scale down for smaller screens: what happens to those assets that have been optimized for the desktop view? Too often these are left as is images are always served at the same size (just scaled down visually, through CSS), or fonts continue to be delivered and implemented as they are on desktop. Deliberately Loading Contentīecause we so often create a responsive site by adding things like more media queries for various screen sizes, it’s easy to forget that we may also be adding a ton of extra overhead for our users. By being intentional in your approach to designing a responsive site and deliberate with what kinds of assets you require your users to download, you can build an excellent user experience that performs well regardless of screen size. But it doesn’t have to be this way: responsive web design is not inherently bad for performance, and we can be smart about what we deliver to our users. Guy Podjarny found that the majority of responsively designed sites are currently delivering roughly the same page weight to small and large screens. We need to build an additional step into this responsive web design workflow: ensuring that we are delivering only the necessary content in terms of page weight and requests, not just information architecture. Many creators of responsive sites are already going above and beyond in their decision-making process: reflowing content, choosing to hide or show various elements, making smart decisions about hierarachy, and more. Because the process of creating a responsively designed site can often include adding markup and functionality to optimize your layout and content for smaller screens, it’s no surprise that many sites deliver the same page weight or additional page weight to mobile devices without the designers and developers even realizing it. The challenge with responsive web design sites is that it can be very easy to accidentally deliver unnecessary content like too-large images or unused CSS and JavaScript. We need to aim for no unnecessary overhead for our users and optimize for perceived performance on all screen sizes. Between the tremendous amount of latency on mobile networks (see “ Mobile Networks”) and hardware challenges like WiFi signal strength and battery power (see “ Mobile Hardware”), it’s more important than ever that we design and develop sites that are as high performing and efficient as possible. ![]() People are primarily using handsets to access the Internet, and these devices present their own unique set of challenges. Mobile is no longer “the future.” As mentioned in Chapter 1, handsets are the primary Internet access method for a vast number of global Internet users. Responsive Web Design | Designing for Performanceĭesigning for Performance Responsive Web Design
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |