An Experiment: WIRED on iPad, Recreated in HTML5 & CSS3

In May 2010, WIRED released the iPad edition of WIRED magazine. Currently each edition is produced using Adobe InDesign.

I decided to see if I could re-create a few of the page layouts from the “iPad Edition Free Preview” included with WIRED’s app using semantic HTML5 and CSS3.

So far I have re-created the “From the Editor” column on the first page which has a fairly simple layout. (Later, if I have time I plan to tackle the second page article which has a more complex column layout.)

Since I don’t own copies of any of the fonts WIRED uses, I made do with a couple somewhat similar but much less nice-looking fonts from Google Web Fonts.

Screen Shots of HTML5 / CSS3 Layouts:
horizontal view vertical view

View live in a new window.

(To toggle between horizontal and vertical views, click the little page icon at the top of the screen.)

NOTE: Since these layouts are intended for view within iPad, they were tested only in Safari and Firefox browsers.

(Magazine page designs, WIRED logo and WIRED magazine cover image copyright by WIRED.)

Advertisements

Printing Table Headers on Every Page

I recently researched how to print table headers on every page for long html tables spanning multiple pages. Following are my findings.

Results of Table Printing Tests

(Tested in IE7, Firefox 3, Chrome 12, Safari 5 and Opera 11.)

Firefox prints table headers on each page automatically as long as table is formatted with th tags wrapped in a thead and the main table content wrapped in tbody.

Example:

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>content 1</td>
            <td>content 2</td>
            <td>content 3</td>
        </tr>
    </tbody>
</table>

The other browsers still would not print table headers on each page however so I tried Googling a bit more and found this page: http://www.xefteri.com/articles/show.cfm?id=26

I tried adding the following CSS styles based on those from the above page:

table {border-collapse: collapse;}

th, td {padding: 1px 8px;}

th
{background: #CCC;
text-align: left;}

td {border-bottom: 1px solid;}

thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tbody {display: table-row-group;}

After adding these styles, Table headers printed on all pages in IE7 as well as Firefox. Headers still wouldn’t print in Chrome, Safari or Opera however.

Unfortunately, it turns out this is a known bug in Webkit which Safari and Chrome use:
https://bugs.webkit.org/show_bug.cgi?id=34218

I couldn’t find an official bug report for Opera but so far it doesn’t appear there is currently a way to enable printing table headers on multiple pages.

Summary

So until Webkit and Opera add support for this feature, only Firefox and IE6+ enable printing table headers on every page out of the browsers I tested.

Easy Button Rollovers

A quick and easy cross-browser rollover effect for buttons. (Hover style will only work on links not on inputs for IE6.)

HTML:

<a href="" class="button">Go!</a>
<input class="button" type="submit" value="Submit">

CSS:

/* Sample Button Styles */
.button
{background: blue;
border: 1px outset;
color: white;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 4px 8px;}

/* Rollover Effect */
.button:hover
{filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75
opacity: .75;}

Structuring HTML and CSS to Make your Site “Skinnable”

Basic Tips

  • Underlying HTML code structure should be semantic and clean.
  • Look for repeated patterns, identify standard chunks of content by similar function and structure. Standardize HTML tags and class names used for these elements. Think in terms of basic reusable building blocks. Try to keep HTML structure and CSS naming schemes semantically-based but include plenty of “hooks” for flexible skinning options.
  • Separate CSS styles into two main groups: layout and design. The layout styles are the default styles which will be applied to all skinnable pages. These set up the basic structure and should be bullet-proof. Extensive cross-browser testing is vital. The second group of styles sets the design or “skin”. These consist of fonts, font colors, background colors and images, etc. To change the skin, just create different skin CSS files and swap them out. Creating new skins can either be done by writing skin CSS code from scratch or set up a WYSIWYG system to apply different visual styles (backgrounds, borders, etc.) to the standard building blocks of your web page and generate a CSS file automatically.