© Heidi Brebels 2023
There are a few basic steps you can follow to start implementing a responsive design to your website:
THE FORMULA
There is one formula that you should remember throughout fluid foundations:
TARGET / CONTEXT = RESULT
Target is the current pixel size that you are using
A FLUID FOUNDATION
Convert font sizes from pixels to ems
Pixels are used for fixed layouts and ems are used for responsive layouts, since ems are a much more scalable unit.
h1 { font-size: 24px; } => h1 { font-size: 1.500em; }
TARGET / CONTEXT = RESULT
24px / 16px = 1.500em
Context in this case will be the standard default font size for browsers, which is 16px.
When an HTML tag is nested, however, the context changes to the element it is nested in.
h1 { font-size: 24px; } => h1 { font-size: 1.500em; }
h1 a { font-size: 18px; } => h1 a { font-size: 0.750em; }
TARGET / CONTEXT = RESULT
18px / 24px = 0.750em
Convert set widths from pixels to percentages
.container { width: 1000px; } => .container { width: 90%; max-width: 1000px; }
90% so that there is some margin between the browser and the content. Max-width to make sure it doesn't scale up.
.grid1 { width: 915px; } => .grid1 { width: 91.5%; } /*915px*/
.grid2 { width: 1000px; } => .grid1 { width: 100%; } /*1000px*/
TARGET / CONTEXT = RESULT
915px / 1000px = 0.915 * 100 = 91.5%
Creating flexible margins
.element1 {width: 100%; /*640px*/}
.element2 {width: 80%; margin: 10px; } => .element2 {width: 80%; margin: 1.5625%; }
TARGET / CONTEXT = RESULT
Context in this case is the width of the element's container 10px / 640px = 0.015625 * 100 = 1.5625%
Scalable images
Add to your CSS style sheet:
img { max-width: 100%; }
MEDIA QUERIES
Use different styles for different resolutions to optimize the user experience You take as max-width the landscape width size of the device
/* iPhone -------------- */
@media screen and (max-width: 480px) {
.grid1,
.grid2 { width: 100%; }
/* It can be confusing that links can be selected on mobile devices by tapping and holding, so use this to disable it. Don't apply this globally */
#nav ul li a { -webkit-user-select: none; }
}
@media screen and (min-width: 1000px) {} /* iPad -------------- */ @media screen and (max-width: 1024px) {}
In order for the media queries to work on the devices, use viewport in the <head> of your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
VECTOR IMAGES
When you use vector images, it's best to keep their scalability by exporting them to be SVG images. This way, they are resolution independent and will look great on whichever device. However, do have a fallback options for older browsers.
<object data="img/myimage.svg" type="image/svg+xml" class="cssclass">
<!--[if lte IE 8 ]--> <img src="img/myimage.gif" alt="myimage description"> <!--![endif]-->
</object>
Next, we need to delete the fixed file size that it set on the SVG image, otherwise, it won't scale. Open the SVG file in a text editor. On top you'll see an <svg> tag with "width" and "height" defined within those tags. Delete those. Save and Close. Next, an SVG image is not the same as a raster image (bitmap image). A bitmap image will listen to the img tag in the CSS file as we defined the max-width of the scalable images above. However, an SVG image is not considered an image, but an object. So, for scalable images, add object to the CSS tag: Add to your CSS style sheet:
img, object { max-width: 100%; }
RASTER IMAGES (BITMAP)
To optimize the quality of the raster images, there isn't a generally accepted solution yet. But, you can implement, for example, Picturefill. It's kind of like media queries for images.