About agtb.net v3

A look at the design and development for version three of agtb.net, this website.

My new design has a minimalist feel with what I hope is a friendly finish. I wanted to prioritise content so I’ve taken care to work with the typography and how the line length affects readability.

I’ve incorporated concepts that I find interesting such as golden rectangles for the proportions of the areas of the page and images. I find the grey is neutral to warm and works to highlight the accent colours.

Responsive Design

I’ve taken a mobile first approach, starting with a website that works on small screens without loss of features and added to the layout as screen size allows. Resize your browser to see what happens.

There are approximately three variations determined by viewport width. The smallest (e.g. mobile) is one column, has slightly reduced text size, and the top menu is folded into a button (top right). The second (e.g. tablet) regains normal text size and performs other tweaks. The third (e.g. desktop) adds a second column for a right sidebar or space for articles and a full top menu.

The superb polyfill respond.js provides Media Queries support for Internet Explorer <=8 and older browsers, which otherwise could have been a sticking point for me.

Typography

I wanted simple and elegant typography with an emphasis on legibility on all devices. Like anyone who endured the dark ages of web safe fonts (you have a turnip), font stacks (you swap your turnip for a similar turnip that will probably be either slightly bigger or smaller than you wanted), and font replacement (you swap your turnip for a beautiful, expensive grenade) I’m overjoyed with web fonts.

I think it’s a good idea to select typefaces at the start so they can inform the rest of the design. My process for this is to make a list of what I think could work and then test how they look as web fonts on different devices. Many that look promising turn weird and some that are pretty are not pleasant to read! But there are winners:

Edelsans for the body. Wow, what a fantastic typeface! I find it to be a perfect evolution with an elusive quality: I find it a pleasure to read at length.

League Gothic for headings. I think it works well with Edelsans as it different yet complementary. I particularly like that it’s naturally condensed so longer headings, such as the titles of articles, are visible without taking over the page.

Development

I used Initializr’s Responsive kick-start package, which is based on HTML5 Boilerplate and comes with Normalize.css (sensible CSS resets) and Modernizr (magic). It’s a good experience and it feels like a strong, intelligently-laid foundation for whatever you want to build.

My workflow was converting my Photoshop documents using Eclipse PDT (IDE) and viewing in Firefox and debugging with the essential Firebug before cross browser testing on everything available for every step that experience tells me would be open to “interpretation”.

I’m proudly using using WordPress so I briefly checked the HTML structure worked with placeholder content for the home page, articles list, and articles pages before hooking up the CMS. I still find the WordPress template hierarchy indispensable because I separate different layouts into template files. I’ve had to maintain thousands of lines of PHP alternate syntax several times before and it’s like looking for a specific twig in a nested nested nested nest of exploding nests.

I’m including a recent version of jQuery, but there hasn’t been the need for a lot of bespoke JavaScript. My portfolio is an animated, responsive carousel made possible by caroufredsel. I like how it makes the most of the full width of the screen by determining the number of items to display.

Techniques

CSS sprites for the social media icons on the sidebar. Worth doing and so much better than alarming your users by having the button they hover over disappear while their browser fetches the other image. For managing more sprites on a stable design I recommend SpriteMe.

The home page uses this technique for responsive CSS sprites for the main image. I don’t like adding superfluous markup but this was the best, cleanest cross-browser technique I reviewed and I’m happy with it.

Image optimisation

Images formats (e.g. PNG/JPEG JFIF) are chosen based on image content. For example, if the image has large solid or transparent areas these typically compress well so I favour PNG. PNGs are used when it’s likely I’ll want to re-edit the image during development (no loss of quality) or when fine detail would be marred by compression artifacts.

Image format choice is a balance. It’s important for a website to load quickly but I also want quality and retch at over-compressed tiny images (save a few KBs but lose a sale because I can’t tell which pixel is supposed to be your product).

What’s not in question is the advantage of optimising PNGs. No loss in quality but lighter size and faster performance is a no brainer! I’m currently using PNG Gauntlet, which uses PNGOUT, OptiPNG, and DeflOpt to produce the smallest PNGs I’ve seen (far superior to online services or single tools I’ve used in the past).

Standards

I think good developers recognise the value in the maxim test early, test often so I insist on Web developers validating their work with the W3C validators during development. It’s quick and easy and it’s great at disarming browser rendering problems.

agtb.net uses valid HTML 5 and CSS 3:

Plans for the future

I’d like to implement columns for text but I’m not keen on vendor-specific CSS extensions any more than I’d like to make a website for each version of each browser. They couldn’t at least come up with one experimental prefix, each organisation had to create their own to implement similar results? (Good luck to us all deprecating all that cruft!)

I’d like to revisit the CSS units for responsive design breakpoints and typography when rem, and viewport units are solid and I can test for all cases (big screens no jumbotron text, tiny screens, and incompatible browsers).

Overall, I’m happy with the design and want to shift focus for the time I have available to writing good content.