Process is often shaped by how teams are organized.

In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line approach obsolete and reorganization necessary. However, if a process is changed without rethinking the network of talent, resources, and management that support it, friction and inefficiency can arise.

Let’s assume that an assembly line process has 3 key phases: planning, design, and code, where each phase determines the next, and a project transitions primarily from strategy to execution.

Within this approach, teams are often structured to mirror the process. Planners (stakeholders, content strategists, management) define objectives and direction. Then, designers take the handoff to add form, hierarchy, and aesthetic. Finally, coders (front & back-end developers) execute the plan.

I think that this skill-based compartmentalization is one shortcoming of the assembly line. Locking developers and/or designers into a 100% execution role is a missed opportunity; ideally, every role contributes to strategy. Things like device compatibility and technical debt (typically in the realm of developers and often overlooked until the latter part of the project) should be a core part of strategic planning.

Teams compartmentalized in this fashion can have a difficult time iterating and exploring at a reasonable pace. For example, if developers need to schedule a meeting with designers and planners every time a layout change/breakpoint is needed during the coding phase, the iteration loop may extend from a few minutes to a few days. Traversing these compartmentalized phases and roles becomes cumbersome and time consuming, ultimately diminishing the potential for the final product.

If a process calls for multiple builds and rapid iteration, why not structure teams accordingly? I like the idea of smaller, tactical teams that are capable of executing multiple rounds of planning, design, and code quickly and independently.

The size, structure, and number of teams can be tailored to the organization, but the idea is to assemble teams with complementary roles in a truly collaborative way. Members are available to each other regularly, and the chain of command is not isolated to each division/skill (e.g. designers reporting to a creative director). The teams are ultimately responsible for what they build and how it performs.

Within this structure meetings become quick chats, ideas become prototypes, and the overall process becomes more efficient. For example, think about how much effort is involved when a Photoshop comp is polished, then all the color, sizing, and spacing values get harvested and reproduced in code form by developers. It’s duplicate work. With a collaborative team all the polish effort would be directed at the browser. Sophie Shepherdoutlines these benefits in her work with Happy Cog:

By jumping right into the template phase before design was finished, we were able to make all design decisions in the medium they were meant to be in. We could do QA and device testing as we worked. With the help of SASS, it was easy to make changes and incorporate feedback directly in the browser—infinitely faster than it would have been in Photoshop.

When various skill sets are combined in this way, people learn from each other. Rather than creating to-do lists filled with nudges and site tweaks for developers, designers could learn CSS and edit designs in the browser alongside more intensive development. Developers could hone their design sensibilities and contribute by making enhancements such as gestures, geolocation, and performance a part of the design process.

Because the things we build rarely take one shape these days, it’s key to keep in mind that our processes and teams probably shouldn’t either. The time of neatly organized process charts and workflows is behind us. Building for the web has become a journey with infinite potential for forks and bumps in the road. Let’s make sure that our process and organization ready us for what lies ahead.

Source

I’m Not The Product, But I Play One On The Internet

“If you’re not paying for the product, you are the product.”

I don’t know who said it first, but the line has achieved a kind of supernatural resonance online. And for good reason – it describes a kind of modern internet company that provides a free service. These businesses are designed to aggregate a large number of users in order to sell that audience’s aggregate attention, usually in the form of advertising.

But the more the line is repeated, the more it gets on my nerves. It has a stoner-like quality to it (“Have you ever looked at your hands? I mean really looked at your hands?”). It reminds me of McLuhan’s “the medium is the message,” a phrase that is seemingly deep but collapses into pointlessness the moment you think about using it in any practical way.

There are several subtextual assumptions present in “you are the product” I think are dangerous or just plain wrong that I’m going to attempt to tease out here. Many of these thoughts have been triggered by Instagram’s recent cluelessness, but they’re not limited to that. I also want to be clear that I’m not arguing that everything should be free or that we shouldn’t examine the business plans of the services we consume. Mostly I’m just trying to bring some scrutiny to this over-used truism.

Assumption: This is new or unique to the internet.

Free, ad-supported media has been around for a long, long time. When I was in college, before the web existed, I worked on alternative newspapers. Not only were they free, we actually walked around campus thrusting them in people’s faces.

I guess you could call the people we gave them to “the product,” but it sure didn’t feel that way when I was driving my VW Bug over Highway 17 filled to the roof with newsprint. The product was the thing I broke my back creating and hauling around.

