Performance as design

Responsive Web Design

Responsive Web Design

it’s more important than ever that we design and develop sites that are
as high performing and efficient as possible. We need to aim for no
unnecessary overhead for our users and optimize for perceived
performance on all screen sizes.due to following reasons:

People are primarily using handsets to access the Internet, and

these devices present their own unique set of challenges. Between
the tremendous amount of latency on mobile networks ( “Mobile
Networks”) and hardware challenges like WiFi signal strength and
battery power (“Mobile Hardware”),
• 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

• 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..
• 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.

• 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.

• the majority of responsively designed sites are currently delivering
roughly the same page weight to small and large screens. 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. 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.
 Deliberately Loading Content
• Because 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. 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.
• We need to be deliberate with how we load content and ensure we are
delivering only the bytes that our user absolutely needs.
 Images
• Images should be served at the size at which they are displayed on the
page to eliminate any unnecessary overhead for your users.
• You can improve performance by choosing which assets to serve to
your user on the server side, rather than optimizing them on the client
side. Your server can make smart decisions by looking at a user agent
string, from which it can guess things like your user’s screen size,
device capabilities like touch, and more.

Tools like Adaptive Images detect your user’s screen size and
will automatically create, cache, and deliver correctly sized
images based on your defined breakpoints
For example, simply setting display: none to an element will not prevent a browser from
downloading the image:

<div id="hide">
<img src="image.jpg" alt="Image" />
</div>
/* Seriously, don't do this.
Browsers will still download the image. */

@media (max-width: 600px) {

#hide {
display: none;
}
}
The same goes for applying display: none to an element with a background-image; the image will still be downloaded:

<div id="hide"></div>
/* Again, don't do this.
Browsers will still download the image. */

#hide {
background: url(image.jpg);
}

@media (max-width: 600px) {

#hide {
display: none;
}
}
Instead, if you want to hide an image from displaying with CSS in a responsive design, you can try hiding the parent element of the element with a background-image:

<div id="parent">
<div></div>
</div>
/* Hide the parent element;
Browsers will not download the image. */

#parent div {
background: url(image.jpg);
}

@media (max-width: 600px) {

#parent {
display: none;
}
}
Alternatively, you could apply different media queries to tell the browser which background-image is appropriate to download at
which screen size. A browser will download an image when it matches a media query:

<div id="match"></div>
@media (min-width: 601px) {
#match {
background: url(big.jpg);
}
}

@media (max-width: 600px) {

#match {
background: url(small.jpg);
}
}
• Note that if media queries overlap, older browsers will download both images.
• But what about serving up retina images with CSS? We can ensure that only the retina version is downloaded
for most browsers by using a media query to serve the retina version:

<div id="match"></div>
#match {
background: url(regular.png);
}

@media (-webkit-min-device-pixel-ratio: 1.5),

(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-device-pixel-ratio: 1.5) {
#match {
background: url(retina.png);
}
}
our best bet for displaying a correctly sized picture in modern browsers is to take advantage of
the picture element in HTML

<picture>
<source media="(min-width: 800px)" srcset="big.png">
<source media="(min-width: 400px)" srcset="small.png">
<img src="small.png" alt="Description">
</picture>

Check out how amazing this is. Not only are we able to match media attributes to tell the browser which image
file to download, but we also have a low-resolution image that will be downloaded by browsers that don’t
support the picture element. Picturefill is a polyfill that enables support for the picture element in browsers that
don’t currently support it
You can use the picture element to serve retina images when applicable, too!

<picture>
<source media="(min-width: 800px)"
srcset="big.png 1x, big-hd.png 2x">
<source media="(min-width: 600px)"
srcset="medium.png 1x, medium-hd.png 2x">
<img src="small.png" srcset="small-hd.png 2x"
alt="Description">
</picture>

In this example, srcset tells the browser which image to choose at different pixel densities.
Again, we’re saving overhead for our users by being precise and telling the browser exactly
which single image file is the right one to retrieve and display.
 Fonts
