Submitted by smilowsky on August 11, 2012 - 4:27pm
Subject:
Difficulty:
Redesigning a multiple column list to to CSS3 & HTML5 for responsive design and easier maintenance
This article provides an example of HTML and CSS redesign to improve a web page with a multiple column list. The code that needs to be updated came from a real website that lists author names in three columns. Through this article, several concepts of responsive web design are also introduced.
We will focus on three primary issues with the first version of the HTML and CSS to be redesigned:
- The list items have to be manually placed into separate DIV tags to create a 3-column balance, so adding or removing items from the list to maintain the columns' content balance is more work.
- The list was formatted using paragraph tags, rather than list item tags, so it is not semantically precise.
- All the measurement styles (width, font-size, margin, etc) are fixed and not responsive to different screen sizes.
First version of HTML to be redesigned
- The code is HTML4. We will refactor it to HTML5.
- There are excessive DIV tags to manage columns (tbl, tblRow, tblCol), which makes them more difficult to update. We will refactor this to a single unordered list.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Literary Characters</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="oldcolstyle.css"/> </head> <body> <div id="content"> <h1>Literary Characters</h1> <div class="tbl"> <div class="tblRow"> <div class="tblCol"> <p>William Brown</p> <p>Miss Havisham</p> <p>Rupert Campbell-Black</p> </div><!-- end tblCol--> <div class="tblCol"> <p>Julien Sorel</p> <p>Sherlock Holmes</p> <p>Nigel Molesworth</p> </div> <!-- end tblCol--> <div class="tblCol"> <p>Harriet M Welsch</p> <p>Oskar Schell</p> <p>Elinor Dashwood</p> </div> <!-- end tblCol--> </div> <!-- end tblRow--> </div> <!-- end tbl--> </body> </html>
First version of CSS to be redesigned
- We will remove table definitions, and replace them with a single CSS3 multiple column definition.
- We will change all the fixed widths (font-size, margin, padding, width) to responsive sizes.
@charset "utf-8"; #content { font-family:Arial, Helvetica, sans-serif; width: 650px; text-align: left; padding: 25px; margin: 0 auto; } /*designed for 3 columns*/ .tbl { display: table; border: 0; } .tblRow { display: table-row; width: 100%; } .tblCol { display: table-cell; width: 160px; padding:18px; } .tblCol p { font-size: 10pt; }
Second version HTML converted to HTML5
- Notice that in lines 1, 2, & 5, the HTML5 version of html, head, and meta tags have fewer attribute characters to define than in HTML4. Fewer characters mean smaller sizes and easier, less error-prone coding with mobile devices in mind.
- In addition to linking our revised CSS, newcolstyle.css, we've linked a third-party CSS called normalize "that makes browsers render all elements more consistently and in line with modern standards."
- Line 6 is the meta tag to tell device viewports to render the pixels at 100%. This is part of establishing a responsive design because we are telling smaller devices not to use a virtual viewport. For example, a 320px screen can force a 960px fixed web page to fit in its viewport, but the result is that the text gets squeezed together, becoming virtually unreadable.
- 13-25 are the easier-to-maintain unordered lists that CSS will turn into multiple columns.
- Overall, it is much cleaner, more attractive code.
<!DOCTYPE html> <html lang="en"> <head> <title>Literary Characters</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" href="../../css/normalize.css" /> <link rel="stylesheet" type="text/css" href="newcolstyle.css" /> </head> <body> <div id="content"> <h1>Literary Characters</h1> <div class="columns"> <ul> <li>William Brown</li> <li>Miss Havisham</li> <li>Rupert Campbell-Black</li> <li>Julien Sorel</li> <li>Sherlock Holmes</li> <li>Nigel Molesworth</li> <li>Harriet M Welsch</li> <li>Oskar Schell</li> <li>Elinor Dashwood</li> </ul> </div> </div> </body> </html>
Second version of style converted to CSS3 & responsive design
- In line 3, h1 font-size is set at 1.5em, whereas pixels or points would be a fixed size. 1em is considered roughly 100% of 16px font, so em translates to a decimal based percentage of 16. To get the em, we take the target pixel size and divide by 16. Content font-size in line 7 also uses this formula. Comments were added to the CSS code to show the intended font size em is based on.
- Line 8 is the responsive width, which is obtained from dividing the theoretical fixed total width of just the column section by the theoretical fixed design containing width. Here, we target an overall width of 960, with the idea that the columns will only take the ratio of 650px of that.
- Line 9 is the max-width, for example, if we don't want the web page to become as wide as a 55" TV, where our column would flow so wide that it looked like a single, weirdly spaced row.
- Because normalize.css establishes a sans-serif font, we were able to remove the previous font-family declaration for #content.
- Line 12 uses a responsive percentage, obtained by dividing the target padding of 25px from the earlier design by the theoretical fixed 650px. At different screen sizes, the ratio should maintain the intended look, as a percentage is not fixed as our screen width narrows or widens.
- Lines 18-20 define the CSS3 multiple columns for the .columns class. We use an em size which is arrived at from a target column width of 186px/16px. We have to prepend -moz (for Mozilla) and -webkit (for Safari, Chrome, etc) as those browsers currently offer only development support, and prepending the browser code is the convention they agree to use. Once a given browser has full production support, we could use column-width alone. Internet Explorer 9 and earlier version of IE do not support the CSS3 multiple columns, requiring the use of a polyfill, typically javascript written to help code to work in older browsers.
- 25-27 removes the standard list formatting since we don't want to see bullets or the margin and padding of bullets.
- 32 is a single line to fix a multiple column padding issue for our particular kind of list, though the issue might be more evident when paragraph tags are used.
@charset "utf-8"; h1{ font-size: 1.5em; /* 25px/16px */ } #content { font-size: .75em; /* 12/16 */ width: 71.875%; /* 650/960 */ max-width: 960px; text-align: left; margin: 0px auto; /*auto centers the container */ padding: 3.84615384615385%; /* 25/650 */ } /*CSS3 multiple columns.*/ /* Get em size for colums: 184/16 */ .columns { -moz-column-width: 11.5em; /* Firefox */ -webkit-column-width: 11.5em; /* webkit, Safari, Chrome */ column-width: 11.5em; } /*remove standard list and bullet formatting from ul*/ .columns ul { margin: 0; padding: 0; list-style-type: none; } /* correct webkit/chrome uneven margin on the first column*/ .columns ul li:first-child { margin-top:0px; }
Resources
- Caniuse - Find out the current level of browser support for HTML5 and CSS3, and notes in the grid if a CSS3 definition needs browser prepends too.
- "Responsive Web Design with HTML5 and CSS3" by Ben Frain
Samantha Milowsky
Samantha Milowsky is a business and technology professional working in web development, project management, and information systems analysis and design.
She works for start-ups and Fortune 500 companies as a technology consultant. Samantha's tech related posts can be found on Facebook, Twitter, and LinkedIn.