Online ad-supported media is no different. It’s free, it builds an audience, and then it sells access to that audience in small chunks to companies willing to pay. There are ways to do that while still maintaining respect for the consumers. We’ve been doing it for years.

Assumption: Not paying means not complaining.

The “you are the product” line is most often repeated when a company that provides a free service does something that people don’t like. See Instagram’s recent terms change or any Facebook design update. The subtext is, this company does not serve you, you don’t pay for it, so shut up already.

But that’s crazy talk. If a company shows that they’re not treating you or your work with respect, vote with your feet. Uninstall. Delete account. Walk! And make sure they know why you split. It’s the only way we have to make companies feel the repercussions of dumb, user-hostile decisions.

Assumption: You’re either the product or the customer.

I’ve worked for, and even run, many companies in the last 20 years with various business models. Some provided something free in an attempt to build an audience large enough to sell advertising, some charged customers directly, and some did a combination of both. All treated their users with varying levels of respect. There was no correlation between how much money users paid and how well they were treated.

For example, at JPG Magazine we sold something to our audience (magazines, subscriptions, and ultimately other digital services) and we also sold ads and sponsorships (online and in print). We made it 100% clear to our members that their photos always belonged to them, and we had strict rules for what advertisers could do in the magazine. We alsopaid our members for the privilege of including their photos in the printed magazine (as opposed to Instagram’s new policy that they can use your photos however they want, even in ads, without paying you a dime).

This example is much more complicated than the black and white “you’re the product” logic allows. In some cases, users got the service for free. In others, they paid us to get the magazine. In still others, we paidthem! So who/what is the product?

And just because you pay doesn’t mean you’re not the product. Cable TV companies take our money and sell us to the channels, magazines take our money and still sell ads, banks and credit cards charge us money for the service of having our money. Any store that has a “loyalty card” takes our money for products but gives us a discount in exchange for the ability to monitor what we buy. In the real world, we routinely become “the product” even when we’re already paying.

Assumption: Companies you pay treat you better.

I should be able to answer this with one word: AT&T. Or: Comcast. Or: Wells Fargo. Or: the government.

We all routinely pay companies that treat us like shit. In fact, I’d argue that, in general, online companies that I do not pay have far better customer policies and support than the companies I do pay.

The other day I had a problem with my Tumblr account. I sent an email. In less than an hour I had a kind, thorough, helpful response from a member of their support team. Issue fixed.

The next day I had a problem with my internet connection. I called my provider. After listening to hold music for a long while, I got someone on the phone who obviously spoke English as a second language, was not allowed to deviate from their script, and had less experience with the product than I did. They did not fix the problem. I was told to wait until it fixed itself.

The difference between Tumblr and my ISP? I pay my ISP over $50 a month. I pay Tumblr nothing.

Thinking critically about the business models of the services you use is a good thing. But assuming that because you pay means that things will be better is a very bad idea.

Assumption: So startups should all charge their users.

The apex of this argument is Maciej Ceglowski’s Don’t be a free user essay, in which he advocates that people “yell at the developers” of sites that don’t charge money.

Look, I’m thrilled that Pinboard has been a financial success for Maciej. I’m a paying member! And he’s right that it’d be nice if more companies could turn their users into customers that support the business.

But not all businesses can be run that way. Entertainment and media companies are rarely able to charge their consumers for their product. My company, Cute-Fight is a fun game, but I couldn’t throw up a brick wall on the homepage and expect it to succeed as Pinboard does. It’s just not that kind of business.

This blind “my way is the only right way” thinking is a poison to innovation and destructive to those of us building free services that dohave business plans. Some businesses require mass adoption to work because they depend on economies of scale or a large audience. There is nothing inherently wrong with that.

What’s inherently wrong is a company changing its terms of service to screw their users. What’s wrong is a company that sells your data without your consent. What’s wrong is a company that scales back customer service to save a buck, leaving its customers angry and frustrated. But those things usually have nothing to do with whether you’re paying them or not. They have to do with the company’s leadership, their level of complacency, and their demonstrated respect for their customers.

Bottom line it, Derek.

We can and should support the companies we love with our money. Companies can and should have balanced streams of income so that they’re not solely dependent on just one. We all should consider the business models of the companies we trust with our data.

But we should not assume that, just because we pay a company they’ll treat us better, or that if we’re not paying that the company is allowed to treat us like shit. Reality is just more complicated than that. What matters is how companies demonstrate their respect for their customers. We should hold their feet to the fire when they demonstrate a lack of respect.

