An old guys guide to building modern websites

[S02E09] Boagworld.com is the first site I have personally coded in a long time. Things have certainly come a long way and become very exciting.

Play

When you have such a talented bunch of coders you don’t tend to code much yourself. However, when it came to boagworld I was determined to do the majority of it myself.
I had two reasons for this.

First, I believe that it is not just designers who should be able to code. I think most people involved in the web should have a good understanding of how sites are built (myself included).

Tweet by Elliott Jay Stocks suggesting all web designers should be able to code

Second, I was reading about so many cool things that I wanted to have a play. Boagworld gave me the perfect excuse to do so.

In this post I wanted to share my journey of playing with ‘the new’. I share what I loved, what I hated and what I never quite got around to.

But before I start, I should caveat everything I am about to write.

New techniques, old problems – browser support.

I am an old guy. I have been working with the web since 1994. I remember when the img tag was the latest big thing. Things have certainly changed a lot since then, but somethings never change. One of those things is browser support.

Whether it is Netscape 2 or IE7 there is always a browser that holds us back. That is why it is so important to look closely at your site analytics before you start building. Sometimes you get a nice surprise.

Browser stats for Internet Explorer on Boagworld

When I rummaged around boagworld’s web stats (as we do at the beginning of all projects) I discovered some great news. Only 9.48% of users used Internet Explorer. Of those only 17% used IE7 and 4.56% used IE6. I therefore decided not to provide these two browsers with anything other than basic styling. It felt perfectly reasonable to serve a basic stylesheet to only 2% of my total users.

Being free from IE6 & 7 allowed me to play with new CSS properties and adopt HTML5 (with a little help from HTML5shiv). Some may argue that relying on Javascript to support IE8 isn’t very accessible. However, IE8 only accounted 4.3% of users and only approximately 2% of those would have Javascript disabled.

Admittedly you might not be in the position to take this approach. However, coding becomes a lot more fun when you can.

The good

When I first started building boagworld, I felt like a kid in a candy store. I had my solid wireframes and strong design direction. It was time to start putting these together and I confess I got a little carried away. Nowhere more so than with CSS animation.

CSS Animation

I tried to be restrained and only use CSS animation subtly. However, like a web design student with his first pirated copy of flash, I started plastering animation everywhere.

I did eventually get my excitement under control and started to prune back the animation. Even so, I have left quite a lot in. Three types of animation can be found throughout the new boagworld design:

  • Image enlargement – You can rollover some images and they enlarge to provide a better view. I can imagine that on some websites this could prove useful. However, I admit this is a bit of a gimmick on boagworld.
  • Hover state transitions – In certain places rolling over some items will display a hover state. Instead of these hover states appearing instantly they fade up gradually. Originally I used this fade effect on all hover states (including links). However, interestingly it made the site feel slow and so I removed them.
  • Pulsing buttons – The primary call to action on the website is the subscribe button in the header. This now slowly pulses. The pulse is so slow you will barely notice it. However, a quick test seemed to indicate that people were more likely to click on it with this subtle animation.

Being able to introduce these kinds of subtle animations into your designs without turning to Javascript is great. A purist may argue that this kind of ‘behaviour’ should sit on the behaviour layer (e.g. Javascript) but I see this as more design than behaviour.

The obvious danger with CSS animation is that we overuse it. The last thing we want to see is a return to the world of animated gifs and marquee tags. It is worth noting that with the exception of the very subtle pulsing buttons my animation is triggered only on user action. Personally I feel this is a good rule of thumb.

Of course, animation is not the only cool feature CSS now offers.

CSS gradients, shadows and corners

Oh joy of joys! No more tiny images that eat away at performance for the sake of rounded corners, drop shadows and gradient backgrounds. Being able to add these design elements without resorting to images is just a wonder.

It improves performance, reduces the number of assets and cleans up your code. What more is there to say.

Best of all there are some great tools out there to do all of the coding for you.

CSS3 Generator

Now you can add beautiful shadows to all those gorgeous web fonts that are now available.

Web fonts

Were they to make a TV series called “the grumpy old men of web design” web fonts would have surely have been at the top of the list. What was so annoying about fonts on the web was that the biggest hurdle was licensing not technology.

But we have them now, so let us rejoice and be glad. They certainly made a world of difference to Boagworld, allowing me to use a font very similar to that used for the Headscape branding.

Best of all, whether you are using Google fonts or a service like Font Deck, web fonts are simple to implement. However, the old man in me feels obliged to say that web fonts are not everything. Good typography is about a lot more than choice of face. There has been some great online typography before web fonts and I am sure there will be some terrible examples that use the technology.

Fontdeck

But web fonts were not the only improvement in typography I made use of on boagworld. There was also rems.

REM

I bloody hated ems. The maths involved made my brain dribble out of my ears. However, despite that I knew they were important. I knew that allowing users to resize type was important from an accessibility point of view.

