The end is nigh. Image: Almita Ayon/Flickr.

With Opera moving to Google’s new Blink rendering engine, which, despite the name, does not support the blink tag, Mozilla finds itself in the strange position of having the only rendering engine that does in fact parse and display blinking text like it’s 1996.

Originally conceived (and implemented) as a drunken joke, blinking text isn’t just bad usability — usability guru Jakob Nielsen famously called <blink> “simply evil” — it can potentially induce seizures. Even if you aren’t prone to seizures, blinking text is downright annoying.

But while few may mourn the passing of the <blink> scourge, really, where would we be without it? Despite never being part of any HTML specification the blink tag managed to take the early web by storm, driven especially by the design prowess of early Geocities homepage creators.

Indeed without <blink> would there have been a Geocities? And without Geocities would there have been a MySpace? And without MySpace would there have been, well, let’s stop there.

Sadly, the end of the blink tag will not mean the end of blinking text on the web. It will ruin this fabulous Twitter Bootstrap theme we’ve had our eye on, but there are still plenty ways to get text to blink — CSS and JavaScript are both, regrettably, up to the task.

So far there’s been little protest about removing <blink> support from Firefox. There’s been some debate as to where or not the CSS 2.1 text-decoration: blink; rule should go with it (yes!), but the tag itself is most likely headed for the dustbin of web history.

Image: Screenshot/Webmonkey

Nielson’s research reveals that while more people reach for the search box to find what they’re after on a site, few of them “know how to use it.” The normally more prosaic Nielson writes:

It would certainly be nice if schools would get better at teaching kids how to search. But I don’t hold out much hope, because most people have the literary skills of an anteater (I was going to say, “a chimpanzee,” but these animals are too smart for my metaphor). Having new and varied vocabulary words spring from their foreheads wasn’t a survival skill for ice age hunters, so most people today can’t think up good queries without help.

Presumably Nielsen means literacy skills, not literary skills. That’s a pretty harsh critique, but if you’ve ever watched a less web-savvy friend or family member search for something you might be able to relate.

So how do you design your site’s search tool to help these “mediocre searchers” as Nielsen calls them?

Nielsen is critical of instant search suggestions, currently a popular way to help people using search tools. He claims that, while sometimes helpful, auto-complete tools can also be limiting because “users often view the drop-down as a mini-SERP and assume that it lists everything the site carries.”

The better way to do search according to Nielsen is to simply return product categories. The example in his report cites Costco, which, when searching for “television” will return all of its TV product categories rather than actual individual televisions. The product category links help users refine their choice and get to the televisions they actually want without having to wade through as many individual results.

It’s important to note that Nielsen is only advocating this sort of redirecting when the search term is “unambiguous and exactly matches the category.” As Nielsen notes, “until people begin to grasp the complexities of search and develop skills accordingly, businesses that take such extra steps to help users find what they need will improve customer success — and the bottom line.”

Foundation 4. Image: Screenshot/Webmonkey.

ZURB has released a major new version of its popular Foundation framework, a web development toolkit for quickly building responsive websites. The new Foundation v4 is a ground-up re-write that sees ZURB taking a mobile-first approach.

Like its erstwhile competitor Bootstrap, Foundation offers a set of HTML and CSS building blocks you can use to quickly develop basic site structure and design — layouts, typography, forms and other common design elements are all available.

There are three ways you can try out Foundation 4. You can download the straight compressed CSS and use that as a starting point for your own customizations. Alternately you can customize your build of Foundation, including only the elements you need; or you can install the SASS version of Foundation and customize it within your SASS code.

If you’re upgrading from Foundation 3 be sure to read through ZURB’s migration guide as the syntax for the grid and other elements has changed.

The real power of Foundation 4 doesn’t really come into play unless you go with the SASS option. Thanks to SASS’s “mixins” concept you can now use the grid tools in Foundation 4 without littering your HTML with the various (purely presentational) grid class names. Using Foundation 4 within your SASS project also makes it dead simple to use only the components you need, for example, you can include the grid mixins, but skip the typography if it’s not to your liking.