And we should all stop saying, “if you’re not paying for the product, you are the product,” because it doesn’t really mean anything, it excuses the behavior of bad companies, and it makes you sound kind of like a stoner looking at their hand for the first time.

Source

Designing for Humans

Article: Source

There is a growing trend throughout the web community to embrace an understanding of behavioral science, and to apply its tennets to our designs. This progress helps us walk the delicate balance between providing an emotional and pleasurable experience for our users and communicating content and information through clear, intuitive patterns.

When the web was first developed, it functioned as a large database, a means of transmitting information from one server to another. Its design was, inherently, mechanic, and placed little emphases on experience or enjoyment. However, its usefulness as a computing tool was quickly surpassed by its potential to connect. The act of browsing the web grew from a personal, targeted experience (one person looking for specific information) to a multi-user and multi-use phenomena (countless people across the globe exploring a myriad of information and interactions).

Today, the web is a primary means of communication, information-gathering, and enjoyment. Its users have as many interests, limitations, and characteristics as they have faces. I cringe when I hear web design referred to as a facet of “Human-Computer Interaction”, or HCI. Computers are mechanical and thus unable to elicit emotional responses to their users’ needs. If we inject a personal element to our designs, then we can provide an emotionally-driven interaction that is more than just a series of inputs and outputs.

When designing for humans, we recognize the innate differences that each person embodies while accounting for the absolute similarities that all humans share: a sensitivity to group dynamics, emotional stimulation, positive feedback, and familiarity.

THE CLIQUE MENTALITY

Try as we may to distinguish ourselves as unique, the scientific consensus routinely points to our willingness as humans to adopt a “herding mentality,” wherein our decisions are weighted by what our peers are doing. Indeed, as Nir Eyal aptly points out in UX Mag, the need to feel social connectedness informs our values and drives much of how we spend our time. Scientists have found that there is a distinguishable range in a social movement at which this instinct kicks in, outside of which our decision to adopt a product (or opinion, or trend…) is left more to personal instinct than group persuasion. Malcolm Gladwell famously refers to this as the tipping point.

Knowing that this social phenomena exists leads us to dissect how popular sites use it effectively, and gives us direction to apply the successful attributes to our own projects. Facebook and Twitter are obvious examples. Their users interact with the content based on a “my friends like this, so I should too” mentality. This social validation creates a sense of trust. Trust is also achieved when content is posted by a trend setter—a leader in an individual’s network. Either way, the individual endorsement adds value to the content, and that value increases engagement, bringing return to the site owner.

There is no algorithm to when something tips, so agile designers have to build products that provide adequate incentive for the trend setters to participate while keeping all users engaged. There are a number of strong examples of this across the web:

• Dribbble lists shots by popularity, and a popular shot can propel a user’s status skyward. Members of the community have an incentive to post high-quality content, be active in the community in order to gain followers, and post often to increase their chances of reaching the popular page.
• Yelp relies on social validation as its core value. If someone you are connected to recommends a restaurant, that recommendation holds far more weight than a static review, and thus makes you more likely to try it out. Then, there is less social risk to posting about the restaurant after your visit since someone you know has already created a review, making you more likely to return and interact with the site again.
• Alternatively, social media buttons may act as a negative social indicator. As noted by Oliver Reichenstein of Information Architects, a low “tweet”, “follow”, or “like” count can communicate that your content is not worthy of your reader’s trust or time. A high count may be seen as a personal advertisement, which can be just as much of a turnoff. Medium’s approach to the “tweet if you like it” button walks a perfect balance between class and effectiveness.

That button that says ‘2 retweets’ will be read as: ‘This is not so great, but please read it anyway? Please?’

Oliver Reichenstein of Information Architects

DESIGNING WITH EMPATHY

I am going to put it out there that empathy is the most defining of human characteristics, at least in so far that it distinguishes us from our robotic counterparts. It is that sensitivity to what others feel that forms the bedrock of our political, cultural, and social institutions.

Humans react to the emotional cues of their surroundings. Just as our actions follow a herding instinct, our emotions feed off of each other as well (e.g. “misery loves company”). Developing a content strategy that considers the user’s mood and disposition creates a personal user experience. As noted by John Caldwell of UX Mag, a consistent tone of voice makes a brand’s character believable and trustworthy. Without it, customers might have a contradictory impression of the brand.