Fortunately Jonathan Snook introduced me to REM just before I started building boagworld.

Font sizing with REM by Jonathan Snook

The problem with ems was a simple one. If you wanted to make a piece of copy appear to be 14px, you would have to calculate the ems value based on all its parents. This got complicated for deeply nested items. With rem that problem goes away.

When you set the text size of a particular piece of copy it is set relative to the HTML element, not its immediate parent. This makes life so much easier. Now you can still think in pixels but allow users to resize text.

I love rem because it makes your code so much easier to understand. Much in the same way as HTML5, which has helped bring about the demise of the DIV.

The demise of the DIV

One of the best things about building the new boagworld website is building it using HTML5. HTML5 has a lot of advantages over its predecessors, but the one that I personally find the most satisfying is the readability it introduces to my code.

Before HTML5 my code was div-tastic and I hated it. I tried to keep things tidy by putting comments after each closing div explaining what it related too, but inevitably things ended up a mess.

With the introduction of new semantic tags such as section, header, article, aside and footer, code suddenly makes so much more sense. Although I still use DIVs in places, generally code seems much easier to read.

Not that it is just the HTML 5 tags which makes my code easier to read. It is also some of the new CSS properties.

New layout approaches

One of the most exciting changes I was able to implement on the new Boagworld Website was giving floats the flick. When I moved from table-based design to CSS layout, one of the most challenging parts of the transition was getting my head around floats. To this day they are a momentous pain in the arse.

Fortunately, because I discovered that I could drop support for Internet Explorer 7 I was able to use a number of alternative layout options including display: table–cell and display: block–inline.

Block–inline has become my primary tool for creating multiple column layouts.

Table–cell has proved invaluable when you need two columns to have the same height. Another use for table-cell is when you want to equally space navigation items across the entire width of the page.

In my opinion these new layout approaches are the biggest reason for wanting to renegate Internet Explorer 7.

Talking of navigation there is one other CSS property I have embraced with enthusiasm.

nth child

The nth child property has helped clean up my code by removing unnecessary classes such as “first”, “last”, and “odd”. Typically I used these classes to identifying the first or last item in a list or the odd and even rows in a table that I would like to styled differently.

Using the nth child property I was able to style these elements without adding superfluous markup.

It may not seem like a big thing but for somebody who hasn’t coded HTML and CSS for a couple of years this was incredibly satisfying.

Not that everything is now a bed of roses. There are still some things that frustrate me.

The Bad

There is no doubt that things have improved a lot over the last couple of years and that they will only get better in the years to come. However while building Boagworld I did encounter a few things that frustrated me. My hope is that by sharing them here you will not feel so alone if you encounter those problems and that maybe some of you even have some solutions for me.

Here are the things the particularly frustrated me.

  • Percentages for layout: When building a responsive website working out the percentage widths of screen elements can get frustratingly complicated. Surely some smart Alec can build an application that calculates all this stuff for you?
  • Browser glitches: I noticed that CSS animation in particular would occasionally create frustrating little rendering issues in some browsers. For example I still get the occasional visual flicker when a user interacts with some screen elements on the Boagworld Website.
  • Confusion over using certain HTML5 tags: As I was using HTML 5 for the first time I spent a lot of time reading up on how the new tags should be used. Unfortunately I was seeing a lot of disagreement and I think it will take time before common consensus emerges over best practice.
  • Font rendering: Although I was incredibly excited to use web fonts it was slightly disappointing to see the rendering issues at some of these fonts were having on certain operating systems and browsers. I still think there is a long way to go in this area and I’m sure we will see font foundry’s adapting their fonts to be more suitable for the web.
  • Still no variables: It still amazes me that CSS does not natively support variables. It strikes me that this would be incredibly useful and significantly reduce the amount of code we need to write, so making sites download faster and code more readable.

Interestingly, when it comes to this last issue, I have since discovered that perhaps a bit more research on my part would have paid off.

The “should have done’s”

One of the problems with the web moving at such an incredible rate is that it can be hard to keep up with the latest techniques and you inevitably discover something mid-project that is too late to implement. For me that was LESS and the Semantic Grid System.

These 2 technologies combined solved 2 of the things that frustrated me.

LESS extends CSS with dynamic behaviours such as operators, functions and those variables I was so desperate to have. For me this would have opened up a world of possibilities. Unfortunately I did not discover LESS until well into the build process.

LESS website

Combined with the Semantic Grid System, LESS also solved the mind bending maths involved in developing a responsive grid system. Admittedly there are other responsive grid frameworks available. However, these all involve superfluous markup and so I rejected them for use on Boagworld, instead building everything from scratch.

Semantic Grid System Website

Because the Semantic Grid System is built upon LESS it means it can avoid the need for superfluous markup and so would have been perfect for my needs.

Although it is too late to use these technologies on Boagworld, I will certainly be considering them for any future projects and would suggest you do the same. To read more about LESS and the Semantic Grid System I recommend smashing Magazine’s article entitled “The Semantic Grid System: Page layout for tomorrow”.