Be aware that the new mobile-first approach in Foundation 4 means browsers which don’t support media queries will only get very basic styling for the grid and other UI elements. Yes, that pretty much only affects IE 8. But, if your project needs more robust support for IE 8, there is a modified version of Foundation 4 with support for IE 8 (alternately, you could stick with Foundation 3).

It’s also worth noting that, because Foundation 4 is such a departure from the previous version, ZURB plans to continue supporting Foundation 3 for some time.

If you’ve got questions about Foundation 4, head on over to the official site and check out the documentation. You can also explore the code on GitHub — Foundation is one of the top 20 most-starred projects on the site.

The iPad may have started it, but the high resolution screen will soon be the norm. Photo: Ariel Zambelich/Wired.com

The rise of high-resolution screens means that web developers need resolution-independent graphics or images look blurry. For photographs responsive images may be the solution, but for simpler graphics like logos and icons there’s an easy solution that’s been with us for some time — Scalable Vector Graphics or SVG.

A slightly blurry icon or logo on a retina display probably isn’t going to drive your visitors away, but if it’s easy to fix and can potentially save you some bandwidth as well, why not?

Historically, browser support for SVG has not been particularly good, but these days SVG images work just about everywhere, except older versions of IE. Thankfully it isn’t hard to serve up regular old PNG files to older versions of IE while keeping the resolution-independent goodness for everyone else.

Developer David Bushell recently tackled the topic of SVG graphics in a very thorough post titled A Primer to Front-end SVG Hacking. Bushell covers using SVG graphics in image tags, stylesheets, sprites and even the old-school <object> method. He’s also got a great list of external resources, including SVGeezy for IE fallback, the SVG Optimizer for saving on bandwidth and grunticon which converts SVG files to PNG and data URIs for fallback images.

Head on over to Bushell’s site for more details and you can check out some of our previous posts on SVG for even more resources.

A handful of the many canvases your site will adorn. Photo: Ariel Zambelich/Wired.com

In the bad old days of just four years ago it was pretty common for mobile users to get shunted off to some half-baked, feature-deprived “mobile” version of the website they were trying to visit. This misguided practice was common (and annoying) enough that even today Chrome for Android and other mobile web browsers ship with a feature that allows users to “request desktop site.”

To make that feature work Chrome for Android changes its user agent string. Any site that uses user agent strings to redirect mobile users will no longer because to redirect them and the desktop version is displayed.

Responsive websites don’t rely on user agent strings though. Instead they adapt to screen size based on CSS media queries so even if a user has the option for desktop sites checked in Chrome they still won’t get the “desktop” site (of course with responsive sites there really is no desktop site, just a desktop layout).

Provided your responsive designs are good, this isn’t a problem (and if they aren’t then you have bigger problems). However, Opera web standards evangelist Bruce Lawson raises an interesting edge case: what about users that have never seen the mobile layout and are disoriented when they do? If you were expecting, say, the desktop layout of the BostonGlobe.com and instead saw the mobile layout for the first time you might be understandably confused. Here’s what Lawson has to say:

My reason for wondering [about turning off responsive design] is watching my dad use his Xmas Android phone and seeing his puzzlement that some sites look completely different on that device. Non-RWD sites loaded the layout he was familiar with — the desktop layout — which meant he could verify he was on the right site, he knew where in the layout the content he wanted was, and then scroll and zoom to it. When a site looked radically different, he’d check the URL bar to ensure that he’d typed in the right address. In short, he found RWD to be confusing and it meant he didn’t trust the site – no way would he buy anything from these sites.

The first thing to note is that this isn’t a problem unique to responsive sites. The same thing would crop up with a separate mobile experience. The difference is the inability to opt out of the responsive layout. An edge case? Sure, but Lawson isn’t alone in wondering about turning off responsive designs. CSS guru Chris Coyier tackled that very question last year, writing:

Why don’t we see opt-out responsive design? My guess is two-fold:

1. It’s a bit technically challenging to implement and there aren’t a lot of precedents.
2. It’s admitting you didn’t do a very good job on the responsive design.

The latter likely being the bigger factor. Like: why are we creating this responsive design at all if we aren’t sure it’s a better experience?