An excellent example of a company who embraces a consistent, empathetic tone across their brand is Mailchimp. Their online documentVoice and Tone provides excellent insight into how they combine friendly, useful micro-content with a strong brand identity.

Mailchimp’s document Voice and Tone provides insight into how the company successfully combines empathetic copy with a strong brand identity.

We humans react to empathy in product design as well. Comprehensive user research and planning leads to products that are honest, usable, and meet our user’s needs and expectations. This applies to visual design as well as back-end design.

• A site for children will likely have a whimsical, friendly tone, while a news or financial site will showcase a more formal visual aesthetic.
• Sites that are optimized for mobile may serve lower-resolution images and utilize a simple, stripped-down interface in order to reduce strain on the user’s bandwidth.

However, empathy requires more of designers than simply making decisions based on the user’s demographics or other characteristics. A fallacy manifests, Ralph Caplan of AIGA points out, when we as designers misinterperet empathy to mean making decisions based on the observered characteristics of an individual; truely empathic design involves understanding how that individual adjusts their behavior as a result of that characteristic, and compensating our design to meet their altered needs.

Empathy in design focuses on the user as a person, not just a consumer.

Ralph Caplan, The Empathetic Fallacy, AIGA.

In his book Designing for Emotion, Aarron Walter explains this as a hierarchy of our user’s needs: that a product be functional, reliable, usable, and pleasurable, in that order. In this context, we understand that an empathetic designer considers their user’s physical, mental, and emotional needs.

For example, the designer of a site for children may well choose a bright, whimsical tone for the pleasurable effect it would have on its young audience. However, they also may have considered that a bright palette will keep a child’s attention for longer, that a child may need more obvious visual cues in order to differentiate actionable elements, and that large, simple typography is more readable for young people.

As food for thought, consider Comic Sans. While mocking its usage has become a bit of a game for designers, its creator never intended for it to be used as body text, or really for any purpose other than to provide a friendly typeface for children’s applications. Vincent Connare, the font’s designer, realized that there was a need for a kid-friendly typeface that was not only child-like in appearance, but more readable for them as well. Its usage made children’s applications more functional and usable. Indeed, as one teacher notes,

Comic Sans is one of the few (if not only) pre-installed typefaces readily available to the general PC user base whose lower-case ‘A’ is composed in the same manner that a child would learn to write (Comic Sans employs the latin character alpha, i.e. an ‘a’ without the hook on top). In terms of educational instruction, it’s the best available tool for the job; it literally helps to synthesize learning. In terms of its audience, it is perfectly designed.

FEEDBACK LOOPS AND KUDOS

Social trends and emotional responses are both examples of passivefeedback loops. A friend validates something, thus I trust it, thus my friends see that there is public support behind this thing, and so on as momentum builds. Likewise, if a website strikes an empathetic tone, it creates a more personalized experience for me, making me more likely to trust and engage with the website. As designers, we can take advantage of the strength of feedback loops and actively build them into our products.

Humans are naturally curious, and we respond strongly to positive reinforcement. Successfull feedback loops take advantage of both of these facts. Some of the best examples are found in gamification, the injection of game elements such as competition, status-building, achievement, and rewards.

• Mint uses positive reinforcement in the form of goals and visual graphs to make managing finances less of a chore.
• Code Academy and Treehouse are two examples of companies that use goals and badges to help motivate and encourage users to attempt the daunting task of learning to code.
• Quora, Designer News, and Stack Overflow award points to users for contributing content. They further incentivize users to ensure that their contributions are meaningful and relevant by letting other users award them points based on the quality of their contributions.

I’ll forgo a thorough discussion of the components of gamification, since there are excellent examples available elsewhere. What is important is that game elements add fun and personality to routine or mundane tasks, increasing engagement and stickiness.

TRUSTING WHAT’S FAMILIAR

All of the aforementioned principles appeal to the human traits of emotion and trust. We trust the opinions of our friends. We prefer products that are personal and designed with empathy. We respond positively to game mentalities. Finally, utilizing familiar visual and interactive design elements provides the keystone to creating a credible, emotional connection between our users and our product.

The Standford Web Credibility Project found that

…a broad range of design decisions—ranging from visual elements to information architecture to the use of advertisements—can powerfully influence whether visitors are likely to find a site credible. Like human communicators, web sites benefit (or suffer) based upon their appearance. Part of the goal of our project is to understand which design elements have an impact on credibility.

