I love the Observer magazine’s new layout design, particularly the use of mixed fonts and bold header styles.
It got me thinking web design and how new techniques such as CSS3, HTML5, jQuery and Typekit (or more generically type replacement techniques) are allowing for much richer designs and interfaces to be applied easier and more semantically. This is a very good thing, sure with a combination of markup, classic javascript and background images (sprites) we can get pretty complex designs applied, yet it always felt slightly ‘wrong’. Having to create 4 nested divs and negative margins to create a scalable, rounded corner box just felt icky and too heavy to feel proud of actually constructing something out of divs and gifs.
Also fonts, sigh, having to deal with 4 or 5 fucking fonts for a decade is really frustrating, sure we can use images, flash placement etc etc, yet again having to pad my code with so much stuff just to get a font outside, Verdana, Helvetica and Arial (and a few others plus a few sans-serif fonts Georgia, Times et. al.) again seemed like a large overhead and had too many disadvantages (flash issues, slightly non-accessible) to be used unless really necessary (brand guidelines, client preference).
Anyway that’s part of the history and frustration, but then the future started to push through. CSS3, HTML5 and font replacement has been tantalisingly close for what seems like ages. For me the need to carry on supporting IE and it’s backwards and verging on the offensive support from emerging standards has kept front-end development frozen in time, attempting to create increasingly complex and exotic work arounds to achieve new methods for building new web designs (that are not restricted by standards only imagination). Yet there seems to have been a change in heart over the last six months, maybe it’s a tiring of support for a browser that refuses to embrace modern standards, maybe a need (user) or desire (advanced interfaces) to use modern techniques to take the web to the next level and be damned the browser that refuses to grow-up.
Certainly my feelings have changed, where once I felt all users deserve an equal experience (functionality and form), I now feel that if a user chooses to use a browser that doesn’t support modern technologies then why should they expect them (one wouldn’t expect ABS brakes or power steering in an antique car). Ofcourse some people do not have the choice to move away from Internet Explorer, and I do sympathise with those users, yet again, that should not mean we shouldn’t experiment or push the boundaries, I don’t want to be 40 before I can use native rounded corners in CSS. Obviously this is not an approach I take to client sites or important functionality. I believe in the Aggressive Graceful Degradation model where the site is still accessible, readable and usable, but if Internet Explorer users don’t get rounded corners on a form button then will I or they lose sleep at night, well probably not. Hey maybe the proliferation of these more advanced sites will encourage Microsoft, Organisations and Users to upgrade or move away to something more suitable to the 20th century (low-shot I know – but hey)
So people with modern browsers get the treats, like people with modern televisions, computers, mobile phones, and cars get the treats of modern technology. We wouldn’t expect to be able to get HD on a CRT monitor, so why should all users get the same interface?
Also for my own personal development it’s important I keep up with new emerging standards, If I stand by and await for Redmond to grace the web with a decent browser then it’ll be too late for me to catch-up with people that have decided to launch fully into the HTML5 and CSS3 world, especially those which have been brought up on Firefox and Safari (launched 6 years and 7 years ago respectively).
All of this is a very long way of saying I am looking at new techniques and methods to deliver richer designs in html and css. Anyway back to the beginning of the article, the Observer Magazine redux and how much I liked it and how it could be done in native HTML/CSS with more advanced techniques. So I thought I would give it a try, by using typekit to deliver the fonts and CSS to get the rounded corners. First the original (examples from The Magculture blog)
So thinking I might be able to take care of the circle via -border-radius declaration, with a border radius of half the width and height of the block element in question. But then using a mixture of absolute positioning, margin, padding, z-index and background-image for the border (I had trouble with the simple border declaration and the stack order of the various elements). The benefits of this approach is it’s really easy to change the background colour of the circle element and ofcourse the text as style is set by css not markup or images.
All in all it’s just simply lovely to be able to see a technique in another medium not restricted by technological standards and replicate it in a nice clean(ish) way in CSS3/xHTML/TypeKit – the future is starting to look really quite exciting and I haven’t even really touched on HTML5 yet 🙂
So here is a screen-grab of the header:
And the mark-up (click here to view the demo on a standalone page):
Food & Drink
Heading: The detail
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Something Something
And the CSS:
/*section colors*/
#magazine-header span.orange {background-color:#dc8100;}
#magazine-header span.red {background-color:#e00000;}
#magazine-header span.pink {background-color:#d800a3;}
/*magazine style header*/
#magazine-header {
position:relative;
width:100%;
background:transparent url(bg.gif) 0 bottom repeat-x;
height:120px;
overflow:hidden;
}
#magazine-header span.caption {
text-align:center;
color:#fff;
display: block;
width: 120px;
height: 120px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
position:absolute;
bottom:-15px;
right:20px;
z-index:100;
}
#magazine-header span.caption em {
display:block;
padding:40px 25px 0;
font-family: "bello-pro-1","bello-pro-2",sans-serif;
line-height:20px;
font-size:20px;
}
#magazine-header div.excerpt {
width:auto;
display:block;
position:absolute;
bottom:20px;
margin:0 350px 0 100px;
}
#magazine-header div.excerpt h2 {
font-size:14px;
font-weight:bold;
margin:0;
text-transform:uppercase;
font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
margin:0 185px 0 0;
}
#magazine-header div.excerpt p {
font-size:12px;
line-height:14px;
padding:0;
margin:0 185px 0 0;
}
#magazine-header h6.meta {
color:#fff;
position:absolute;
bottom:0;
right:135px;
line:height:1em;
font-size:10px;
margin:0;
font-family: "bello-pro-1","bello-pro-2",sans-serif;
}
#magazine-header h6.meta span
{
color:#fff;
font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
}