The strongest campaigns ask the reader to do one thing. A message that offers a download, a sale, an event and a survey at once splits attention four ways and usually achieves none of them.
Deciding the single job before any design work begins makes every later decision easier, because anything that does not serve that job can simply come out.
Filed under: Email Marketing, Tips · Permalink
Git's own documentation is thorough and, at the moment you need it, almost entirely unhelpful. It is organised around commands rather than around the situations people find themselves in, so a developer who has just committed to the wrong branch has to already know which command they are looking for.
ohshitgit.com inverts that. Each entry starts with the situation in plain language, then gives the sequence of commands that gets you out of it, with a short note on what the commands actually do. It is a single page with no navigation to learn, which is the right shape for something you open in a hurry.
Filed under: Git, Showcase, Web Development · Permalink
Editing files directly on a live server is fast until the moment it is catastrophic. A local environment means every change is tested somewhere private first, and a mistake costs a page refresh rather than a public outage.
It also means you can work on a train. That is a smaller argument than it sounds until the first time it matters.
Filed under: Tutorials, Web Development · Permalink
A mixin is a named block of declarations you can include wherever you need them, optionally with arguments. The value is not that it saves typing, but that it puts one decision in one place: change the mixin and every element using it changes with it.
The failure mode is a mixin so clever that nobody can read the output it produces. The examples below stay deliberately small.
Filed under: CSS, SCSS, Showcase, Web Development · Tagged awesome, codepen, creative, css, examples, scss · Permalink
Install a valid certificate covering every hostname the site actually answers on, including the www variant if it resolves. A certificate that covers the apex but not the subdomain produces a warning that is more alarming to visitors than no encryption at all.
Most content management systems store their base URL. Until that is updated, the site will keep generating absolute HTTP links to itself, and the migration will look half finished no matter what the server is doing.
Filed under: Security, Tips, Tutorials, Web Development · Permalink
Every time a shell starts, it reads a profile file from your home directory. Adding a line to that file means the line runs on every new window. That is the whole mechanism, and it is also how most terminal customisation works.
Open the profile file in an editor, add an echo command with the text you want, save it, and open a new terminal window. If nothing appears, the usual cause is that your shell reads a differently named profile file than the one you edited, which is worth confirming before assuming the change failed.
Filed under: Terminal, Tips · Permalink
Before scalable icon sets, interface symbols were images, and every size and colour variant was another file to produce and cache. Treating icons as glyphs meant a single dependency could serve a whole interface, scale cleanly, and be recoloured with the same CSS that styles text.
The headline of the new release is a redrawn set with more consistent weights and a move toward SVG delivery alongside the font, which addresses the accessibility and rendering complaints that icon fonts accumulated over the years.
Filed under: CSS, Icons, Web Design, Web Development · Permalink
Plugin recommendations date badly, but the categories do not. A content site generally needs help in four places: search metadata, security hardening, caching and performance, and backups. Everything else is specific to the project.
An SEO plugin's real job is to give you per-page control over titles, descriptions, canonical URLs and the sitemap without editing theme files. That is worth having. The scoring lights most of them ship with are worth ignoring.
Filed under: Resources, Security, SEO, Web Development, WordPress, WordPress Plugins · Permalink
WordPress decides which template file renders a request through a fixed hierarchy. Sketching which of those files a project actually needs, before writing any of them, prevents the common outcome of one enormous template full of conditional branches.
A theme is used far longer by an editor than by its developer. Field names that describe content rather than layout, and templates that degrade sensibly when a field is left empty, are what separate a theme that survives two years from one that is worked around.
Filed under: Web Development, WordPress · Permalink
An animated gradient gives a page movement without loading a video or a sequence of images. The whole effect is colour values changing over time, which costs a fraction of what any media file would.
A small library takes a list of colour stops and transitions between them on a timer, applying the result as a background. The setup is usually a container element, an array of colours, and a duration; everything else is defaults.
Filed under: CSS, Javascript, Resources, Web Development · Permalink
Web development runs on abbreviations, and most of them are learned by absorption rather than explanation. That works fine until a client, a designer or a new starter is in the room, at which point a shared vocabulary saves a great deal of circling.
API is an agreed way for two pieces of software to talk to each other. CMS is the system an editor uses to publish content. CDN is a network of servers that keeps copies of your files closer to visitors. DNS is the directory that turns a domain name into an address a machine can reach.
Filed under: Web Development · Permalink
A search engine reading a page sees text. It can infer a great deal, but it is inferring. Structured data lets the page state directly that this string is a publication date, that one is an author, and the page as a whole describes an article.
Schema.org provides the shared vocabulary: the type names and property names that describe articles, events, products, organisations, recipes and so on. The format that carries it is usually JSON-LD, a block of structured markup in the page head that does not touch the visible HTML at all.
Filed under: SEO, Tips, Web Development · Permalink
Collect enough desk photographs and the pattern is not a particular product but a particular restraint. The setups that hold up have one clear working surface, light coming from the side rather than behind the screen, and cables that have been dealt with rather than hidden in the frame.
A monitor at eye height and a light source that is not directly behind it solve more comfort problems than any accessory. Most of the rest is personal: a second screen helps some people and distracts others.
Filed under: Inspiration, Workspaces · Permalink
A useful bookmark list splits into three parts: places to solve a specific technical problem, places to check how something is supposed to behave, and places to look when the work needs fresh air. Mixing them into one list is why most bookmark folders go unused.
Developer question-and-answer communities are unmatched when the problem is specific and reproducible. The skill is in the search: pasting the exact error message finds an answer far more often than describing the situation in your own words.
Filed under: Resources, Web Design, Web Development · Permalink
The release began marking HTTP pages that collect passwords or card details as not secure, directly in the address bar. Previously the absence of encryption was communicated by the absence of a padlock, which almost nobody notices.
Moving from a missing positive signal to a present negative one is a large change in practice. A visitor who would never have looked for a padlock will read the words next to the address, and a login form sitting under a warning label is a conversion problem as much as a security one.
Filed under: Security, SEO, Web Development · Permalink
For years, layout was built with floats, and a container holding only floated children collapsed to no height at all. The clearfix was the workaround: a generated pseudo-element that cleared the floats and forced the parent to contain them.
It worked, it was everywhere, and it was in every stylesheet as a utility class that most people copied without reading.
Filed under: CSS, Web Development · Permalink