Note that they compare web sites to human communicators, emphasizing our users’ tendency to draw an emotional reaction (for better or worse) from the outward appearance of a website.

Untrustworthy design may or may not be easy to spot. One creeping issue is the prevelance of Dark Patterns, an interface or component that is intended to trick a user into doing something. These include bait and switch tactics, hidden costs, and misdirection.

In addition to avoiding these common pitfalls, web designers can include common design patterns to help visitors feel comfortable with their interface.

• Use consistent styling, content, and metaphors across your site and apply accessible fallbacks. It’s easier to trust a site that is usable over one that is not. Consistent styling of links, navigation, and other interactive elements ensure that a user can interact with the site with confidence. Likewise, adhering to code standards and accessibility best practices leads to providing a seamless experience for all of your users, regardless of the device that they use to access your content. A site that is well-designed from the inside-out naturally seems more professional, and therefore more credible.
• Take advantage of common patterns. There are things we absolutely know about how people browse the web, and designing with these standards in mind will make your site feel familiar. For example, we know that people’s eyes track in an “F-shape” as they browse a site. Knowing this, you can place navigation horizontally along the top of the page or vertically down the left of the page. We know that people expect the site logo to link to the homepage, and for content to be listed from most important to least. As responsive design continues to proliferate, users may come to expect enhanced readability without sacrificing content on a mobile device. Your design does not have to be unoriginal or overly trendy in order to adopt common visual standards.
• Make your interfaces clear and your interactions understandable and learnable. There are a lot of catch phrases being tossed around the design community right now: intuitive design, invisible interface, honest design, to name a few. Don’t get caught up in the hype. Interfaces can be both visible and useful if they are simple and straightforward (read these two articles for fantastic discussions on the shortcomings of the “no UI” movement). It’s ok to introduce new interactions, even if they aren’t inherently intuitive, as long as youteach them effectively.

---

IN SUMMARY

Design for humans injects personality into the computer side of “human-computer interaction.” It uses emotional cues to inspire user behavior and make people feel comfortable and safe with our design, as though the web site or app were an extension of the person themselves. Like brands that have become household names—Kleenex, Kellogs, Google—we strive to make the usage of our products second nature. Creating an emotional connection between your site and your users leads to better retention, engagement, and trust.

Vision [ Mark Zuckerberg ]

Article: Source

After showing Facebook Home, Mark Zuckerberg spent a few minutes talking about the future of computing. What he said is basically the epitome of a vision statement, and it sets the philosophy driving Facebook’s work:

At one level, [Home] is just the next mobile version of Facebook. At a deeper level, I think this can start to be a change in the relationship that we have with how we use computing devices. For more than thirty years, computers have mostly just been about tasks, and they had to be–they were too expensive and clunky and hard to use, so you wouldn’t really want to use them for anything else. But the modern computing device has a very different place in our lives. It’s not just for productivity and business, although it’s great for that too. It’s for making us more connected, more social, more aware.

Home, by putting people first, and then apps–by just flipping the order–is one of many small but meaningful changes in our relationship with technology over time.

When I think about the world today, what amazes me most is the number of people who are getting on the internet every day and how it’s improving their lives as they join this modern knowledge economy. I grew up with the internet, and I can’t really imagine a world without sharing, and messaging, and searching, but actually only about a third of the world is on the internet today–a little more than two billion people. So we’re really very close to the beginning of this. If you look out, maybe five or ten years, when all five billion people who have feature phones are going to have smart phones, we’re soon going to be living in a world where the majority of people who have a smart phone–a modern computing device–will have never seen in their lives what you and I call a “computer.”

So, just think about that for a moment.

The very definition of what a computer is and what our relationship with it should be hasn’t been set for the majority of the world. And when it is, I think a lot of that definition is going to be around people first. We’re about to see the most empowered generation of people in history, and it’s really an honor to be able to work on these problems.

This is a deeply technical problem and it’s also a deeply social problem. This is the kind of problem that Facebook, our culture and our community, are uniquely built to work on. And we look forward to continuing to do it and to sharing what we come up with with all of you. Thank you.

MARK ZUCKERBERG
CEO, Facebook

Watch the video here: Facebook Home announcement, starting at 38:00.

Media Queries are a Hack

Article: Source

The big buzzwords in CSS these days are “modular” and “responsive”—and for good reasons. But we’re still trying to achieve those goals with the wrong tool: Media Queries. What we actually need is a tool that doesn’t exist yet: Element Queries.