Conclusions

I have loved building the Boagworld website. Although it has been frustrating at times, like modern exams, things are so much easier than in my day! Although I recognise that I was in a somewhat privileged position by not having to support Internet Explorer 7, it has given me a taste of what is to come.

If like me you have been building websites for years, I would encourage you to take the time to ensure your skills are up-to-date and you are aware of the latest tools available. Ultimately it will save you so much time and effort.

Click here to read a complete transcript of the show

  • Philipp Kruft

    Congrats on the new boagworld site. You did a really good job, i quite like it. 
    I only noticed the pulsing of the buttons when it was mentioned – so that’s alright. The disappearing Sidebar on the articles confused me quite a bit however. As much fun it might have been to put it in – i think it would be better without, sorry. 

    One remark about font-rendering: my testings showed, that every browser on a windows system has massive problems with font rendering of  (at)-font-face fonts except – and here the surprise – IE9 and above. On Firefox and Chrome the fonts didn’t look smooth at all, only IE9 displayed nice smooth fonts like every browser on mac os does.  So, i don’t see the reason in including nice fonts that look great in PS and on Mac OS but just look bad for most of the visitors. 

    Your page looks gorgeous on my mac os chrome but on windows .. not really ( http://cl.ly/2B3P2b0g3u0C3A3g1P1P )

    Thanks for the nice show. It was a pleasure listening to it.

    p.s.: You were wondering, why Marcus had joined this show, but it’s damn easy: otherwise he would have been missed. And i think that Dan doesn’t quite show enough respect for you, make sure you don’t let the leash get too long ;)

  • Philipp Kruft

    Congrats on the new boagworld site. You did a really good job, i quite like it. 
    I only noticed the pulsing of the buttons when it was mentioned – so that’s alright. The disappearing Sidebar on the articles confused me quite a bit however. As much fun it might have been to put it in – i think it would be better without, sorry. 

    One remark about font-rendering: my testings showed, that every browser on a windows system has massive problems with font rendering of  (at)-font-face fonts except – and here the surprise – IE9 and above. On Firefox and Chrome the fonts didn’t look smooth at all, only IE9 displayed nice smooth fonts like every browser on mac os does.  So, i don’t see the reason in including nice fonts that look great in PS and on Mac OS but just look bad for most of the visitors. 

    Your page looks gorgeous on my mac os chrome but on windows .. not really ( http://cl.ly/2B3P2b0g3u0C3A3g1P1P )

    Thanks for the nice show. It was a pleasure listening to it.

    p.s.: You were wondering, why Marcus had joined this show, but it’s damn easy: otherwise he would have been missed. And i think that Dan doesn’t quite show enough respect for you, make sure you don’t let the leash get too long ;)

  • http://www.zvirenapapire.cz Marek Beniak

    Greate article. And I really mean great. I was struggling with some new things (LESS, HTML 5 support etc.). And this really got me going. I’m just working on my blog redesign. Nice work with Boagworld too.

    I don’t support IE6 at all. I just don’t want. I have a little message for users with IE 6+7. Don’t think there’s reason to have this browser. It should work on these browser but I don’t mind if it is broken a bit. Working hard on optimization for very old browsers just makes users have them. 

  • http://www.zvirenapapire.cz Marek Beniak

    Greate article. And I really mean great. I was struggling with some new things (LESS, HTML 5 support etc.). And this really got me going. I’m just working on my blog redesign. Nice work with Boagworld too.

    I don’t support IE6 at all. I just don’t want. I have a little message for users with IE 6+7. Don’t think there’s reason to have this browser. It should work on these browser but I don’t mind if it is broken a bit. Working hard on optimization for very old browsers just makes users have them. 

  • http://agaric.com benjamin melançon

    Right on with everything, except before settling on LESS take a look at SASS, preferably primarily because of Compass: http://compass-style.org/

  • http://agaric.com benjamin melançon

    Right on with everything, except before settling on LESS take a look at SASS, preferably primarily because of Compass: http://compass-style.org/

  • http://twitter.com/PechGehabt PechGehabt

    Hey Paul, Marcus  and all you readers. Inspired by your great podcast we just launched our new company website which is fully Responsive Design. Love to hear your feedback…

    http://www.naw.info

  • http://twitter.com/PechGehabt Thomas Esders

    Hey Paul, Marcus  and all you readers. Inspired by your great podcast we just launched our new company website which is fully Responsive Design. Love to hear your feedback…

    http://www.naw.info

  • http://twitter.com/yanni_boi Yan Loetzer

    I’m actually just a little bit upset (having recently heard this podcast) to find that the ‘Subscribe’ button is no longer pulsing…. :P

  • http://twitter.com/yanni_boi yanniboi

    I’m actually just a little bit upset (having recently heard this podcast) to find that the ‘Subscribe’ button is no longer pulsing…. :P

Headscape

Boagworld