Responsive Images Done Right: A Guide To <picture> And srcset

On Monday, we published an article on Picturefill 2.0, a perfect polyfill for responsive images. Today's article complements Tim Wright's article and explains exactly how we can use the upcoming <picture> element and srcset, with simple fallbacks for legacy browsers. There is no reason to wait for responsive images; we can actually have them very, very soon. — Ed.

Responsive Images Done Right: A Guide To <picture> And srcset

Images are some of the most important pieces of information on the web, but over the web’s 25-year history, they haven’t been very adaptable at all. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single src.

Read more...

Boardroom Comics: A Business-Scenario Visualization Tool For Executives

As a UX researcher, I'm always looking for novel ways to present information to the different audiences I work for. My collaborators and clients aren't limited to UX designers, software developers and UI visual designers.

Boardroom Comics: A Business-Scenario Visualization Tool For Executives

I regularly conduct studies for executives who are responsible for business strategy, product planning, operations, sales and marketing, and professional education. At the conclusion of each study, my challenge is to create a final deliverable tailored to a specialized audience.

Read more...
Advertisement Advertise with us!

Picturefill 2.0: Responsive Images And The Perfect Polyfill

Not since the early days of web standards have I seen our community rally around a seemingly small issue: responsive images. Over the last four years (yeah, it’s been about four years), we’ve seen many permutations of images in responsive design.

Responsive Images And The Perfect Polyfill

From the lazier days of setting max-width: 100% (the absolute minimum you should be doing) to more full-featured JavaScript implementations, such as Picturefill and Zurb’s data-interchange method, we’ve spent a lot of time spinning our wheels, banging our heads and screaming at the wall. I’m happy to say that our tireless journey is coming to a close. The W3C and browser makers got the hint.

Read more...

Efficiently Simplifying Navigation, Part 2: Navigation Systems

How do we make navigation as simple and predictable as possible? As explained in part 1 of this series, the first two steps are to structure content in a way that naturally narrows the navigation options, and to explain those options in a way that minimizes the cognitive load on users.

Efficiently Simplifying Navigation, Part 2: Navigation Systems

However, two more steps are required — namely, to choose the right type of navigation menu, and then to design it. The second part of this series addresses the third step and discusses which type of navigation menu is best suited to which content.

Read more...

Proper WordPress Filesystem Permissions And Ownerships

When people talk about WordPress security, file permissions and ownership are usually the last thing on their minds. Installing security plugins is a good practice and a must for every WordPress website. However, if your file-system permissions aren’t set up correctly, most of your security measures could be easily bypassed by intruders.

Proper WordPress Filesystem Permissions And Ownerships

Permissions and ownership are quite important in WordPress installations. Setting these up properly on your Web server should be the first thing you do after installing WordPress. Having the wrong set of permissions could cause fatal errors that stop your website dead. Wrong permissions can also compromise your website and make it prone to attacks.

Read more...

Six Common Problems With The UX Process, And Six Solutions!

How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.

Six Common Problems With The UX Process, And Six Solutions!

We’ve delivered projects successfully, rectified problems and honed our ability to deliver in different scenarios. However, we all know that every project is unique, and every once in a while something will take you by surprise.

Read more...

Unicode For A Multi-Device World

A while ago, I was working on a website that required a number of icons. “No problem,” I thought. “I know how to handle this. I’ll use an @font-face icon set for high-resolution screens. It’ll be a single file, to reduce HTTP requests, and I’ll include just the icons that I need, to reduce file size.”

Unicode For A Multi-Device World

“I’ll even use a Unicode character as the base of the icon, so that if @font-face isn’t supported, then the user will still see something like the intended icon.” I felt pretty pleased with myself.

Read more...

↑ Back to top