Posts Tagged: web

Prototyping your workflow

Developer Mark Llobrera over at A List Apart gives advice for successfully integrating new web design and development techniques on new projects:

Look at the projects you have on the horizon. Think about the portions of your workflow that you want to improve, and pick just one of those things to introduce into your project. Why just one? It allows you enough space to experiment without endangering your project.

A mentor of mine once told me that programming (and especially programming for the web) boils down to reducing the number of “unknowns” on a project to a manageable number. One is fine, two is a stretch, and three is asking for trouble. If you think exploring HTML/CSS wireframes could have a positive impact on your work, introduce just that one thing. Most projects have enough built-in friction without adding or changing multiple processes at the same time.

Far beyond ‘Snow Fall’

Craig Mod:

When we explore new ground (or re-explore old ground, forgotten ground) in new mediums, we often find it necessary to swing the design and interaction pendulum to the baroque side of the scale. We do this to see what “too much” feels like in order to understand the edges of “enough.” We saw this happen with iPad “magazines.” We saw this happen with “Snow Fall.” “Snow Fall” was less about what felt natural in a web browser or what was best for the story, and more about what was maximally possible in a web browser. The experiment just happened to be attached to an article.

Great storytelling is not about maximizing technical possibility.

Spot on.

Stop asking me to “sign up”

Designer Gregoriy Korgan:

The fate of many startups depends almost entirely on one conversion point: When a visitor becomes a user.

All too often, this pivotal role falls on the shoulders of a pitifully generic “sign up” button that’s lucky to get even a minute of consideration during development.

If you take a moment to consider the wording of your signup button, you can drastically increase how many of your visitors turn into users.

One of those “why didn’t of this months ago” moments reading Gregoriy’s post. It may be interesting to experiment more with in my day job.

Figuring out responsive images

Leave it to Chris Coyier from CSS Tricks to try and figure out, with code examples and video, some responsive imagery basics. Pay extra attention to the strong explanation of the sizes attribute, integral to srcset-based responsive images.

An update on the hamburger menu

Designer Brent Jackson succinctly goes through the weaknesses of the hamburger menu; can’t say I completely agree with this more recent backlash against this now ubiquitous navigational choice, but Brent presents a strong argument.

iOS 7.1 mobile Safari minimal UI

One of these features that snuck out months ago that I had no idea that existed. As developer Jon Hollin explains, with a simple change in the viewport meta tag you’re able to auto hide the top and bottom nav bars as the page loads.

Pixels are expensive

Nice, short but sweet article by Google web development advocate Paul Lewis on some simple, essential rules to maximize performance on your web pages. The best part is midway down, labeled “avoid performance bottlenecks”:

A while back I wrote an article with Paul Irish on HTML5 Rocks explaining how you can get high performance animations, or in this case, how you can exploit the pipeline to make sure you hit 60fps. What it boils down to is only changing properties that trigger compositing rather than layout or paint.

Google design

Yesterday’s Google I/O keynote had it share of ups and downs but for me one clear highlight was their new “Material design” language for UX and the aesthetic look across web and Android. There’s a lot of interesting ideas here for the web, from well thought out typographic guidelines to a set of punchy color palettes to match the aesthetic.

Creating style guides

Susan Robertson over at A List Apart wrote an excellent post detailing why style guides are important for web projects and how they can help maintain consistency for a project over the long run. It’s a solid intro for those new to the topic.

The runtime performance checklist

Web developer Paul Lewis:

The majority of the time a user spends on your site is not waiting for it to load, but rather, using it. Therefore, user frustration can come from poor UI responsiveness, slow scrolling and jerky animations…

…With that in mind I want to highlight seven runtime performance problems that I see most often, and that your projects may suffer from.