Professional Documents
Culture Documents
Responsive Web Design - DZone PDF
Responsive Web Design - DZone PDF
CONTENTS
öö LAYOUT OPTIONS
Responsive öö
öö
öö
RESPONSIVE IMAGES
Web Design
öö AND MORE!
LAYOUT OPTIONS
Selecting a layout option is typically a core design that is made at the
start of a web design initiative. The primary layout options are: fixed,
fluid, responsive, and adaptive.
FIXED
The fixed layout option, commonly referred to as the static layout option,
establishes a hard-set value for the size of the layout. This approach was
popular years ago when web designers wanted to assure that a given
layout was an exact size.
The problem with this approach is that devices with a resolution smaller
than the fixed layout size were forced to scroll in order to fully use the
application. Conversely, those with larger screen resolutions found
themselves with a large amount of unused space around the application.
1
RESPONSIVE WEB DESIGN
one rendering 33% of the screen and the other rendering 67%, the items RELATIVE FONT UNITS
in the smaller panel may become unusable when the screen resolution One of the most important aspects to any form of communication is the
falls below the resolution needed to display the data in the template. ability to render text in a readable way. For web design, this translates
to the font that is being used. However, one of the biggest challenges is
how to best size fonts within a web project.
POINT
Long before responsive web design was concept, the idea of using
points as a size reference was popular in typography and other forms of
ADAPTIVE
publishing. The standard behind points is that one point is equal to 1/72
With web designers realizing that fixed and fluid layout options both
of an inch.
provide challenges to providing a pleasant user experience, the concept
of adaptive layout options was created. Points are fixed in their size, which presents similar challenges with
static layout options — they are not scalable and do not respond to
An adaptive layout option determines the resolution or type of device
responsive web design view ports. A simple example is displayed below:
making the HTTP request and routes to an appropriate web design
template. As an example, users on devices with low screen resolutions html {
might route to a product-list.html file in a folder dedicated to such font-size: 12pt;
devices. Meanwhile, users with high resolution desktop computers }
With the adaptive approach, several different template versions can As computers became mainstream, the concept of pixels was
exist to accommodate a wide-range of devices. The major drawback to introduced — referring to the size units being displayed on the computer
this approach is the additional time and resources required to design, screen. The standard behind pixels is that one pixel is equal to one dot
test, and maintain several versions of the same template information. on a computer monitor. Pixel-based designs became popular to render
web documents with a pixel-perfect presentation.
RESPONSIVE
Learning from the challenges presented in the fixed, fluid, and adaptive Like points, pixels are fixed in their size and present the same challenges
layout options, the responsive approach provides a solution that as point-based designs. A simple example is displayed below:
accommodates a wide range of screen resolutions without having to
html {
duplicate the effort across multiple template files.
font-size: 12px;
}
A responsive layout option breaks the screen into multiple segments.
Then, as the screen resolution changes, the segments adjust
EM
programmatically — readjusting on the fly. As a result, when the user on To address the challenges with pixel font units, em was introduced to
a high-resolution desktop resizes the browser window to a fraction of provide a scalable solution to pixel font units. Basically, em are scalable
the monitor's available space, the website still renders in a usable state. units employed by the browser to compute pixel font units. Consider the
following CSS example:
With the dominance of Bootstrap and Google Material Design, a
responsive web design has become an expectation for web-site html {
consumers — knowing they can load a site on their desktop or smart font-size: 12px;
devices without a compromise in usability. padding: 2em;
}
When the html tag is rendered, the font size would be set to 24px, which
is the product of 12 (px) x 2 (em).
REM
With respect to font units, the rem approach is similar to the em
approach — introducing a manner to determine pixel-based sizes in a computations to exist within the CSS structure. Consider the following
responsive design. The logic is the same as the em example above: CSS configuration:
html { body {
font-size: 12px; font-size: calc(12px + (20 - 12) * ((100vw —
padding: 2rem; 500px) / (1500 - 500));
} }
Again, when the html tag is rendered, the font size would be set to 24px, In the example above, the font size will range from 12px to 20px based
which is the product of 12 (px) x 2 (rem). upon view ports of 500px to 1500px. The benefit to fluid typography is the
higher degree of resizing based upon the dynamic size of the viewport.
EM VS. REM
Based upon the examples above, there is no difference between em and
rem with respect to relative font units. Where a difference can be noted
RESPONSIVE IMAGES
In responsive web design, the ability for images to be responsive is
is when multiple layers of em-based styles are introduced — since em
equally as important as the font units. However, based on the resolution
employs inheritance with all parent objects.
of the client accessing the responsive web application, image quality
On the other hand, rem is only relative to the html (root) font-size. A can become an issue — such as important aspects of an image being no
simple way to remember this key difference is to think of rem being the longer easy to notice... or available.
root-only version of em. With this distinction in place, web designers
MAX-WIDTH ATTRIBUTE
typically implement em over rem.
The quickest and easiest approach to making sure an image responds to
the size of the current container that will house the image is to use the
PERCENT
As one might expect, percent-based font units are displayed based upon max-width attribute in either the CSS or directly on the image tag:
object. Consider the following example: The challenge with this approach is that the resolution of the image may
not scale well as the size of the view area changes. Legacy browsers do
html {
font-size: 12px; not have an understanding of this attribute, which can make use of max-
} width a show-stopper.
body {
font-size: 200%
ART DIRECTION CHALLENGES
}
A challenge worth noting with respect to responsive images is the
concept of art direction. Art direction is making sure the focus or intent
In the example of above, text in the <body> tag of a web page will be
of the image is maintained as the responsive web design renders
rendered as 24px, or 200% of the size of the parent html (root) setting.
different viewport sizes.
VIEWPORT UNITS
With the viewport in place within a responsive application, the option Consider a photo of family celebrating the sunset on a beach. When the
exists to set the relative font unit based upon the viewport's size. This is image is in full view, the setting sun appears off to the right, the family is in
referred to as viewport units. The following options are available: the middle of the frame, and the remainder of the image is populated with
ocean, sand, and a darkening sky. Devices with smaller view resolutions
• 1vw = 1% of viewport width may cause the setting sun to be gone, or not noticeable — with the size of
• 1vh = 1% of viewport height the family shrinking to a portion that is no longer easy to identify. To the
• 1vmin = 1vw or 1vh, whichever is smaller user, this may start to appear as a photo of the beach near dusk.
<img src="small.png" srcset="bigger.png 750w, freedom with their responsive image design. These can be key solutions
biggest.png 1500w"> toward handling issues related to art direction.
As one might expect, this approach requires maintaining multiple For a server-side solution, Adaptive Images provides a solution that
versions of the image to handle varying device resolutions. Another delivers the right image size based on the resolution of the device
challenge to this approach is that the browser client is not an ideal making the request. Using the server-side approach eliminates the need
decision-maker when selecting the right version of the image to display. for any changes to be made on the web client tier.
<PICTURE> TAG Including these libraries in your project allows web designers the
Similar to the <img> tag noted above, the <picture> tag also ability to maintain more control over responsive images to address art
allows multiple versions to be utilized, based on a given size. Here is direction challenges.
an example:
TOOLING
<picture> If you are a web designer working on a project without access to
<source media="(min-width: 1500px)" srcset="biggest.png">
the original image creator, getting multiple image versions can be a
<source media="(min-width: 750px)" srcset="bigger.png">
challenge. In those cases, developers find themselves creating alternate
<img src="small.png" style="width:auto;">
</picture> versions of the image.
The challenge with the <picture> tag can also be browser support. To make things easier, the Responsive Image Breakpoints Generator
Plus, there is the need to maintain multiple versions of the same image. site can be utilized to generate the optimal resolution for responsive
image sizes.
OPEN SOURCE SOLUTIONS
Simply navigate to the site, upload your initial image, then use the
There are open source JavaScript libraries that have been created to
help address the challenge with responsive images. controls on the form to have the best version of your image created.
DZO N E .CO M/ RE FCA RDZ
DZone, Inc.
DZone communities deliver over 6 million pages each month 150 Preston Executive Dr. Cary, NC 27513