• Font files can add a huge amount of overhead to your site because they
require additional requests and increase page weight. As discussed in
“Optimizing Web Fonts,” there are several ways of optimizing your
font files to ensure they are as high performing as possible. One
additional consideration you can make in your responsive design is to
load your custom font file only on larger screens. This is something
we do at Etsy, as we would rather save our users from downloading
the extra font file overhead if they’re on a mobile device.
To do this, set your normal fallback fonts on your content. Then
use a media query to only apply your web font to content at a
large breakpoint:
@font-face {
font-family: 'FontName';
src: url('fontname.woff') format('woff');
}
This will download and apply the font file only if the user’s
device matches the media query. All browsers (except Internet
body {
Explorer 8 and lower) are smart about downloading a font file
font-family: Georgia, serif; only if it applies. Internet Explorer 8 and lower will download all
} @font-face files referenced in a page’s CSS file, even if they
aren’t used on the page.
@media (min-width: 1000px) {
body {
font-family: 'FontName', Georgia, serif;
}
}
 Approaches

• While you’ll make many decisions about how to create your site’s
responsive web design during the actual design and development
process, it’s important to take a beat before you begin any work to
consider your overall approach and how it will impact performance.
Building performance into project documentation, taking the time to
look at your site from a mobile-first perspective, and figuring out how
you’re going to measure the performance of your site across media
queries will help you to create a speedy, responsively designed site.
 Project Documentation

• If possible, incorporate performance into your project documentation

for any project (not just responsive web designs!). For a responsive
site, you’ll want to benchmark and continue to measure the same
standard performance metrics like total page weight, total page load
time, and perceived performance using the Speed Index. But you’ll
also want to be able to set goals for devices and media queries, not just
an average overall page using your design.
 Mobile First

A mobile-first approach to designing any site will help you in so many areas.
It will prompt you to:

• Ask critical questions up front (“What is the core purpose of this page?”).
• Identify the most important functionality and content for your users.
• Establish design patterns and how they will change across screen sizes.
• Think about your site from an accessibility perspective (“How accessible
will this be for people on slower connections or less capable devices?”).
• You can progressively enhance your site by adding functionality,
incorporating more powerful animations and styles, and taking
advantage of newer devices’ capabilities, all while keeping track of
performance implications as you add on.
Performance is a crucial aspect of responsive web design. When

designing a responsive website, performance should be considered as an

integral part of the design process rather than an afterthought. Here's

why performance should be treated as a design consideration in

responsive web design:

 Measure Everything

• If you’re able to, implement automated tests that measure the total
page weight for each of your chosen breakpoints. Tom Barker
included an excellent chapter on continuous web performance testing
in his book High Performance Responsive Design, which outlines how
to implement Phantom JS tests that measure each breakpoint’s
performance, including YSlow score and total page weight.
• You can also test this manually. Emulate a device using Chrome
DevTools and use the Resources panel to see which image size is
being downloaded for that device. Here is an example set of media
queries in which I choose to serve a different image based on
breakpoint:
1. User Experience: Performance directly impacts user experience. A slow-loading website can frustrate users and drive them
away, leading to higher bounce rates and lower engagement. Responsive design aims to provide a seamless experience
across devices, and performance plays a vital role in ensuring that experience remains smooth and consistent.
2. Mobile Optimization: With the increasing use of mobile devices for browsing the web, optimizing performance is even
more critical in responsive design. Mobile networks may have slower speeds and higher latency compared to desktop
connections. Designing with performance in mind ensures that the website loads quickly and functions smoothly on mobile
devices, enhancing the overall user experience.
3. SEO Impact: Website performance is a significant factor in search engine rankings. Search engines like Google consider
page load times as part of their ranking algorithm. A responsive website that loads quickly across all devices is more likely
to rank higher in search results, driving more organic traffic to the site.
4. Conversion Rates: Studies have shown that faster-loading websites tend to have higher conversion rates. By optimizing
performance in responsive design, you can increase the likelihood of users completing desired actions such as making a
purchase, signing up for a newsletter, or filling out a form.
5. Bandwidth Considerations: Responsive design involves serving the same content to users across various devices.
Optimizing performance helps minimize the amount of data transferred, reducing bandwidth usage and potentially lowering
hosting costs.
6. Progressive Enhancement and Graceful Degradation: Performance considerations often lead to the adoption of principles
like progressive enhancement and graceful degradation. These approaches ensure that the website functions well across
different devices and network conditions by providing a baseline experience that can be enhanced for more capable devices
or scaled back for less capable ones.
Incorporating performance considerations into the design process of a
responsive website involves various strategies such as optimizing
images, minimizing HTTP requests, leveraging browser caching, using
responsive images and fonts, and employing techniques like lazy
loading and asynchronous loading of resources. By treating
performance as a design consideration from the outset, designers can
create responsive websites that not only look great but also provide fast
and efficient user experiences across all devices.
• https://mantisbt.org/demo.php