Flat design is all the rage. And now that Apple is in the process of ditching its trademark skeumorphic designs for flatter pastures, we can expect to see much more of it.
Hell, it’s already all around us. My mom even asked me about it, so you know it’s inescapable at this point.
For all the wonderful things flat design does to make web design and coding easier, it is also highly criticized for being boring. And it is. At least if it’s executed poorly. So, designers have been adding things like long shadows, heavy and blurry images to add distinction to their work.
But even that’s catching on and becoming a cliche. If flat design has brought a new level of authenticity and minimalism to our designs, then I think it has also created craving for distinction and uniqueness. We see this in how many new sites generally look the same. Many designers are on the same bandwagon, follow the same blogs, share the same code and are merely trying to keep pace with the latest trends.
I’m not saying it’s wrong. It’s just the way it is. Flat design leaves little to the imagination, so we clamor for improvements and enhancements when we see them.
Anyway, I didn’t really intend for this to be an opinion piece, though it’s already crossed that line. Instead, I wanted to point out a flat site I came across that I actually really like. So, check out The Paint Drop. Go ahead, I’ll wait.
Yes, it has all the flat colors, long shadows and bold fonts you would expect from a flat design, but there is still a lot of character to it. I thought I would recreate the primary button style and show you how I did it.
Without further ado, I present the Hipster Button!
One Element, No Divs
First thing I noticed about the site’s CSS is that it used multiple classes to style the buttons. Plus, they look like buttons, but they don’t even use the button element in their HTML markup.
So, I set out to simplify the code so it is semantic and requires less markup, just using one button element. To do this, we use the
::after pseudo-elements to draw things in. The
::before class will represent the icon on the left and
::after will represent the call to action on the right.
Mo’ Flatter, Mo’ Betta!
We can bet Sir Mix-a-Lot hates flat design, but we’re going to move ahead anyway. This button is flat, but it adds some nice depth with a thick bottom border and a dark and light border between the icon and call to action.
The bottom border can be applied directly to the button element. Done and handled.
The borders between the pseudo-elements is where it gets a little trickier. We can get that effect by giving
::before a solid dark right border and
::after a solid light border. I had to play around with the padding for each to get the spacing where it felt right.
Make it Move
Flat doesn’t have to be boring. When we click this button, it would be nice if they button actually felt like it was being pressed when clicked. that’s pretty easy for this button.
:hover class and set it to
border: none; and there you go. The border goes away, which causes the button to look less like a 3D box and more like a flat rectangle.
Here’s the final result. Enjoy!
In a different lifetime, I remember working at Starbucks at a time the company was shaking things up a bit. In an effort to reduce costs and create more space on the back counters, the company downsized its syrup selection to a modest ten flavors. Those of us that can remember that far back (circa 2003) now relish the days of ordering a hazelnut latte or a valencia mocha without it being a special promotion or holiday. The decision was a little unpopular at the time, but customers loved the speediness and consistency that the efficiency provided.
The same is true with responsive web design. More often than not, the posts I see on the topic are either opinions about the best design approach or a showy piece on how to hit as many viewports as possible. Though they are interesting and certainly contribute to the web community as a whole, I think most of these posts miss the point of responsive web. Whereas one is an extreme towards a one-size-fits-all approach, the other errs on the side of agnosticism to the point of being irrelevant to the user. Instead, I propose a Starbucks syrup approach to responsive design and development.
Understand your customer’s tastes
Now, as a barista I was certainly not on the Starbucks board or anywhere near senior leadership, but I imagine they knew a thing of two about the tastes of customers prior to dropping syrup flavors from the lineup. I’m guessing they poured over sales receipts, surveys and any bit of data they could possibly get their hands on before making a decision.
In the same way, I find it helpful to know a thing or two about the people visiting a website before I determine whether or not a responsive layout is even necessary. Sure, it’s fun to show off your chops and make something that bends and moves when the bottom right corner of a browser is pulled around, but if no one is visiting the site on a mobile device, tablet or anything below 960px, then there’s very little sense in doing the work.
For that reason, I often request access to a client’s analytics account or reports to get a sense for the type of traffic the site attracts. Of course, some clients give me a confused look at the slight mention of “analytics” in which case I try to set them up with a Google Analytics account or a short-term qualitative survey to get the best idea possible.
Eliminate unnecessary options
I love this tweet from Josh Brewer:
If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.
— Josh Brewer (@jbrewer) March 10, 2012
Responsive is not simple. It is a chore.
So why make it even harder than it needs to be? By reducing the number of flavors it offers, Starbucks also reduced the number of options for customers to create a personalized drink experience. Doing so not only made the ordering process easier for customers who may have been overwhelmed by too many options, but it smoothed the production process for employees who had to make the drinks.
Until there is a bullet-proof one-size-fits-all way of developing websites (I hope it never happens, personally), it’s virtually impossible to be everything to every person and viewport without a lot of serious tricks, hacks and hard work. And even if you do pull off the impossible, you’re left with a mess of code that is difficult to maintain and probably lowered your hourly rate of return on the project.
Learn what people need from the site and tailor accordingly, eliminating viewports that get little or no traffic in the first place. It’s better to add viewports later than to account for them unnecessarily in the first place. Work smarter, not harder.
Design for the occasion
This has nothing to do with syrups (well, it would be a stretch if I tried), but is worth mentioning because of the hype around whether it’s better to start with mobile or desktop in the responsive design process.
The short answer to me is: it depends.
I was totally on board the first time I heard the mobile-first approach because I love how mobile forces you to get to the core of a site’s purpose before plopping in a bunch of shiny bells and whistles.
But the more I think about it, a mobile-first approach can be discriminating because it puts the needs of one segment over another. The same person visiting a site on a mobile device will probably use it differently on a desktop (depending on the general purpose of the site), because of the context of the visit. Are they on the go and need quick information? Are the in a stationery place and want to have an experience? Are they hanging out on the couch in the mood to consume content? The needs can vary greatly.
For that reason, I feel it’s more necessary to start with the viewport that is most conducive to the primary goal of the site. And if the goal fits one extreme or another, just go with your gut and degin with what makes you most comfortable. No one is going to show up at your door with a death wish for that.
Write opinionated code
I’ve always been a fan of adopting early standards and trying graceful degradation where possible. But I believe that going responsive requires your code to choose sides as far as what browsers it does and does not support. The most obvious example is older IE versions (I’m looking at you, IE8-!) that do not carry support for media queries or HTML5. There are polyfills for that, of course, but there’s no need to bend over backwards for users who are already used to experiencing an outdated and unsatisfying version of the World Wide Web. You probably shouldn’t even be diving into responsive design if a a majority of your visitors are surfing in on IE7 anyways.
Short story: take a side and reward those who choose the same.
I love how responsive design has reinvigorated the web community and created an active dialogue but, as far as standards and best practices are concerned, the craft is still far too new to command a definitive way of getting it done. Until we see a shake-up within the browser community to determine a standard for how pixels dance to the viewport they’re displayed on, it’s best to design for the users and use a process that fits your level of comfort.
I wonder if many website homepages are becoming the new convenience store windows.
Convenience store windows measure attention in nanoseconds. They’re plastered with a slew of (poorly designed and) colorful advertisements for products we often don’t need in the hope that maybe we’ll walk out with something we didn’t plan on getting in the first place. They serve the store more than they serve the customer and we’re often suckers for buying into them.
Many websites try the same strategy. They clutter their most valuable real estate with content that is more important to the company than it is for the visitor and the result is no different than your local convenience store.
Your visitors have a purpose in mind when they come to your site. Whether it’s purchasing a new cardigan, researching your cause, or wasting time, they have specific tasks in mind that they came directly (or organically) to in order to do it. And instead of taking the time to understand what those tasks are and designing a site around them, many sites are using their most valuable real estate to push content that serves them instead.
A homepage doesn’t need to be complicated. Google has barely touched theirs since the first day it launched and it doesn’t contain anything more than a search box and a top menu. Unlike the convenience store philosophy of design, Google knows why people come to their site: to search.
I understand the temptation to give content you think is important the front-and-center treatment in the hopes of reaching the greatest number of people. But as long as the content is not fulfilling the purpose(s) of why people are coming to you site, then you have to trust me that it’s really doing more harm than good for your company and its bottom line.
Besides, designing your site around tasks makes it easier for you to measure your site for success in your favorite analytics tool and use the information to make further improvements based on solid information. Anything else is like throwing a handful of darts and hoping one sticks in the bulls-eye.
If you’re fine treating your visitors like window shoppers, then go ahead and plaster your homepage with all the junk you want. The only difference between you and a convenience store and you is that the person holding you up at the counter by gunpoint is yourself.
I’m not speaking financially (though that’s probably the case as well). What I’m actually talking about is Google making the biggest change to its simple homepage in years: going bigger.
Now, the search bar is much longer, the text a few points larger and the bottom buttons bigger.
With search terms getting longer every day, the longer search bar makes a whole lot of sense to me, however, I’m not sure what utility the larger fonts and icons play besides prettier aesthetics. In fact, the larger form reminds me a lot of Tumblr’s jumbo-sized sign-up page, though it still has a far way to go before getting that big.
Just shows there’s always room for growth.