Flexbox
There are design criteria, and there are technical limits. CSS has plenty of the latter, especially when we make websites that fit mobile and desktop websites. Responsive design of the future looks flexible.
Articles
Posts by topic
Posts by date
Chunky
Professional photographers use professional cameras. But a few now use their iPhones along with their Canons — and they’re taking advantage of apps? ability to post-process images on the fly. I talked to a fashion photographer about his recent work.
# design: aesthetics # has: case study # process: customizing # published: Hipstography # software: HipstamaticRecovery
When my system died, I relied on backups to recover my data. Unfortunately those backups weren’t as robust as I thought. For the next few weeks I compared two online backup services: Backblaze and CrashPlan. Here’s what happened.
Merge
When retrofitting desktop websites for mobile devices, we need more than smarter layouts. We need a new way to diagram sites.
“Think of CSS as working entirely with paragraph styles. Altering one item on the fly is cumbersome. CSS works best when applied to a whole classification of images or words (hence the ‘class’ attribute in HTML).”
When pages are not paper: the designer’s guide to layout code
Application
End users want to understand technology. They want to learn. They want to write cool software. But learning to write code can intimidate people into changing careers.
Time
The HTML5 ‘time’ element promises to give chronological context to information. One year ago today, it died. Then it came back. Using code returned from the past will benefit the future.
Color-code
#940016 represents a football team. #FF75F2 promotes breast cancer awareness. iPad Minis come in #000000 on one side, #454F57 on the other. To the right eyes, hex codes are not mysteries. They’re tools.
Squared
I knew that using one tool would influence my workflow. What I didn’t expect was how it would vilify the competition.
Bricks
The difference between inline and block elements lies in their behavior, much like the difference between print and web designers.
Pigeonholing
WordPress matches directories to categories automatically. That’s a fine system for blogging; not so great when you have a hierarchy of portfolio items. But that’s the problem we faced. The solution required a dab of PHP.
Specious
How well do click-and-go responsive layouts work? Am I, as a HTML-savvy designer, doing my clients a service by customizing sites for them? I surveyed 40 WordPress themes to find out.
Weighty
The first step in improving a website tomorrow is to find out how it’s doing today. I took a survey of websites built at my current employer. The results required some explanation, so I created a few charts to show my coworkers and clients the importance of streamlining performance.
“Responsive themes are as varied as the problems they are meant to solve. Not all are created with the same technique, features or attention to detail. Aesthetics aside, how should someone choose a theme?”
Adopting a Responsive WordPress Theme is More Than Install-and-Go
Hasten
What causes sluggish websites, and what can you do about it? Testing problems and streamlining sites are great for user experience, but surprisingly unpopular.
Singles
How do we make one-page websites more manageable? By organizing them into sections with a little jQuery and CSS. This experiment demonstrates one way to prevent content overload.
Angling
The angle gradient tool is an overlooked gem tucked away in Photoshop’s toolbar. Often passed over for its more popular sibling, the linear gradient tool, angle gradients create clockwise blends of color around the point a user clicks. Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.
Duotone
The ability to tint black-and-white photographs with color has been a staple of photography for decades, and modern image editors make warming and cooling grayscale images a snap. This concept of a steady progression of shades can be used to present information as well.
Curves
Photoshop’s Curves has long been associated with making images brighter or darker. But few people know that it can also change color with greater degrees of control than the Hue/Saturation or Color Balance controls. From slight selection changes to creating great duotones, Curves is a powerful tool to master… if you’re willing to practice.
Finishing
The bottom of a web page is surprisingly valuable real estate. It’s open, it’s where visitors naturally wander—but it’s often neglected. Here are a few ideas on how to design footers to guide visitors around a website.
72 DPI
The idea that web images must be set to 72DPI is an old, ongoing misconception among image professionals and web designers alike. Here we set the record straight about when inches matter in a medium measured in pixels.
Click here
Conventional wisdom says that keyword-rich links are more productive than “click here.” But are they? I performed an experiment to find out if “click here” affects links in web content.
Quilting
In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better. The trick is to pay attention more to how shapes interact than to how a shape looks on its own. The concepts are simple, but the choices are endless.
Copyedit
What is the best note-taking app for iPads? There’s no clear leader, and that’s great.
Soft
Do you have a photo with lots of detail? Learn how to emphasize its colors and bring out the details with this artistic Photoshop technique.
Menu
What trends do we see with primary navigation bars? I took a survey to find out.