Category: Basics
A series on fundamental knowledge of web development, aimed at beginners.
A series on fundamental knowledge of web development, aimed at beginners.
NB: This post is based on a briefing note I sent around at rehabstudio, the agency I work for. It’s intended to clear up some of the confusion around resolution on mobile devices with high DPI screens, especially when talking with clients, and is aimed at all roles in the agency, not only developers. As such, it may not be one hundred percent ‘correct’, but I think it does a good enough job of explaining the subject.
I recently ran into a problem involving the removeEventListener() method, which caused me a good half an hour of confusion before a lightbulb appeared above my head and I was enlightened by a solution – a solution which, it must be said, is very obvious in hindsight. So doubtless many people know this already, but I’m recording it here along with another approach I thought of afterwards, in the hope that they may be useful to someone in the future.
Harry Roberts wrote a great article, Front-end performance for web designers and front-end developers, which details various techniques for improving page load times. One thing he skips over, though, is image optimisation. There are many ways to optimise images for loading performance, including using image sprites, icon fonts, and replacing bitmaps with SVGs. But whenever you have to use bitmap images you should also optimise them before they make it to the page.
In this article I want to show a few simple image optimisation techniques I use, which are aimed at reducing the filesize of the images, and therefore speeding up your page loading times.
I’ve written some posts for the Safari Books blog, featuring practical CSS advice.
Using CSS Fonts for Adaptive Icons is the lead article, and there are two shorter tips: Making Better Print Stylesheets, and Faking Randomisation With nth-child.
We, as website makers, quite often advise our clients to avoid generic link text (read more,click here, etc.), and explain that more verbose descriptions help give context to users with screen readers. But using semantic link descriptions actually helps everyone.
I recently read Peter Morville’s fantastic book, Ambient Findability, which defined really well the motivation to use semantic descriptions for links: they give the target page aboutness.
Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).
One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.
The way to get around that is quite simple; use local() to check if the font is on the user’s system first.