New box model army

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)

Observer magazine

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:

Observer magazine - CSS and HTML

And the mark-up (click here to view the demo on a standalone page):

Food & Drink
pie chart - mmmm pie

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";
	} 

A WYSIWYG is a blunt instrument

Yeah so I am obviously more than a little bias on this and have somewhat a headstart regarding building websites as it’s my day job. However in my opinion HTML and is styling sister CSS should be one of the most important tools to anyone that creates content online. HTML/CSS are some of the fundamental building blocks of the web and they are not likely to go away anytime soon (even in internet time). Now I’m not talking about the kitchen sink here such as floats, background-colors, clearing divs and valid xHTML strict markup, but the basic tags and styling elements like <p>, <h1>, <strong>, <em>, <ul> or <li style=”color:red;padding-bottom:10px;list-style-type:disc;”> that can bring to life a blog post, a news item, an article or basically any website based around a CMS. Most CMS’s allow for a html view as well as a visual editor such as wordpress’s own:

More often the tools for managing and publishing content online are handed back to the people that operate within the company rather than a web design/development agency that built the site in the first place. With the web agency model changes can cost alot and take a long time for the request to be carried out. This handing back control is a great thing, meaning errors are fixed more quickly and more content is produced by the people within the organisation as barriers to production are reduced. But also quite often we find the the user wants more than what the visual editor allows, headings or fine manipulation of the content (image sizes, additional padding or unwanted content that appears with embeddable content). Now it’s possible to extend these visual editors, add more buttons, more rules in the main css file. However this is simply an abstraction and can’t possibly cater for all eventualities.

The answer in my opinion is that a basic understanding of HTML and CSS is an essential tool for employees and user generated content in general. Most comment textareas allow for simple styling, this can make your comment stand out, become more readable or attractive, as well as your own website’s content. How many times have you seen blog posts with too much space or elements buffering up against one and other (this may just be me though) and been distracted by it?

I am not going to go into HTML 101, there are plenty of resources out there for that. But here are a bunch of tags and css styles that I think should be part of any content producers toolbox:

Headings
<h1>This is the largest heading</h1>
<h2>This is a slightly smaller heading, maybe a sub-heading</h3>
<h3>This is an even smaller heading, maybe a section heading</h3>
<h4>This is probably a sidebar heading</h4>

e.g.

This is the largest heading

This is a slightly smaller heading, maybe a sub-heading

This is an even smaller heading, maybe a section heading

This is probably a sidebar heading

A guide to heading hierachy:

Text formatting

<p> – A paragraph, most default css will add padding to the bottom of a paragraph, so if your content is publishing as a huge block of text the WYSIWYG is probably just adding one <br /> (a line break rather than a paragraph) – you may need to click to HTML view and remove the br’s and wrap each paragraph in <p> and closing with </p> – most HTML tags need to wrap the content they are containing, otherwise the browser will continue in that context, so no closing tag and the rest of the page would be considered a paragraph and potentially confuse the browser

<br />  – A line break, see above, one of the exceptions a this is self closing

<strong>  – make the content bold <strong>this is bold</strong>

<em> -make something italic <em>this is italic</em>

<ul> – a list container

<li> – a list item

combine them for

<ul>
<li>list item</il>
<li>list item</il>
</ul>

e.g.

  • list item
  • list item

<a> – a link, one of the building blocks of the web, this  tells the browser where the text inside the <a> where the link should point to <a href=”http://www.google.com”>Google.com</a> – here we see the first attribute for a tag, some additional information informing the browser what it should do with that tag. in this case the link should point to Google.com

<img> – an Image  – maybe it’s too big and you don’t/can’t/won’t go to an image editor (by far the best method – but that’s another blog post) so <img src=”mygreatphoto.jpg” width=”150″ /> change the width and it will scale NOTE uploading your 10 megapixel holiday snaps and resizing to 100 pixels is not cool, also be careful of aspect ratios, if the height and width attributes are both present changing one with stretch the image.

<blockquote> – put something in a quote

Tables

<table> – if you want to display some data perhaps many CMS’s don’t have great or any table editors. Now the code is a little tricky but basically it follows something like this (not strictly accurate, nor standards compliant but we have to start somewhere and this will work):

<table>
<tr>
<td>Heading one</td>
<td>Heading two</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>

e.g.

Heading one Heading two
Value 1 Value 2

TR are rows and TDs cells much like excel.

Right so that’s the basics of HTML but what of CSS, now this is a bit more of a nebulous beast, but we can cover some of the basic styling concepts, now ideally CSS would go in a stylesheet  – a file linked within the webpage that sits of the server and isn’t really accessible for editing within the CMS – so for this we will need to inline styling (certainly not ideal, markup and styling where possible should be separated as this makes for cleaner, efficient, faster and more accessible code, but we are talking about people with access only to the CMSs hre). The CSS can be applied to the directly HTML tag but use of the style attribute, e.g

<p style=”padding-bottom:10px;”>some text with some extra padding</p> -  this will add another 10 pixels (the default mesurement for much web design)

<p style=”color:red;”>I’m red text</p> – colours the text red, note the american spelling or <p style=”color:FF0000#;”> the code is called a HEX color and is a representation of any of 16 million colours (thus a code and not a name). See here for a nice long list of colours you can also use.

e.g.

I’m red text

Alignment: maybe you want to align some text, or an image.

For text:

<p style=”text-align:left;”>align left</p>
<p style=”text-align:center;”>align center</p>
<p style=”text-align:right;”>align right</p>

e.g.

align left

align center

align right

For images:

<img src=”myaweslomeimage.jpg” style=”float:left;” />, <img src=”myaweslomeimage.jpg” style=”float:right;” /> – note the text will ‘wrap’ around the image.

