Posts Tagged “CSS”

Aether theme

by George Paterson.

Being a new father i haven’t had much time to write articles and have spent most of my effort working within repositories on Github.

One thing i’ve been meaning to do with this site for some time now is change it to a responsive design. This is what i’m doing with the Aether theme and i’ve updated this site with the first incarnation of that theme.

jQuery HTML5 video background 1.3

by George Paterson.

Release 1.3 is now available on GitHub. This release includes a number of improvements to the code including requests from ursbraem, Colin-Insivia and papandreou.

Tesco Direct launch

by George Paterson.

This week marks the release of the new Tesco Direct UI. It’s been almost a year since work on the UI was completed by the team at LBi London with support from Spindrift in content management and Infosys providing system integration.

The team i was fortunate enough to lead included permanent members Ray Brooks, Lee Ryan, Aaron Faber with Sam Clohesy leading project management. The project wouldn’t have started without Will Howat’s development review which should a number of issues that LBi London were asked to resolve.

America’s Cup site released

by George Paterson.

This week we at LBi London released the first phase of the new America’s Cup website. I had the opportunity to work with the hosts of the oldest active trophy in international sport as lead interface developer, with a team including Francesca Mancuso, Aaron Faber, Jamie Collins and Pia Gamon.

The site itself was built on EpiServer; which means .Net development and some of .Net’s more interesting aspects (web forms etc). What we produced is a HTML5 based site that is progressively enhanced using CSS and JavaScript. We couldn’t use all the elements HTML5 supports because we couldn’t be reliant on JavaScript for presentation in IE7 and 8. JavaScript development utilised jQuery and jQuery UI libraries.

This is only the first phase of ongoing development, with performance improvements including minification and new features for the site but an important first step in supporting one of the great yachting competitions.

CSS sticky footer

by George Paterson.

A number of web site designs require the page footer to stick to the bottom of a page, no matter the content. There are other solutions but after using a min-height solution for a number of years i have found it to be the most robust.

The increasing maturity of the browser market means the CSS has simplified to using min-height only. There are alternative solutions for min-height support using JavaScript, alternatively should the CSS fail it should not cause a significant issue to site usability.

Cargo cult CSS resets

by George Paterson.

In my previous article cargo cult science and web development, i talked about Richard Feynman’s excellent announcement address on cargo cult science, referencing the cargo cults and how web development can suffer from cargo cult development.

I didn’t give a specific example at the time because the one i offer now is rather contentious and i didn’t want it to draw away from the understanding of cargo cult development.

CSS resets, as investigated by Eric Meyer and others, is a style sheet used by a developer to set a cross browser baseline style. It removes any styling that may be applied by the browser rendering the elements in to a controlled initial state. The principle is that the developer is now in full control of styling for all elements on the site.

Cargo cult science and web development

by George Paterson.

In 1974 Richard Feynman gave the commencement address at Caltech and coined the phrase cargo cult science. Cargo cult can be used to describe any process using a flawed model of causation.

The term cargo cult is used in anthropology to define the religious cults that spring up in the wake of a technologically advanced society interacting with a technologically primitive society. Most recently this happened during World War II in the Pacific South West when Allied and Japanese forces created military bases on islands with limited previous contact with the modern world. The military base would commonly use air fields to import war materials.

The technical details of why and how the air field is set up would be beyond the basic understanding of the local populace but they would be able to see the process and witness the outcome which would be bountiful supplies of cargo brought in from the sky.

Cross browser display inline-block

by George Paterson.

While drinking stout at @pubstandards on Thursday, we did broach the subject of code. While talking about equal height list items which have traditionally been difficult to work with, I raised an interesting technique that doesn’t seemed to have got much traction.

Instead of using floats to line up your items in rows, where varying heights that can tangle the floats, use display: inline-block.

Web Fonts – Em square

by George Paterson.

To properly understand how to typeset web fonts it is necessary to understand how the font fits with the other structures on the page.

The em square is a fundamental property of a web font, the square is a container for a two-dimensional coordinate system. Each unit of this grid is called a font unit, the greater the number of font units per em square the greater the resolution of the font.[1]

Web Fonts

by George Paterson.

With the @font-face CSS declaration now supported cross browser it is possible to attach fonts to web documents. Implementation though is a maturing subject supporting a number of different formats. Some background and techniques are described in this article.

Font formats

TrueType

TrueType is a spline-based font standard originally developed by Apple.[1]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.

OpenType

OpenType was developed by Microsoft with Adobe contributing and was intended to supersede TrueType.[2]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.

Embedded OpenType

Designed by Microsoft to be embedded into a web document, the file is an encrypted OpenType or TrueType font that has a list of allowed host domains compiled into it, the font can also be subsetted when the EOT is generated. Since EOT is a propriety format it was rejected by the W3C.[3]

EOT’s are generated by Microsoft’s Web Embedding Font Tool.

Supported by Internet Explorer 4+.