This is without a doubt the biggest problem I run into while working on Segment.io. I want to write modular components that I can re-use all over our site, and even across sites—little pieces of CSS, HTML and Javascript that get packaged together once, and don’t need to be tweaked everytime they get used. But CSS as it currently stands won’t let me.

I want write-once, use-anywhere—that’s what modular code is.

Media queries are not that. They’re write-everywhere. They’re relative to your screen, so every time you write a media query for max-width or min-width, you’re connecting the appearance of your module to the width of the entire canvas—exactly what you were trying to avoid.

Change the number of columns in your layout? Update all of your media queries… Change one of your breakpoint widths? Update all of your media queries…

That’s not maintainable.

Here’s a real-world example…

I was working on testimonials for our new pricing page last week, so the example is fresh in my mind. We went around and collected a bunch of nice things our users have said about us, and stored them in JSON files so we can put them up around the site.

Depending on where we show them, the width and height of their parent element will vary. On the Signup page they’re in a column down the right-hand side of the page:

On the Pricing page we put two testimonials side by side instead:

That’s the same .testimonial module in both places, but their context differs.

Now say I want to make them responsive. After a certain breakpoint where the testimonials gets squeezed too much, I want to shrink the avatar and font-size slightly and hide the company information.

The key here is that I’m not only talking about narrow screens. I’m also talking about narrow columns on large screens.

Doing this today, I have to resort to Media Queries, which immediately breaks my modularity. On the Pricing page, I need a breakpoint at around 34em. But on theSignup page, those same styles need to kick in at around 47em.

Now I’m stuck with the same pieces of code in two different page’s styles (or two unrelated pages styled in the same place). It’s not modular no matter how you slice it. And it gets worse! I want to add more testimonials to our Home page. And Ilyawants to add a “Happy Customers” page full of testimonials as well.

I’m going to end up with an unmanageable mess, when all I really needed was the ability to say, “when a .testimonial element gets too narrow, rearrange things a bit”. I should be able to do that regardless of the browser’s width, so that they’ll look good no matter where I use them.

We’ve been doing it wrong this whole time.

Writing modular code is about making small objects, and making them self-contained. Media queries don’t let you do that. In most cases, you don’t actually care about the width of the entire document (or screen), you care about the width of your element.

If a .testimonial element only has 500px of room on the page, I don’t care if the document is actually 2100px wide, I want the styles to reflect that 500 pixels that I have to work with. My styles shouldn’t be:

@media (max-width: 2100px) {
  .testimonial {
    font-size: 0.8em;
  }
}

That’s the kind of hack we’ve been using just to get by. That’s not what we actually want to be doing. We want this:

.testimonial (max-width: 27em) {
  font-size: 0.8em;
}

That’s modular.

Brittle examples are all around you.

One of the reasons I think this need hasn’t been solved yet is because it’s easy tothink that media queries solve all of our problems at first.

One of the textbook media query examples is a super-simple blog. Problem is, a blog post’s width is highly-correlated to the window’s width, so it makes Media Queries seem like a better solution than it is. My testimonials aren’t highly-correlated to the windows width.

But even some of the more intricate examples are better-solved by Element Queries:

This early post about media queries by Chris Coyier is a perfect example of when Element Queries should be used instead. In his example, Chris adds icons to a list of links if he has enough room. But if that email template changes at all, those perfectly-tuned media queries will break. The list of emails should be styled relative to its ownwidth, not the entire email’s.

The same goes for lots of the examples in Brad Frost’s awesome repository of Responsive Patterns. The styles applied to this list and this grid will break if you decide you only want them to take up half of the screen, instead of the full width that media queries assume. When you’re styling this table you don’t really care about the browser’s width, you care about how much space your table has for columns.

Tim Brown’s Molten leading would also be solved by element queries. Instead of needing a truly fluid line-height property, you’d just have several breakpoints for your given element. Each individual element can control it’s own type; the larger the element in ems, the larger your line-height.

I’m not hating on these examples—these guys are awesome and have been influential in me ever understanding media queries in the first place. They’re working with what we’ve got, but we can improve our tools.

So… is this ever going to be possible?

A while back Paul Irish mentioned that “element queries” had been brought up before, but it’s been incredibly hard to find any real discussions about them. Luckily others seem to be coming around to the idea too.