I would agree with both points, but clearly there are at least a few edge cases where offering an option to turn off responsive design might be a good idea. Of course it may not be worth worrying about the edge case of unfamiliar visitors — that’s the sort of decision you can only really make by looking at your own visitors and doing your own testing.

If you actually want to try it, Coyier has some ideas on how to go about creating an option to opt out of a responsive design.

Some flexible foundations are better than others. Image: McPig/Flickr

If you’re using pixels as part of your responsive designs you’re probably making your life harder than it needs to be.

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

Stick with percentages, ems or the newer rem units and your designs can scale simply by changing the body font size. Embracing the flexibility of the medium means you can adapt as well — no need to panic when a client wants to make the logo bigger at the last minute, you can scale the whole layout up (or down) with a few lines of code. For Walton’s design firm, Paravel, the flexible approach has already proved its worth in just this way:

This paid off a few weeks ago, when a client wanted to make significant changes to the layout for his site. Type, imagery, buttons, etc. needed to be smaller and overall width & spacing (margins / padding) needed to be reduced. Thankfully, this was as simple as adjusting the body font-size at wide views. Years ago, however, this could have set the project weeks beyond scoped timeline and budget.

As developer Brad Frost has said, “Get your content ready to go anywhere because it’s going to go everywhere.” Pixels may work today, but they make for a rigid site that might well break on new devices. As Walton concludes “the sites we’ve built to display on a desktop, smartphone, or a tablet today could be on a TV screen, coffee table display, or mega space yacht projection system tomorrow.” Start with a flexible foundation and your site should handle just about any hardware that tries to load it.

Image: Rob McKaughan/Flickr

Good web typography needn’t be difficult, but typography can be a complicated and sometimes intimidating subject for newcomers.

To help you understand typography a bit better — and create better-looking websites with your new understanding — developer Tommi Kaikkonen created his Interactive Guide to Blog Typography. The guide offers a nice hand-holding walk through of the elements that make for good typography on the web, helping you not just make more readable sites, but understand why they’re more readable.

For most suggestions in Kaikkonen’s guide there’s an interactive button to toggle different line-heights, fonts and measures so you can see for yourself why those elements matter and how they contribute to making your site easier to read.

Among the suggestions in Kaikkonen’s guide are to set a readable measure (the number of characters on a line), frame content with white space (to put emphasis on the main part of the page), avoid pure black for text and, unless you really know what you’re doing, stick with just two different fonts.

There is one part of the guide we can’t totally endorse — the last suggestion, which is to use font-variant: small-caps; even if the font you’re using doesn’t actually have a small-caps variant. With some fonts — the traditional six fonts of web design, for example — you can get away with this, but if you’re using fancier fonts like those from Google Web Fonts or TypeKit this can make for some really awful results; proceed with caution on that one.

Flickr’s redesigned Explore page. Image: Flickr

Hot on the heels of its awesome new iPhone app, Flickr has rolled out some changes to its web interface, revamping the navigation bar, which Flickr says makes it easier to get around the site. Flickr has also added the popular “justified” view of photos to the Explore landing page.

The Flickr blog says the changes are rolling out to everyone over the next few days, so if you don’t see them yet just be patient.

While Flickr says the new nav bar is “designed to make browsing Flickr faster and easier,” whether or not that’s true depends a little on which features you frequently use. The new navigation definitely simplifies things, but it does so by moving more than a few menu items off to obscure places. For example, options like browsing through your tags or looking at your collections have been moved out of the “You” menu to “More.” Similarly, the link to log out or get to your new mail have been moved to a new menu hidden in your user icon.

Flickr hasn’t outright deleted most menu items; they’ve just moved them to new locations. Sometimes that’s a good thing — for example, removing the “your” from all the options under a menu already named “You” makes sense — and other times it’s annoying, for example if you frequently browse by tags.

Less confusing is the new Explore page, which adopts the “justified” view that Flickr previously introduced for its Contacts, Favorites and Group Pool pages. The new layout tiles images to fit more photos at larger sizes in a smaller space and makes, well, exploring, more interesting.