An old guys guide to building modern websites | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Wednesday, 12th October, 2011

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.

Season 2:
The estimated time to read this article is 12 minutes
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

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.