These short lessons cover very specific topics in web design & code. We decided to treat them as regular blog post updates, even though they’re delivered by email with online archives.
Today we're going to share our research in making Foundation more accessible — techniques we figured out because a) we're committed to a more accessible web and b) deadlines happen.
By the time you're done with this lesson, you'll be able to improve any page's accessibility in five minutes or less. Ready? Go!
Complex products rely on more than HTML and CSS. They need strange technologies with exotic names like Git, Grunt, and Bower. And they operate in that mysterious land called The (Dreaded) Command Line.
So how does it work? How much trouble can cause by typing “
sudo mkdir ~/Sites/project1”? We’ve found that understanding is the first step in acceptance, so we want to share with you what’s going on. Understanding what happens under the hood will help you download, use and update Foundation, our CSS framework. Here’s how you can unlock basic mysteries of the Terminal, — and understand what commands like “
foundation new dirname” actually do.
Color management in CSS isn't easy. Each element may have colors for their background, border and text. They're often redundant — using the same hex color dozens of times in a CSS document isn't unusual.
Luckily, Sass offers us a way to manage this repetition, turn our color palette into more of a color strategy, and make changes to an entire project with just a few edits. Here's how to use Sass's functions to manage color across your design faster than with plain CSS.
Forms are a critical touchpoint between website owners and their visitors. We use them to let people sign up or sign in; to report an error or ask for help; and to submit information about themselves. Forms are what keep the web from being a one-way street. But they can also act as barriers to entry.
People equate a dozen fields with tedious chores. Their eyes glaze over. Patience stretches thin, and so does trust. They may decide the form is more trouble than it's worth and give up before they even begin.
It doesn't have to be this way. Here are ways to make tedious forms easier to digest — and increase the number of signups.
Nothing hurts like discovering a problem after launch — especially when someone else points it out. It’s a special kind of pain that smacks your bottom line, dings your reputation and sours client relationships.
No matter how much time we’ve spent looking at a product during development, there’s always a risk that other people have a different (and an unfavorable) experience.
Even worse, preventative medicine is getting complicated. The more responsive our web designs become, the more difficult they become to test. Used to be we could review static layouts. Now layouts are elastic, and we need to check our work on many browsers and devices. Here’s how we head off headaches with a few simple testing processes.
Part of getting feedback is sharing your plans, even if they’re in the “rough draft” stage. We love whiteboards for sharing ideas, experimenting with workflows, and letting the Big Picture be bigger than a piece of paper. Recording these ideas is crucial, and smartphones make it convenient. But convenient isn’t easy.
Dry erase boards are reflective. Glare from windows and overhead lights create harsh light spots that mar our notes. Even worse, most cameras underexpose images to compensate for these spots, and produce uneven lighting over wide areas.
We set out to shoot better photos of whiteboards. After some experimentation, we figured it out. The result helps us more clearly communicate our design ideas.
Here’s how to shoot a dry erase board that will clearly communicate your ideas long after the board is erased.
Iterating on our work requires feedback — and understanding feedback requires analysis. Our surveys that rate customer satisfaction from 1–10 gave us a good idea of how our products and services were helping others design for people, but we wondered if there was a better way.
In fact, there is. We recently discovered that a single question, rated in a special way, could give us a more streamlined approach to customer feedback. The results are more measurable but just as interesting. Here's how to measure customer satisfaction with Net Promoter.
Brainstorming. Mind maps. Rephrasing questions. There are plenty of ways to plan successful digital products. But only one approaches design problems from the users’ standpoint to create natural routes through a website. We do this with personas: fictitious users we anticipate will use the product. Here’s how to use personas to drive ideation.
Few pressures inspire designers to look for shortcuts like tight deadlines. Luckily, we have shortcuts. Patterns are conventions that give designers a head start in their work. They're ideas without aesthetics: Workflows, layouts, or known user behaviors upon which we build great digital products, tailor-made to our clients' needs and branding. Here's how you can use patterns to spark ideas for better designs.
Phone calls, especially with clients, are a critical means of receiving feedback on your works-in-progress. In addition to exchanging ideas, phone calls are a stage on which you present yourself to the client. It's a chance to look professional — or like an unprepared amateur. This lesson will teach you to look (and sound) like a pro. Here are handy tips to conduct a winning client phone call.
As a hi-fi prototyping tool, much of OmniGraffle’s power lies in its stencils: Reusable components you can drag and drop to create interfaces faster. While the app comes with many generic stencils, sometimes we need custom shapes to reuse throughout a site. In that case, nothing beats custom elements you downloaded or created yourself. Here’s how to create and edit OmniGraffle stencils from Adobe Illustrator files.
CSS frameworks are great for setting up responsive grids, but often require extra markup, usually in the form of presentational class, that makes source code hard to decipher. Using nothing but div elements make code more confusing — which
</div> belongs to an open
<div>? And isn't "product-list" easier to figure out than "large-block-grid-3" ?
Semantic HTML uses markup to describe content, making information cleaner and HTML more meaningful. Elements like <article> and <aside> indicate to browsers, screen readers and search engines what content about. Here's how to create your own semantic grid based on Foundation.
The simplest solutions are often the best. But as ideas become layouts we need more than quick & rough.
Our ideas for design solutions are nothing without implementation, and that begins with lo-fidelity — or lo-fi — wireframes. We use these hand-drawn pages to show other people what we're talking about before we dedicate time to digital wireframes or coded prototypes. Here's how to create low-fi wireframes that turn great ideas into practical pages.
No media query is an island unto itself. Several often work together to create the appropriate styles for different scenarios — smartphones, tablets and desktop browsers, and even different screen orientations. You have to worry about conflicting ranges. You have to write redundant code. You have to hunt for queries through dozens or hundreds of lines in CSS. Overall, media queries in complex products can be a pain.
But they don't have to be. Sass makes media queries a snap with very little setup. Here's how you can use Sass variables to master media queries.
Great products are built on great ideas. Early in a project’s development, we dedicate time to working through many quick ideas with sketches that communicate “what-if” scenarios to our clients. We work through lesser ideas until we discover real winners — ideas that ignite sparks that serve both our clients and their customers. And it works. “What if we used a cartoon ninja?” was so unexpected that a quick sketch reshaped an entire project. Quick sketches give us the chance to fail fast and discover opportunities — hence their name, opportunity sketches. Here’s how to discover your great ideas with paper and Sharpies.
While more people than ever open email on mobile devices, responsive email templates aren’t easy to customize beyond colors and type families. As collections of reusable code and design patterns, frameworks give designers a solid, tested bases on which to build their own templates.
Although the grid in Ink uses nested tables, understanding how it works pays off when users can read an email under most any circumstances. Here’s how you can use the Ink grid to make a complex responsive email template.
User testing helps us test a hypothesis to discover if what we're about to build will, in fact, solve the problems they’re meant to address. But people who participate in a user test need to know more than “we need you to test this.” They need context. Here’s how to prepare test participants so you'll get the constructive feedback you need to improve your work.
It may sound odd, but sketch-based prototypes of products helps us fail early. Prototypes are mockups through which people can "test" a website or app. They're comprised of hand-sketched screens we scan and add tappable hotspots where important links would be. They're cheap, effective tools to let clients walk through a digital product before spending time coding what might be the wrong path. Here's how to create simple, cost-effective prototypes to save time and prevent headaches later.
With its variables, functions and imports, Sass gives superpowers to CSS. In particular, importing enables us to organize SCSS in different files according to type or use. But all that power can get us into trouble: The ability to import many files into your work means having many files to manage. Experience has taught us to avoid most pitfalls, and we want to share that experience with you. Here are answers to common questions we’ve been asked about organizing files in Sass.
We love Git as a collaboration tool — among ourselves and with the public. Git lets us share code and see how other people riff on our products. We also know that Git can intimidate people not accustomed to using a command line, so here's how to share your work on GitHub.
When trying to communicate ideas and drive actions by email — say, when asking a client for feedback — a well-composed email means more than good grammar, spelling and a little formatting. Emails can do more than communicate information; they can rally people to action. Here’s how to structure emails that elicit action from your readers.
In low-fidelity sketching, yellow highlighters can draw attention to a page’s key point or call to action. But like any tool, they can be abused. While we strongly recommend using highlighters sparingly in lo-fi sketches, the best way to explain that is to (ahem) highlight bad practice. Here are three different ways to go overboard with highlighters in lo-fi sketches.
Style guides are documents that designers use to maintain consistency throughout a project, even after it's launched. But they're more than a list of guidelines. Structure, samples and accuracy are keys to successful style guides. Here are five tips to creating a killer style guide.
Designers have used Photoshop to make web graphics almost since … well, since the web gained traction in the early '90s. Trends and technology have changed over the last two decades, and today Photoshop offers many tools to easily make web elements in contemporary styles. Here are different ways to create fast, flexible buttons in Photoshop.
Our designers use card sorting to figure out how people perceive a system. This exercise helps us look past our assumptions to how customers may actually use our products — and since they're the ones using our products, understanding how customers mentally organize information on your site is critical. Here's how you can use card sortings to figure out how others use your designs.
If your website or app requires users to log in, you might consider social media. Statistics show that users accept Facebook, Twitter, Google and other social networks as convenient and reliable ways to log in. For developers, social media logins mean offloading the code — and security headaches — to seasoned professionals. Here’s how to add social media logins to your site or app.
Getting constructive criticism is hard enough without getting overwhelmed with feedback. Placing your work (and by proxy, yourself) on display takes courage. Admitting that you may have taken a wrong path, or that someone else knows more than you, takes a level head and a dose of humility — even if it ultimately improves the design and your design skills. And after you top that challenge, you face a glut of opinions. Knowing where to start is hard. And if you guess, you may end up working on one thing only to realize later that something else contradicts your new work.
Building a responsive email template can be daunting. That’s why we developed Ink, an entire email framework designed to easily build responsive emails that work in any client, even Outlook. Still, having the tool doesn’t safeguard you against different email clients’ quirks. If you're going to make a responsive email, Ink or otherwise, here are four gotchas to avoid.
Now and then, we all crave a little praise. But to improve their work, designers need feedback: A fresh view on their work to expose problems and offer solutions. If you’re not receiving feedback, then you don’t know what you’re missing. But learning to give feedback is just as useful. We’ve found that expressing our views trains our brains to think from users’ points of view. And the more we practice, the more we can anticipate problems in our own work. Although thoughtful comments sometimes take time, you can learn to give initial feedback on web design in 60 seconds or less.
Learn two easy ways to give your designs a subtle sense of order.
Orbit is an easy way to show users a rotating slideshow of content — images or otherwise. By default it comes with many settings, including animation type, pause on hover, and slide delay length. Here are two under-the-radar ways to change your Orbit.
Learn to integrate complicated navigation in mobile device design.
Learn ways to keep yourself from just copying others work — and become a source of inspiration yourself.
Learn a simple technique for changing content-friendly units of measure into visual-oriented pixels.
Feedback is a vital part of iterating through the product design process. But ask “what do you think?” and will get replies that range from “looks good to me” to “I don’t like it.” Both may be valid, but they lack actionable feedback needed to improve a product or service. We’ve discovered that asking for feedback properly is the first step in getting helpful input. In this short lesson you’ll learn to prompt answers that put “constructive” in “constructive criticism.”
The Top Bar is among Foundation’s most popular pre-built components — and certainly its most complicated. We created it to alleviate the trouble of building complex navigation for both mobile and widescreen browsers. The Top Bar is a powerful tool. But with power comes responsibility, or at least confusion about some of its inner workings. Don’t panic. We’re here to help. This post will answer technical questions we’ve often been asked about the Foundation Top Bar.
Everyone has a different take on design. A lot of their opinions stem from where they’re coming from, their experience and their preferences. There are many different types of personalities that might be giving you feedback. You’ve got to understand what each of those are and how best to deal with them. Now, it’s hard to classify everyone. But we’ve found most fit into four broad archetypes. We want to share those types and how to work with them.
For years, the order in which an HTML document was written directly impacted how it was displayed. Want navigation on the top or left? It had to come before content in HTML. That was an uncomfortable — but necessary — restriction in the past. But with the rise of mobile devices, and some new CSS techniques, designers need greater finesse over their work than restricting “top-left” to always meaning “first.” Luckily, the future looks bright for layout options. Among others, our responsive framework comes with the ability to arrange columns regardless of how they’re set in HTML. Here’s how you can rearrange elements in a row with Foundation.
When designing icons, you can't just make shapes that adhere to guides in your drawing tool of choice. A set of icons should look like a harmonious family in the finished product. Icon design is one thing. Family design is another. Here are four techniques to make a group of icons feel like family.
Learn techniques to communicate your ideas while planning web forms.
We’re sometimes asked in our Intro to Foundation course if using Foundation makes websites look the same. They don’t. Any site that uses Foundation — or any framework — can look like whatever its designer feels is best for the project. We keep Foundation’s default styles to a minimum for that very reason. Don’t worry about looking like someone else. Instead, focus on looking like you. Here are three tips to making your Foundation-based site stand out.
A color scheme does more than look good. It keeps the design from contradicting itself. It reinforces the message you want to convey, whether that's for branding or for mood. It also says the designer didn’t just throw something together. There’s a sense of purpose. It’s also a way to reveal more about a design than the designer may realize.
Learn how to build pages that take advantage of browsers' capabilities rather than be limited by feature sets.
Many elements can resize well mobile- and desktop-optimized layouts. But sometimes a design calls for widgets, images or sets of elements that only work well at one size. For example, TheNextWeb.com changes elements based on screen size. Navigation is the usual culprit, though this could apply to any element that’s inappropriate to differently sized browser windows. Here’s how to show and hide elements with Foundation in three minutes.
Learn how to use skeumorphism to emphasize parts of a page that matter most.
Most CSS grids — Foundation included — organize layout into rows that are, in turn, divided into cells or columns. But what if you want a column to extend over two rows? Officially, you’re stuck. But if we redefine the problem, a solution appears. Here’s a how you can (appear to) extend Foundation columns past one row in three minutes.