Font size, increasing the font size can be something often the CMS will not allow, this can be mostly to ensure there is a consistency in the output of the content, the same can be said for the font. But there may be a legitimate reason for this being required:

Font size:

<p stlye=”font-size:16px;”>A bigger piece of text</p>  – note that most text on the web will be around 12-14px depending on the site. So 15px 16px 17px will be ‘large’ text, 12px, 11px 10px will be ‘small’ text.

e.g.

A bigger piece of text

Font type, now this is one to be taken rather carefully, not only are there very few fonts to choose from (for far too many reasons that I care to go into lest I bore you more that I already have) but using too many fonts on a size can be confusing and not very pretty. However a well placed header in Georgia can really bring the content out:

<h2 style=”font-family:Georgia,”Times New Roman”,Times,serif;”>A serif heading</h2>
<h2 style=”font-family:Arial,Verdana,Helvetica,sans-serif;”>A sans-serif heading</h2>

e.g.

A serif heading

A sans-serif heading

The reason we put three or for fonts down is because the user’s computer may not have that particular font available so in that case the next font on the list is used and so on.

Now that’s really only a taster, but for many purposes you won’t need too much more, the WSYIWYG although an excellent tool, is a blunt instrument, it tries the best it can but for those instances where you need a more precision instrument, HTML and CSS is the best way to go, click thew HTML view and delve about, there will be a lot of stuff in there and it can be quite daunting, but with practice the results will be better styled and robust content with less rendering errors.

Common ie6 fixes

Like many I tend to come across ie6 rendering bugs and like many have developed my own (read others) set of techniques to overcome theme.

Correct doctype, with full correct DTD, transitional or strict (solves so many issues without having to change anything):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reset stylesheet (via Eric Meyer) the goal of a reset stylesheet is “to reduce browser inconsistencies” see here for a deeper explanation, again solves many many issues and enables a new build to start from the same starting point on every browser by resetting common element behaviour.

/*
=Reset
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;font-weight:inherit;
font-style:inherit;font-size:100%;font-family:inherit;
vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

And some other fixes I have picked up

/* -------------------- */
/* =IE6 FIXES */
/* ------------------ */
img {border:none;display:block;}
/*display block to avoid IE6 whitespace on inline elements
due to baseline spacing (for descender space),i.e. images*/

.inline {display:inline;}
/*used to fix IE6 double margin bugs*/

.haslayout {height:1%;}
/*used to fix IE6 haslayout bugs*/

.button {overflow:visible;display:block;}
/*add this class to form buttons with issues*/

a, a:link, a:visited, a:hover, a:active {color:red;}
/*link styles should be in the order LVHA esp for IE6 to display them well*/

Also, avoid/beware overuse of widths, heights, margins (esp with floats), too many position: relative’s (esp. nested position:relatives), widths + heights + padding + margin (box model issues, add padding/margin to fixed-width child elements). There are many more issues and many other ways to solve them, but generally most can be solved via fairly well documented locations, a good one here, otherwise search on google.

Adiós ie6

Sorry ie6, your names not down your not coming in.

ie6 is ancient, crap and quite frankly I can’t be bothered, not when it’s my own site. I deal too much with that in my day job to be arsing about with rendering bugs and bad programming in my own time.

So for ie6 users I have applied “Aggressive Graceful Degradation” via Andy Clarke and his Universal Internet Explorer 6 CSS.

The site is still very accessible via IE6, but just no visual goodies. There have been too many advances in css for me to stick with 6 year old knowledge, to allow me to grow professionally I need to be able to play with the new toys. I mean it’s not too much to ask for li:last-child or input[type=”button”] is it?

So if you are an ie6 user, just think of it as a realllly minimalist version of the design, or if you want to see websites not framed via technology from the last century upgrade now.

For those not using satan’s own browser, screengrab below:

ie6

clear:both

I’ve abandoned this blog for too long, my excuse being twitter took over my general communications attention and I have built more blogs in the last year and a half that the rest of my online career put together (about 250 odd blogs in just over a year).

The main driver for this was leaving publishing after eight long and enjoyable years in publishing to join Headshift Ltd. a social business consultancy (thus the multitude of blogs). I’m loving it, but haven’t felt the desire to blog much, I guess a coals to Newcastle type issue.

Yet it’s time to return to blogging, both as twitter, although an excellent tool is just that, a tool among many others that each have their own benefits and disadvantages. So as it’s a new chapter in this blog, it felt necessary to refresh the focus and design. Which has culminated in a more tumbler-esque feel (yeah, a bit obvious I know) in the sense that there are different types of blog entry; video, image, post and code (and maybe others in the future). That last category is because I want to speak more about code and my professional practice more, specifically css/xhtml/jquery as well as other concerns such as ux, interaction design, development (front-end + back-end) and all the bits inbetween (i.e. the issues with how those practices interact).

So I have categorised this post somewhat incorrectly as ‘code’ just because I can, to justify it, some css I use far too often, it’s generally non-semantic, there are other probably better methods (overflow:hidden on container for self clearing) but sometimes there is nothing more satisfying that popping this into a container after floated elements and see that bad boy get into line.

/* -------------------- */
/* =Clearing */
/* ------------------ */
.clear {clear:both; line-height:0; font-size:0; height:0;
padding:0; margin:0; border:none;}

Oh and btw, haven’t tested this in the IEs yet – not sure if I will (i will but I just want to be mean). Although they will be getting graceful degradation for the nicer more advanced bits on this design; you can’t make black&white tv’s show in colour so why try.

Right, hopefully it won’t be 6 months before I post again.

2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004