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
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s