Performance matters, especially for the current generation of multiple megabyte websites being pushed down flaky mobile data connections. Andrew Smales has posted some really useful tips on making web pages go fast. Take note! [Visit link]
Hello. My name is John Hughes and this is my website where I write about web design and development and anything else I find interesting.
In a previous post, I described a Sass media query mixin that makes it a bit easier to generate CSS for old versions of IE that don’t support media queries. The idea was to use a global variable to decide whether or not to surround the CSS rules with min-width media queries. Modern browsers get a mobile first responsive site …
The beautiful Independent Publisher WordPress theme is now available on WordPress.com. They have made a few changes to Raam Dev’s original, but it retains a clean, minimalist design that puts content first. [Visit link]
If you haven’t seen Brad Frost’s site Death to Bullshit yet, check it out now. The more websites serve advertising networks, the less they serve human beings and that is a bad thing. [Visit link]
Jon Yablonski has written some really good front-end principles for designers. A good design process benefits everyone: designers, developers, and users. Thanks to Brad Frost for sharing the link on Twitter. [Visit link]
A data URI can be used to embed files directly in HTML or CSS as base64 encoded strings. Here is a quick PHP function to do just that.
You might have noticed that the current iteration of my site doesn’t have much in the way of design. In most respects, it is mostly text and mostly default. But choosing to avoid additional code and customization has had a number of benefits, not least in performance and accessibility.
Building a website with a content management system is hard. An over-enthusiastic client with a WYSIWYG editor and too much experience of Microsoft Word can wreak havoc on your design. Here are a few lessons I have learned about building sites that clients can update, but not break.
Mobile first responsive design applies progressive enhancement to layout, using media queries to add complexity only when the screen is large enough to use it. The lack of support for media queries in IE8 can be a problem, but one you can work around with a little bit of Sass.
Jeremy Keith makes an excellent point about progressive enhancement and properly identifying the core function of a site. It can be easy to get hung up on a single tool (e.g. a camera) and forget about what you actually want to achieve (e.g. an image). Sometimes you just need to take a step back and ask “Just what is it … [Visit link]
I stumbled across this post by Jeff Atwood on parenthood the other day and it sounded about right to me. It contains the most accurate pie chart I have ever seen. I link to it here mostly for my own amusement. [Visit link]
Here is a really useful list of terminal commands from Craig Hockenberry. For anyone who likes that sort of thing. [Visit link]
Markdown is a great way of writing HTML, but every implementation is slightly different. But perhaps not any more. CommonMark aims to prepare a definite Markdown syntax that can be used anywhere. Now Markdown is being used everywhere from README files to content management systems, this can only be a good thing. [Visit link]
Recursion is a useful programming technique, but it does risk creating an infinite loop. If your code tries doing the same thing again and again, at some point you have to tell it to stop. It should be obvious, but I find it easy to forget.
Anno Dracula by Kim Newman is a great book, extending Bram Stoker’s world to create something entirely new and thoroughly entertaining. I loved it. It also made me think about how inspiration should work, whether you are writing a novel or designing a website.
Here is an excellent tip from Sebastian Ekström on vertical aligning elements with CSS. It even works when you don’t know how tall they are. Thanks to SitePoint Versioning for sharing the link. [Visit link]
On the web, like everywhere else, advertising is a necessary evil. Someone has to pay for stuff and if it’s not you, the chances are it’s a company that wants to sell you something. That’s fine. I accept that. I like to think my intelligent brain filters it all out, but I can’t be sure it doesn’t work on some …
CSS transitions mean that we can animate practically anything, but that doesn’t mean that we should. Frederico Brigante argues that applying them to :active elements makes the UI feel slow and unresponsive. A click feels instant and the UI should reflect that. [Visit link]