Archive for the ‘Visual Design’ Category

File Under: Visual Design, Web Basics

Create Better, Sharper Web Graphics With SVG

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.

Turning Off Responsive Design

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 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.

Simplify Responsive Design by Embracing the Flexible Nature of the Web

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.

‘Interactive Guide’ Teaches the Basics of Good Web Typography

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 Revamps Site Navigation and ‘Explore’ Page

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.