Jonathan Neal recently wrote up his thoughts on what the syntax should look like, and has his own proof of concept. I’m not a big fan of using the media keyword, because it doesn’t make semantic sense once you’re no longer referring to the global canvas, but it’s a good start nonetheless.

I’m sure there are tons of problems to work out to make @element queries possible; I’m not a spec writer or implementor. But I really hope more people start rallying behind Element Queries and they get implemented because they’re really critical to our ability to write truly modular CSS.

Until then we’re stuck with hacky media query or Javascript solutions.

---

PS. For a little look into the kinds of problems that need to get dealt with, take a look at my testimonial example again. I’m changing the font-size on a font-size-relative breakpoint. Mindfuck.

Article: Source

IllumiRoom is a proof-of-concept Microsoft Research project designed to push the boundary of living room immersive entertainment by blending our virtual and physical worlds with projected visualizations. The effects in the video are rendered in real time and are captured live — not special effects added in post processing.

Article: Source

The BMW i Window Into The Near Future digitally transforms passing cars into the all-electric BMW i3 and plug-in hybrid BMW i8 Concept vehicles — and showcases our vision for the future of mobility.

Icon Design Process

Article: Source

A little while ago I was approached by the wonderfully talented  Brian Hoff about creating some custom icons for his site redesign. Thought it would be cool to do a little case study from Brief to finished product.

Size: 18px

Icons: Information architecture, marketing, copyrighting, front end development, multi screen, iOS app, iOS app icon, branding, design, content management system, interface design.

Style: no colour, flat unshaded shapes.

The process

I started with some brainstorms and sketching. Tried to grasp some sort of style and nail each message before jumping into illustrator. A few things I constantly kept in mind were that the icons would only be displayed at 18px so they would have to sit nicely in a square without loosing too much space, at this size I try to use as many pixels as I can to convey the message. Most details need to be taken out, simplify then simplify again, if the icon has lost it’s direction then I go back a step.

After I’d settled on my ideas I jumped into illustrator and started to mock the icons up. This part of the process is great to really get in and make the best of each icon, make copies to play with ideas. Yes you should try to stick with the direction of the icon but usually I stumble across some awesome ideas that really work when I’m just pulling and pushing the icon in different ways.

Tip: instead of having a new file for each icon/concept development, try to make the whole set and it’s concepts in one illustrator file. Keep the icons you like best towards the top or bottom again all together. This helps you see from an early stage if the set works together or if there are the odd few “sore thumb” icons that need moulding a little more.

At this point I took out five concepts for the icon “information architecture” and sent them to Brian. This is what I sent …

Each of these icons have something different to offer, hold a different style. Even the way they are pixel hinted would depend on what style Brian was looking for. Information from this one icon concept would be able to pave the way for the whole icon set. After a short skype chat, Brian told me he liked the icon to the far right. Rounded corners, more friendly, gives it a little more character. So based on this decision I went forward and built the set from there.

Next step was to pixel hint the icons. This is probably my favourite part of the process. It’s like fitting a little jigsaw together, really tricky and sometimes stressful but the moment I realised I’ve got it right is one of the best part about being a designer, such a wicked feeling. I’ve attached a screenshot of the “marketing” icon from pixel hinting view to actual size. You can see here, the characteristics of the icon come into play, a different shade of pixel can create the loveliest curve or indent to give the icon personality. This was one of the most difficult to work on due to the graph line and overlapping lines.

Tip: when working on diagonal lines at this size you’ll drive yourself crazy trying to get it perfect. My approach is to hint the shape around until you get about 5 or 6 solid black squares to form the line then slightly maneuver the points around it to create a outer cushioning. Eventually it will fall into place. Pixel hinting takes time and perseverance, no short cuts here I’m afraid.

So after hours of hinting and perfecting each little pixel I contacted my “Mr Miyagi”  Gavin Elliott and I threw the final set up on dribbble for some feedback here. Big thank you to Rogie, he pointed out that the cog I’d initially made didn’t really sit right with the set. This happens to me a lot, especially on projects I’m so close to for hours on end, your mind can become immune to how something, looks thats why I always get feedback. A fresh pair of eyes on a project can do wonders. So I changed it up, when right back to the start and developed the vector asset, pixel hinted and placed into the set. This was just what it needed.

So here are the final icons, I sent them over to Brian for feedback. There where the odd few tweaks to make and Voila! there you have an icon set!

Thanks for reading guys!