Author Archives: John McGarrah

About John McGarrah

John McGarrah is SEO Designs' CEO and Founder. Since 1998 John has been at the forefront of Internet Marketing with small and medium size Businesses. He continues to stay ahead of the curve and offers innovative insights to the world of internet marketing. John wide array of skills from content management systems to full website marketing including AdWords campaigns, paid search, real-time analytics tracking and search engine optimizing.

wordpress-checklist

The Killer WordPress Checklist

So, You are working on a WordPress Project? Awesome!

It’s a big struggle in remembering the steps involved in setting up a WordPress website.

And we soon realized that, there were hardly any checklists that covered all the aspects of WordPress together!

That’s when we decided to create “Killer WordPress Checklist” that would cover everything from the pre-launch directions and development process, to SEO, maintenance and security.

Honestly, this checklist has worked wonders for us and hope it does for you too!

Wordpress Development Checklist

[via Capsicum Mediaworks]

image-guide

The Complete Social Media Image Size Cheat Sheet: [Infographic]

It’s a lot of pressure to stay active across every social media platform, and it can be hard to keep up with the latest trends and techniques.

But like it or not, social media is here to stay. And entrepreneurs, business people, marketers, and others with a message to get out are taking notice.

Why? Social media can be an enormously useful tool in the business world. You can boost brand recognition and loyalty, connect with potential or current customers, advertise products and promotions, share helpful or inspiring content, and more. Best of all, getting started on these platforms is free and just requires an investment of some time and creativity — which can pay off in big ways.

It’s worth noting that sharing visual content on social media can be particularly effective for increasing engagement with your audience. According to HubSpot:

  • Facebook posts that feature photos account for 87% of interactions on the site. (Source: eMarketer)
  • Tweets with images receive 18% more clicks, 89% more favorites, and 150% more retweets than those without. (Source: Buffer)
  • Even tweets that only have a link to a photo or video receive a boost in retweets averaging 35% and 28%, respectively. (Source: Twitter)
  • In 2014, 70% of marketers planned to increase their use of original visual assets like infographics and memes. Visual content also ranked first among content types marketers want to learn more about. (Source: Social Media Examiner)

Plus, image-centric networks like Instagram and Pinterest have been growing by leaps and bounds. So there’s no better time to start creating your own social media images and graphics. Above all – your first concern should be that your visual content is being seen how you intend it to — that the dimensions are right, so nothing gets cut off or stretched out of proportion.

But don’t strain your brain trying to remember how many pixels go where or scour each site’s help section for the information — instead, bookmark this page and use the infographic below as a cheat sheet for creating all your social media images.


[via Canva]

the-best-times-to-post-on-social-media-infograph

(Q) How often Should I Post on Social Media?

Social currency is an important metric when it comes to promoting your brand. Your likes, followers, pins, and posts all say a lot about your success, and the more engagement on your social platforms, the more likely you are to pull in clients. But how do you maximize engagement and get the most people to see your content? While there is no perfect answer, there are a few things you can do to optimize your social media strategy.

Timing Is Everything

Understanding when to utilize each of your social channels is vital to propelling you and your business to the next level. People use different social platforms at different times of the day and are more active during different parts of the week. Making sure your content gets in front of the most eyes relies on making sure you post when the most people are checking each different social site.

Instagram

Instagram was built around photography, and if you are on just one social media platform, make it Instagram. People go on Instagram to look at photos and when they find a good photograph, they are likely to like or comment on them. You don’t have to fight with competing content like articles, quizzes, and games like on other social platforms. The simple way to get more likes is to post good content when the most users are scrolling through.

Post Photo to Instagram

While there is no statistically optimal day for posting on Instagram, digital marketing company TrackMaven suggests posting at the tail ends of the workday when users are most likely on their phones. Their report showed more users interacting with content during off-work hours during the regular work week.

Each user is different, and drilling into your own analytics can help you learn even more about when to post. Use tools like IconoSquare, TakeOff, and Latergramme to know more about when your account is most active and help shape your Instagram strategy.

Facebook

Think of how you use Facebook. Unless you’re blocking invites from Farmville, you’re probably on Facebook to kill time. The closer it is to the end of the workday, the more people are on Facebook. This is your chance to strike.

Post Photos to Facebook

Whether you have a Page for your photography business or are just posting to your own personal timeline, the best times to post is between 1–4 p.m., spiking around 3 p.m. Additionally, the closer you are to Saturday the better, with more engagement happening during the second half of the week as people daydream about the weekend.

Facebook has an algorithm and not every one of your friends or followers will see all of your content. While very few people actually know what goes into Facebook’s algorithm, it’s a safe bet that the more engaging your content and the more people engage with your page, the more likely your posts will show up on their timeline. Lucky for you, photos also help generate higher engagement with 53 percent more likes and 104 percent more comments. So make sure your photography looks good.

Twitter

Twitter might not be your first thought when it comes to promoting your photography, but your content has some of the highest potential to grab the most eyes due to how open Twitter is. One retweet and your photos can show up on hundreds of new users’ feeds. It’s harder to get people to share on Facebook, and Instagram doesn’t even support a share feature. So posting to Twitter in addition to your other social platforms could be beneficial.

Post Photo to Twitter

People check up on Twitter during their down time throughout the day with users 181 percent more likely to be on Twitter during their commute and scrolling at lunchtime. The optimal times to post are 12 p.m. and 6 p.m. during the week, with 5 p.m. being the optimal time for potential retweets.

Be careful with Twitter. Instagram and Facebook do not always play nice when pushing content from their own respective apps. As is true with almost all social media sites, photos drive more engagement and Twitter currently only posts a link to a photo when you post from Instagram. It’s better to post a photo separately to Twitter so your work shows up in your followers’ feed.

Pinterest, Tumblr, and Google+

Facebook, Instagram, and Twitter are not the only games in town. Photographers also post content on many other social networks including Pinterest, Tumblr, and Google+, and each come with a different set of optimal posting times.

Pinterest Tumblr Google Plus

Pinterest is for weekenders. Most people scrolling through Pinterest’s seemingly endless supply of recipes, DIY projects, and wedding dresses do so Saturday morning. The worst time to post: during the work week. Make sure your pins include your information so people who repin your photos can find you.

Tumblr is for all-nighters. Many photographers use Tumblr’s more open platform for portfolios of their work. The best time to upload new content is between 7–10 p.m. Users spend, on average, more time on Tumblr than they do on Facebook!

Finally, Google+. There are some diehard users out there so don’t cast it aside. Google uses Google+ in their SEO so posting some of your photos to your Google+ account could be advantageous. But unlike Tumblr, Google+ is most active in the mornings around 9 a.m.

Get Organized and Simplify Your Life

With all these different times to post photos to the internet, it can easily become a full-time job. If you’re going to take your social media presence seriously, it’s important to have a plan. Use tools like HootSuite and Buffer to schedule your posts to different sites. Dig into the analytical data on your followers with information from the platforms themselves like with Facebook Page Insights. Understanding your followers only helps you engage with them more and share content with them that you know they will like.

Having a clear workflow can save you a lot of time. Know what social platforms you want to be on and keep it consistent. Users like when people they follow post and share at a relatively similar time each day. That doesn’t mean you need to post something new each day, but you don’t want to surprise them with erratic behavior. We like to know what to expect. We are creatures of habit after all.

Do you have a social media strategy? How do you plan when to post your photos online? What are some of your best practices when it comes to posting?

[via Fstoppers, Fast Company]

Acko_tiny

Innovative and Creative Web Layouts

The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.

An original, creative layout goes a long way to improving the user experience of a website, although not letting your creativity get in the way of usability is important. As usual, we have to put ourselves in the users’ shoes: What do we want them to see first? How will your message be best communicated? We have to ask these questions before we start designing, because the layout will shape the rest of the design.

Well, the following websites have some quite… unusual layouts. They aren’t necessarily perfect; still, browse through them, and maybe, just maybe, your creative genius will be sparked.

Original Web Layouts

Beurre & Sel
This website is just beautiful. The automatic slideshow plays in the background, with the main navigation bar at the top. As you scroll down, the navigation shrinks but remains fixed at the top. Below is a colorful list of the different cookies the company makes, but these also serve as buttons in a submenu. When you click on a flavor, information overlaps this submenu, allowing you to click through the assortment of cookie flavors. The navigation bar at the top and the submenu are confined to the middle column of a three-column grid, maintaining the user’s focus at the center.

Beurre & Sel

Hackery, Maths & Design
As the page loads, a fun 3D line animation starts to fill the screen. The arrows indicate movement and fluidity and encourage the user to scroll down toward the content. The content below is laid out in a three column grid with two main columns and one smaller side bar. However, it doesn’t feel boxy and constrained but has a more open feel — this is due to the ample space given and the use of rounded corners. The lazout of this site is comfortable for the user.

Hackery, Maths & Design

The Drawing Room
I love this layout, simple yet so visually interesting. The studio’s work is displayed in diamond shapes of different sizes that fit together. The center diamond is the nameplate, which isn’t too prominent and so doesn’t detract from the work. As you hover over a diamond, it fills with a description of the work. This single-page website has an original and clean layout that it easy to use.

The Drawing Room

We Love Noise
Luke Finch’s portfolio has a fun and friendly layout. The work seems to be haphazardly scattered, breaking away from too clean and predictable an approach. The transitions tell you a bit about the projects, and you can navigate using the arrows. The little heart in the top-left corner is the navigation for the whole website, it swivels into an “i” on the home page. When viewing a project, you can exit by hovering over the heart.

We Love Noise

Ende
This layout is dynamic. Upon loading, it greets you with a quirky photograph and prompts you to scroll down, where the navigation appears and eventually affixes to the top. I really like the transparent navigation bar, which opens the page up a little, revealing the content underneath. The content is scattered around the page, although the website does have structure; each section is set off by a different background color. The projects are prominently displayed in a three-column grid, but the section for the team members breaks away from the grid and uses the space in an interesting way.

Ende

Edward Carvalho Monaghan
How’s about some color? This portfolio website has some serious personality, and the work is loud and lively as it moves about. Most effective is the consistency in style. The website coheres as a complete work, representing the designer while supporting the individual portfolio pieces — which is precisely what such a website should do. The color palette is incorporated in the nameplate, and the flashing animation brings energy to the website.

Edward Carvalho Monaghan

Huys
This site has an original take on layout with the right side of the page acting like a kind of letterhead, providing all the necessary information like who they are and what they do. The left side of the page scrolls vertically and resembles the layout of the windows of the condominiums they build. Once you click, you are directed to a more blog-style layout which is easy to navigate.

Huys

KathArt
KathArt has a great video layout. The personality just about oozes from this simple yet highly effective design, as you meet the members of this team. The team members are introduced as they’re working, as though you’re in the office with them! The navigation as a timeline is clever because you can track the progress of the video easily.

KathArt

Wacom
Wacom targets a wide audience of both professional and non-professional creatives with its website. The layout is an integral part of this and creates a user-friendly experience. The navigation on the left minimizes when hovered over, and it shows the various categories available. The user is in control and can choose which products to look at; they are not coerced or subjected to a sales pitch. The layout of the home page is simple and guides the user to the product that best suits their needs. I like the subtle hand-drawn elements that accompany the products.

Wacom

Amsterdam Dance Event
The layout here really helps to showcase the attitude and spirit of this event. The navigation runs down the left side, becoming a reference point across the website. A slideshow of strong, visually stimulating images rotates, with teasers for the event’s festival, playground and conference. This is an effective way to engage users.

Amsterdam Dance Event

As you scroll down the page, the content below slides over the slideshow, bringing the submenu from the bottom to the top. Each section of the website has a banner that runs across the screen, making for a visually appealing introduction to that section. The rest of the articles are laid out in a grid. The rows in the grid don’t line up perfectly; each column starts slightly lower than the last — another small yet effective visual device.

Cropp
Cropp has a big and bold personality, and the layout showcases it. As you hover over an image, the image pixelates beyond recognition, which grabs your attention. The navigation bar at the top is consistent across all pages, and the home page is basically a loud, visual representation of the options in the navigation. The layout captures the idea of pixellation, and all photographs and videos are laid out in blocks, like a pixelated image.

Cropp

Neue Yorke
The grid layout for Davy Rudolph’s portfolio is simple and minimalist — pretty straightforward and natural to the user. Each page has only two colors, unique to that page. When you click on one of his projects, the showcase takes precedence, and the main navigation panel disappears. What I like about this approach to a portfolio website is that, while it has personality, the personality does not detract from the designer’s work.

Neue Yorke

Juliana Bicycles
Juliana has a rather unusual and innovative design for a bicycle store. Upon loading, a beautiful photograph fills the screen with richness and warmth. The website is laid out in four sections, which are kept hidden behind the navigation icon. The design seems to have a more feminine touch, and the typography is bold and strong with a bit of flair. The 3-D hover effect on the bicycles is a nice touch as well.

Juliana Bicycles

Esquire
The layout here is simple, clean and accessible. Esquire’s identity is a monochromatic black and white. The article teasers are in color, drawing the reader’s eye. The hover effect is also simple, with a description below the teaser caption. The navigation is in the middle of the website, functioning much like a newspaper, where the reader becomes intrigued by the content above the fold. The images, color and brief headlines grab the user’s attention.

Esquire

Institut Choiseul
Intitut Choiseul has an attractive block layout that fits together like a puzzle. The layered look with the slabs of color help to establish the identity. Further down the page, the layout transitions to a more traditional grid, although each story is in a different-sized block, creating an interesting and dynamic aesthetic. The different blocks of color set off the different parts of the website, making it easy to navigate and read. The website has a sophisticated and refined quality, suited to its purpose.

Institut Choiseul

Award
Award celebrates creativity, and its neutral design aesthetic sets the stage for the designers’ work effectively. The grid layout doesn’t have any trim or frills that would detract or clash with any of the designs being featured, but the interesting hover effect has a nice pixelated drop-shadow. The navigation is fixed to the left of the page, and the search and filter functions are fixed at the top. This navigational arrangement is best suited to showcase the contents of the website.

Award

Harry’s
The experience of this website is lovely. The designers make great use of the grid, which has a classic appeal appropriate to the target market. The open, clean, structured design makes for a pleasant user experience. Being a website that sells men’s razors, Harry’s features images that are sophisticated and manly without feeling brutish.

Harry's

The King’s of Summer
This Tumblr website conveys the charm of this movie with the layout of photographs, the occasional GIF, and quirky lines from the movie. It has a structured yet not uniform layout that is fun to scroll through, and the handwritten type for the title helps to establish a scrap-book feel. The unique arrangement of content blocks creates an interesting visual, with pictures and GIFs overlapping every now and then, guiding the user’s eye around the website. A movie website should convey the complex personality of a feature-length film, and although I haven’t seen this movie, I definitely have an idea of its personality.

The King's Of Summer

World Baking Day
The layout of World Baking Day requires interaction of the user right from the get-go. As the page loads, you are prompted by an animated hand-drawn arrow to choose your baking level. If you choose to view all recipes across all levels, instead of one at a time, then you’ll be greeted with an entire screen full of delicious, mouth-watering recipes.

World Baking Day

The layout treats food like a work of art, showcasing photographs of the baked goods on most of the page and redirecting you to another page for the recipe itself. The recipes are neatly laid out in three columns: ingredients on the left, instructions in the middle, and information about the contributor on the right.

Paper & Paint
The layout and interaction of Paper & Paint is original. As you navigate, the website almost snaps from section to section, and the layout and structure are appropriate to the product. The navigation is hidden and appears when you select a color scheme. The images are prominently displayed as you scroll through, and the top of each subsequent image teases the user, inviting them to scroll to see more.

Paper & Paint

I love the way the images move inward as you scroll down the page, making for an interesting visual dynamic. Another nice interactive feature is “painting” the wall different colors using your mouse, which adds a bit of fun.

Newsweek
This layout is anything but conventional for a news website. The home page of Newsweek is simple yet bold, with the photograph for the lead story set as the background image. The small red tabs throughout signpost the website, indicating the types of stories being featured. The layout is broken up into sections that don’t all follow the same grid. The “Newsmakers” section makes use of a standard grid but breaks away from the conventional table look, with some of the images appearing as circles, instead of the usual squares. As you scroll down, the same pattern for each day’s news is laid out in this way, which creates a consistency that is easily understood by the reader.

Newsweek

Abby Putinski
An original approach to a portfolio site, Abby Putinski seperates herself as a creative illustrator and graphic designer. Upon loading, an animated introductory window falls onto the screen inviting the user to explore her work. Once you close the window you move around a map compiling all her adventures. This site doesn’t really have a layout and is free and open with no clear boudaries, making it so interesting to navigate. When you click on a work, the image in a postcard-type frame falls onto the page, reiterating the idea of adventure and travel. The navigation is always available and fixed to the top in the same illustrative aestheic.

Abby Putinski

Baumastisch
This tight grid layout is a nice way to showcase a portfolio of work. When you hover over each piece, the title is given but when you click on a work, a “front page” for the work appears. This page provides all the necessary information about the project, such the date, the client, the desinger’s role etc. which is consistent throughout all the projects. You have to click through a slideshow that fills the screen to view the project. I think it’s a really effective way to showcase work.

Baumastisch

Norwich University of the Arts
The strong photography and beautiful images do a great job of showcasing the artistic talent at this university right from the start. The background image on the home page tells a story, drawing the user in. I like the layout of the navigation to the side; it is different but works well and doesn’t overpower the image or layout. The labels are all yellow, creating a consistent visual identity. The drop-down menus take prominence when a category is clicked, which the layout accommodates well.

The logo also caught my attention, with its neat Helvetica lettering. It isn’t overpowering, but the tilt of the “N” adds something different, a little spunk. Our first impression is established by the large background image, but then an arrow invites us to scroll down to view the various stories, which are featured as large thumbnails with captions. The rest of the page is fairly conventional.

Trask Industries
Trask Industries is a viral website for the new X-Men movie. The layout is simple but effective. It is divided into three parts, with the navigation sidebar fixed to the left, a video in the center, and the main content scrolling vertically on the right. The video used here works well to create anticipation for the movie. The animated hover effect in the navigation icons is a nice touch. The point of the website is clear, as demonstrated by the prominence given to the video. The transitions are rather nifty, as the content sections slide out and back in. Also, try resizing your browser to see how the layout changes — the navigation is hidden, with the content visible as you scroll down the page.

Trask Industries

Adam Hartwig
This website is really interesting for its seeming lack of layout. It is created with Flash-like animated typography that continues to autoplay throughout the website. Even without clicking through the various categories, the user gets an idea of the designer’s work through the animated slideshow. The animation is consistent, and the illustrations are cute and do a great job of illustrating the designer’s creative personality.

Adam Hartwig

Contad
Everything here — the CSS, HTML, JavaScript and SVGs — animates as you scroll. It’s crazy! The bright colors are stimulating, and the design is made up of intricate illustrations. The downside is that the website was developed only for desktop computers with a mouse, and it works only in Chrome.

Contad

National Academy Museum
This layout has a layered feel, exhibiting a modular approach. The different elements on the page seem to overlap one another; for instance, the navigation bar stops about three fourths of the way across the page. The photograph lies below the navigation, and the buttons and captions are written in colored blocks, adding to the modular layering aesthetic. I also like the drop-shadow effect with the drop-down menus in the navigation, which creates an interesting depth.

National Academy Museum

Andrew McCarthy
Andrew McCarthy’s portfolio has a unique layout. Bands of color wash the page, and more information about the designer is revealed as you scroll down. A clever stop-motion graphic of a pixelated feline runs in place as you scroll. I love the movement created by this simple idea. Incidentally, the website also relies on the interaction of the user.

Andrew McCarthy

Mikael Edwards
Animation, when used wisely, can really contribute to the functionality of a website. Mikael Edwards uses animation that is both visually appealing and functional. We’re designing for the Web, right? There is no need to squash everything onto the page or wrap text around images. Why not include interactive animation and make it fun? This idea works well here as a hover effect. The blue dot represents the cursor; as you move the mouse in, the image shifts, making space for the text.

Mikael

Designer’s Friend
Not quite what you were expecting from a designer’s website, right? Designer’s Friend looks like the HTML code behind the website itself. Everything you need to know is right there in the code, with the tags acting as headings. The “Tip of the Day” box is a wonderful device that guides the user through the website.

Designer's Friend

Hatched
The layout for Hatched is anchored by the navigation and sections that run wide across the screen, creating a boldness and openness. The responsive navigation is interesting. On a smaller screen, it could look clumsy; but here, the navigation, including the social network buttons, is kept to one menu button.

Hatched

Institute for Emerging Issues
This website has nice consistent transitions, with the circles popping up as the page loads. The website is well structured, and the circles create a friendly counterpoint to the statistics below. The captions in the “Challenges” section look like speech bubbles, adding to the friendly atmosphere. The hover effect on these captions is visually appealing as well as functional. The user is not bombarded with statistics because the numbers are hidden and revealed only when hovered over.

Institute for Emmerging Issues

Into The Arctic
The layout of Into the Arctic engages the user and incorporates their interaction. The video in the background captivates the user and illustrates its cause. The style of the navigation is different — as you hover over it, it folds out with more information, like a pamphlet. The typography is also alluring, and the pull quotes are particularly strong. The design of the website is just really well executed.

Into The Artic

John Jacob
This portfolio has horizontal scrolling, which is very unusual. When you click to view a work, it unfolds to the middle of the screen, with an enlarged view and a short explanation of the work. The descriptions and list of work are short and concise; you don’t feel like you’re constantly being redirected to other pages. I really like the navigation, clustered in the top-left corner with the designer’s social network links in the bottom-right corner, framing the page. The designer uses the space effectively, and the swivel effect is interesting.

Postable

Impress
The white space here is refreshing and creates an openness and friendliness. White space allows the user to read and navigate comfortably and to use the website effectively. The hover effect is different; it is as though half the paper folds up. When clicked, the button folds over like a book to reveal more information.

Impress

Postable
Postable has a cute concept; it sends beautifully designed thank-you cards by email for you, and the design of the website has a real snail-mail look. The design and layout throughout play an integral part in communicating the concept. The background has a real paper texture, with a top border resembling an old-school envelope. The authentic real-life feel is a lovely touch on the Web form, as though you’re scribbling your information on a sheet in a notebook.

Postable

National LGBT Museum
This website has a new take on single-page layouts. The scrolling mechanism here is really cool; the page splits in half, with the two halves scrolling in different directions, creating a dynamic effect. The sections are in different colors and snap together as you scroll.

National LGBT Museum

Lucas Nikitczuk
I really like the layout of Lucas Nikitczuk’s portfolio because it showcases his skill. It gets straight to the point, with a short biography of the designer and his work right there on the home page. The circles create a friendly and fluid aesthetic. The paint spills in the background add to this and create an openness and freeness to the website’s identity. The navigation is pretty simple and works the same throughout the website. Another nice touch is that you can navigate with the arrow keys, which is helpful for laptop users.

Lucas Nikitczuk

Conclusion

The layout is the foundation of your website and a crucial part of any creative endeavor. Consider the user and how they will interact with the website. Will they likely be viewing your website only on a mobile device? How would that affect the layout? I hope you’ve gleaned some inspiration to tackle some layout designs yourself!

(al) (il)

Source: Smashing Magazine

On Creative Leadership

I have spent nearly a decade experimenting with a single goal in mind: to create scalable, predictably insightful, inspirational environments. I have led creative teams in these environments, and I’m currently doing it as the Director of Web Interface and Development at Astonish (a digital marketing company in Rhode Island, US).

It hasn’t been easy, because forcing inspiration is impossible. You have to use finesse and let it come to you. What follows is what I’ve found to help my team and me harness inspiration effectively.

Accessing Your Creativity …In The Shower

It’s 4:30 in the morning. The sun is starting to smear pink across the sky, and I’m in bed, working. Laying in bed in the dark is comfortable, but it’s hardly a working environment. Yet, I am solving problems. At this moment, I am more connected with my subconscious (the most creative part of my brain) than I will be at any other time today.

I have been practicing this combined meditation and creative thinking for several months now. It has been a hugely beneficial experiment, which started early one morning in the shower. Ever have a great idea in the shower? I have had hundreds, and I now know why.

Your morning shower is a breeding ground for ideas and sparks of inspiration. When you stumble into the shower shortly after you wake, you’re able to relax and, because you’re still tired, you’re able to reconnect with your subconscious. I’ve found this state to be so helpful in solving problems that I’ve had to devise ways to take notes on the shower wall.

shower-curtain_mini
The relaxed state of your morning shower helps you to reconnect with your subconscious. (Image source: Simon Law)

My wife is constantly surprised to find product diagrams, flow charts, code and wireframes written in soap, kids shower crayons and anything else I can find. I’ve even considered painting the walls with idea paint, to have a bit more creativity.

I’m sure you’ve had a spark of inspiration or maybe just a moment of clear insight in the shower. I’ve asked many people about their creative abilities during their morning routine, and the answers always support my assumption. The reason? It’s because your insight, inspiration and creative abilities were always there; they’re just more accessible in that relaxed state because you are not grasping for them.

Science

You see, the harder you grasp to be creative, the more easily it slips through your fingers. Have you ever noticed how difficult it is to sit down at work and just flip on the creative switch? Do you find yourself intentionally distracting yourself? Browsing Amazon, reading your news feed and skimming Facebook are all ways to indirectly access your creative abilities. Sometimes it’s important to turn off your desire to be creative and just let it come to you.

Artists depiction of the right and left brain.
Distraction-free environments help our brains to “take our minds off the problem” just long enough to get the answer we’re looking for. (Image source: TZA)

John Kounios of Drexel University studies the brain and looks for scientific explanations for the delivery of insight. In one study, Kounios asked subjects to solve puzzles while undergoing a brain scan. He found that insight, or the inspiration needed to solve a problem, comes from the visual cortex. However, in the time leading up to a puzzle being displayed on the screen, the subjects’ brain activity was around the temporal lobe. As Kounios explains in his TED talk:

“This is the mind turning in on itself. This is the mind disengaging from the world. This empowers a person to imagine new and different ways to transfer reality, creatively, into something better.”

Our brain looks for a distraction-free environment to get inspired. This might seem a bit contradictory to what I just said. Believe it or not, your intentional distraction (Amazon and Facebook) can help to relax your brain and “take your mind off the problem” just long enough to get the answer you’re looking for.

Managing A Team

This creates an interesting situation for individuals in a corporate environment. Small studios and agencies usually respect and understand the creative process a bit more. I’ve known a lot of directors who understand the need for a little distraction at work, even if they don’t really know why it works.

When it comes to managing a team of creatives, you have to balance finesse and creative leadership. In fact, I like to eliminate the word “manage” altogether. Take a Web designer. A Web designer already needs to manage their time, creative process, projects, clients and more. Isn’t that enough management already?

If you have the right people on your team, they shouldn’t need to be managed — they need leadership. They need someone to pull them to an answer, not push them. If you trust your team, they’ll come through for you. However, they’ll do a much better job of it if they enjoy their work and are trusted to work openly when they want to. Why restrict your team? Why force them to work the way you want them to or even when you want them to?

trust_mini
Trust and good leadership can steer your team to enjoy their work and do a much better job. (Image source: opensource.com)

This notion that a creative team should have working hours, such as 9:00 to 5:00, baffles me. Sure, I get it: Your accounts team answers the phone during that time. Well, the fact is that they don’t need to be inspired to answer the phone. And yes, motivation and inspiration are very different.

Work With The Grain, Not Against It

An extremely talented designer and front-end developer named Jeff is on my Web development team. Jeff commutes 30 miles to and from work every day. Having a set schedule from 9:00 to 5:00 would require Jeff to get up earlier every morning to fight traffic for over an hour. Sitting in stop-and-go traffic and getting frustrated by the people around him doesn’t exactly scream “distraction-free moments of inspiration.”

Having the freedom to arrive at work around 9:30 or 10:00 cuts Jeff’s commute by over 25 minutes. Does this mean that Jeff works less? Absolutely not! Not only does Jeff make up his time, but he also works smarter. And because his day starts off with way less stress, he’s even more likely to enjoy his work and stick around to get the job done.

This is just one example; there are hundreds. Some people like to listen to music while they work; others play Netflix in the background. Sometimes a good meeting can get a team in the right mindset; other times, they just want to be left alone. Lead people with respect and trust and you’ll get so much more out of them. Not to mention that you’ll learn whether they are the right fit for your team.

There is no better way to make the cream rise to the top than by letting it sit for a while. If you keep stirring it, you’ll never get it to settle.

“Rage, Rage Against The Dying Of The Light”

As a leader of creatives, your job is to provide an insight-sparking, inspirational environment, while guarding against distraction.

The creatives on my team work smart and fast. They do this because they are in touch with their brains’ ability to perform different tasks. At 4:30 in the morning, I might be working on a problem that I went to bed with. You might work on a coding problem at 11:00 pm until about the time I wake up. We are all different; the important thing is to know why and how we are different.

I get to know my team and work closely with everyone on it. They all have different needs and like to be communicated with differently. At the same time, they all enjoy working on different types of projects at different times.

Each member of my team has an inspiration schedule, a time when they know they are more likely to be creative. During those times, there are no meetings, distractions or interruptions. This is their time to increase their working memory, to build, to design and to solve problems.

Being a leader, my job is to help them understand what this time means for them and to fight anyone who jeopardizes it. Don’t dismiss this point. It is vital to the clients, products and team that your creatives have the time to do their job right. Remember that they will get the job done either way, because you trust them to come through. Wouldn’t it be better to ensure that they have time during the day to do it, when they have allocated time to do it, rather than bombard them with meetings and problems?

Finding And Feeding Inspiration

It’s as if the sky parts and a divine entity comes down and delivers the answer directly into your brain. Understanding where inspiration comes from or how you’ve solved the problem isn’t easy, but at that point you don’t care because you’re off and running.

In 2013, learning code, understanding design patterns and analyzing data are extremely easy. Our tools, documentation and frameworks are accessible and ubiquitous. What’s both rare and stubborn is a great imagination. The concept of “thinking outside the box” is based on the idea of being creative with knowledge.

Imagination is vital, but without inspiration, it can lie dormant. If imagination is the playground, then inspiration is the gravity that pulls you down the slide, bounces you on the seesaw or propels you on the swing. Without inspiration, imagination is as pointless as a slide in outer space. It’s the powerful force behind creation.

Harnessing inspiration is almost impossible. Yet, we can cultivate ideas by finding patterns in our moments of inspiration. We’ve already talked about relaxation, daily schedules and the link to your subconscious. What about your mood and other factors that play into it?

Music

I love music. In fact, music is the only thing I love more than food. Music comes in so many different forms, is readily available and is creative in itself. I bet you already know that different types of music have different effects on people. Some types help you to concentrate, while others make you want to get up and dance; some types help you to relax, while others keep you up all night.

I remember my science teacher in school telling me that listening to classical music helps mice navigate a maze faster than listening to heavy metal. Is this really true?

Remember when we talked about John Kounios and brain activity around the temporal lobe? Well, that temporal lobe is in charge of receiving auditory signals, such as from music. When your brain activity is focused on this area, it’s redirecting energy from other areas, helping you to concentrate. This, and the fact that music has a direct correlation to increased amounts of dopamine and adrenaline, means you can have a direct and significant emotional response to the right type of music.

brain_studies_mini
When your brain activity is focused on this area, it’s redirecting energy from other areas, helping you to concentrate. (Image source: opensource.com)

Classical music is very rhythmic and, oddly enough, predictable. Classical also usually has a slower tempo, less than 60 beats per minute, whereas pop and jazz have unpredictable variances in tone and rhythm and often a much faster tempo.

Why is this important? Remember that the more opportunities your brain has to turn in on itself, away from distraction, the greater the chance of finding insight. Classical music lends itself to a distraction-free environment and provides relaxation, which the brain enjoys. You’re favorite Coldplay song might trigger a powerful emotional response, but that type of music is actually better saved for menial tasks. Upbeat pop music can help you stay on track by distracting you from what you are doing, which is helpful when you’re inputting data and answering emails.

Vinod Menon, Professor of Psychiatry and Behavioral Sciences at Stanford University’s School of Medicine, has written an interesting article on the subject. In the paper, Menon writes about music’s effect on the brain during an MRI. To simplify, the brain performs better when predictable patterns are in the music. During sudden breaks in the sound, the brain reacts to check on what’s happening. Your brain turns its attention back to the music, rather than stays on what you were concentrating on.

Experiment with this theory on your own. I have found Italian opera to be particularly conducive to creative thinking. Take some time today to create a short playlist on Spotify. Add five to eight of the top-ranked classical pieces, then drop in an AC/DC song. Shuffle the playlist, and then try to focus on a task. I bet you won’t even consciously hear the classical music (once you get into the groove), but when “Highway to Hell” comes on, you’ll be pulled away from what you’re working on, as if waking from a great dream.

Weather

Controlling a playlist is easy, but one thing science may never solve is how to control the weather. And what has the human race done for thousands of years when it can’t control something? We try to understand it, which helps us control our response to it.

The things in this world that affect our brain are absolutely amazing. For example, even subconsciously, wet and rainy weather will depress us, while beautiful sunny days will make us happy. So, if we have a big creative deadline and the forecast calls for rain, we must be screwed, right? Wrong.

As Joe Forgas of the University of New South Wales puts it:

“It seems counter-intuitive but a little bit of sadness turns out to be a good thing.”

You see, memory is actually more active and accessible during periods of sadness. Forgas studies the brain and the weather’s effect on it. He found, surprisingly, that subjects retain more information on rainy gloomy days than subjects who are asked the same things on beautiful sunny days. In his book Imagine: How Creativity Works, Jonah Lehrer attributes this as the reason why some tortured artists are so amazing at what they do.

Memory, especially our working memory, is vital to the creative process.

Human RAM

Random access memory (RAM) is a computer’s ability to access data without (for lack of a better explanation) having to dig for it. The human brain works like this, too. Our RAM is called working memory. This working memory directly correlates to our ability to be creative and unique.

If you want to redesign the interface of a Web form, what’s the first thing you do? You go onto the Web, trying to find something. Can you guess what you’re not finding? Inspiration. You’re building a working memory. Whether you know it or not, your brain is retaining everything you see. And your ability to access it randomly later is the working memory in action. The more you see, the more your brain can hold.

I am not a scientist, but I suspect that this is one of the reasons why you have that moment of insight during your morning shower. You try so hard during the day to solve a problem; you’re trying to force the answer by researching and scouring the Internet. During that time, your brain is retaining all that information. Later that night, during REM sleep, your brain catalogs everything it’s seen.

I propose that your mind, tapped into the subconscious during deep sleep while recounting the day’s working memory, is able to solve the problem for you. It’s only after you wake — during that morning routine — that you’re able to access it. This is why forcing inspiration, while impossible, does reap positive results.

Finely Tuned Problem-Solving Sessions

We’ve learned that you can’t force inspiration, and, although we try to control our environment, doing so is hard as well because so much plays into it. The problem is that sometimes you have to be inspirational on the fly. Well, practice makes perfect.

Last summer, I read an article by Seth Godin titled “Impresarios.” In the article, Godin talks about how impresarios “weave together resources and opportunities and put on a show.” This gave me an idea, and I will forever be in Godin’s debt because I am now my own version of an impresario. An impresario is someone who organizes and often finances concerts, plays and theatrical productions. In my case, I organize brainstorming events.

Every month, my team and I enter our planning room for at least three hours. We lock the doors, opening it only for pizza and beer deliveries. Our mission is to solve one problem. In past sessions, we have redesigned the user interface that powers our systems, solved marketing problems by “remarketing,” and found new and creative ways to present information. The role of an impresario has had such a direct and positive impact on the way we do business that I am now introducing the role to every team in our 100+ person company.

Why does having an impresario work? Well, certain rules guide the team to moments of insight:

  1. Identify a very specific problem to solve, and stay focused.
  2. Provide the necessary tools to spark inspiration (white boards, markers, paper, etc.).
  3. Be technology-agnostic! Don’t worry about how you will solve the problem; focus only on the why.
  4. There are no wrong answers; some are just better than others.
  5. Celebrate failures.

My team looks forward to their time spent locked up together because it gives us an opportunity to be creative in front of each other. Support their ideas, and help them grow. Don’t force your opinions and thoughts. If the group is moving in the wrong direction, ask them questions until they find the right path.

Celebrating Failures

Admitting defeat is one thing; celebrating it an entirely other. Only good can come from openness and honesty. We all learn from our own mistakes, but if you don’t share yours, how can I learn from it? Celebrating failures and realizing that “missing the target” isn’t a bad thing will help your team to grow, recover and build things faster.

At the end of the process, my team always has something to show for it. On occasion, we have realized that the problem we set out to solve was the wrong problem to focus on. We failed to find a solution because there was no reason to find one. That in itself was the solution, and presenting the outcome of the session to our company helped us to refocus.

The only failure I’m not comfortable with is the failure to try.

In Retrospect

I’ve found a groove. I go to bed, thinking hard about a problem, and fall asleep trying to solve it. Waking early in the morning and refocusing my efforts brings the solution closer to my consciousness. I’ll often get to work quite early, continually working on the problem. Then, when I feel my creativity beginning to slip, I’ll hit the gym.

Getting my energy level up, increasing my adrenaline and getting my mind off the topic help to realign my thoughts. Then, I hit the sauna for a good 20 minutes. Nothing like 80 °C heat in a quiet room and with eyes closed to restart that relaxed, creative meditation. Then, I head back to work.

make_things_better_mini
Keep in mind that we all have our own ways of getting our minds off topic, and later realigning our thoughts — and making things better. (Image source: opensource.com)

I don’t know if I’ll be able to continue this schedule over time, nor do I expect you to follow it. Right now, I’m treating this as an experiment, and it’s proving to be highly fruitful.

Here are the big take-aways from my experience:

  • Respect your teammates and their periods of inspiration.
  • Protect your team from the day’s distractions and interruptions.
  • Deliver freedom as a gift. You’ll see boundless gains in creativity from the team.
  • Try to more deeply understand your brain and its ability to be affected by its environment.
  • And, of course, celebrate your failures!

Thoughts?

Please feel free to share your experiences and thoughts in the comments section below.

(al) (il) (ea)

Source: Smashing Magazine

Analyzing Network Characteristics Using JavaScript And The DOM, Part 2

In Part 1 of this series, we had a look at how the underlying protocols of the Web work, and how we can use JavaScript to estimate their performance characteristics. In this second part, we’ll look at DNS, IPv6 and the new W3C specification for the NavigationTiming API.

DNS Explained

Every device attached to the Internet is identified by a numeric address known as an IP address. The two forms of IP addresses seen on the open Internet are IPv4, which is a 32-bit number often represented as a series of four decimal numbers separated by dots, e.g. 80.72.139.101, and IPv6 which is a 128-bit number represented as a series of multiple hexadecimal numbers separated by colons, e.g. 2607:f298:1:103::c8c:a407.

These addresses are good for computers to understand; they take up a fixed number of bytes and can easily be processed, but they’re hard for humans to remember. They’re also not very good for branding, and are often tied to a geographic location or an infrastructure service provider (like an ISP or a hosting provider).

To get around these shortcomings, the “Domain Name System” was invented. At its simplest form, DNS creates a mapping between a human readable name, like “www.smashingmagazine.com” and its machine readable address (80.72.139.101). DNS can hold much more information, but this is all that’s important for this article.

For now, we’ll focus on DNS latency, and how we can measure it using JavaScript from the browser. DNS latency is important because the browser needs to do a DNS lookup for every unique hostname that it needs to download resources from — even if multiple hostnames map to the same IP address.


Larger view

Measuring DNS Lookup Times

The simple way to measure DNS lookup time from JavaScript would be to first measure the latency to a host using its IP address, and then measure it again using its hostname. The difference between the two should give us DNS lookup time. We use the methods developed in Part 1 to measure latency.

The problem with this approach is that if the browser has already done a DNS lookup on this hostname, then that lookup will be cached, and we won’t really get a difference. What we need, is a wildcard DNS record, and a Web server listening on it. Carlos Bueno did a great write-up about this on the YDN blog a few years ago, and built the code that boomerang uses.

Before we look at the code, let’s take a quick look at how DNS lookups work with the following (simplified) diagram:

DNS Lookup path from Client to Authoritative Server
From left to right: The client here is the browser, the DNS server is (typically) the user’s ISP, the Root name server knows where to look for most domains (or who to ask if it doesn’t know about them), and finally the authoritative server which is the DNS server of the website owner.

Each of these layers has their own cache, and that cache generally sticks around for as long as the authoritative server’s TTL (known as “Time To Live”) says it should; but not all servers follow the spec (and that’s a complete topic for itself).

Now, let’s look at the code:

var dns_time;

function start() {
    var gen_url, img,
        t_start, t_dns, t_http,
        random = Math.floor(Math.random()*(2147483647)).toString(36);

    // 1. Create a random hostname within our domain
    gen_url = "http://*.foo.com".replace(/*/, random);

    var A_loaded = function() {
        t_dns = new Date().getTime() - t_start;

        // 3. Load another image from the same host (see step 2 below)
        img = new Image();
        img.onload = B_loaded;

        t_start = new Date().getTime();
        img.src = gen_url + "image-l.gif?t=" + (new Date().getTime()) + Math.random();
    };

    var B_loaded = function() {
        t_http = new Date().getTime() - t_start;

        img = null;

        // 4. DNS time is the time to load the image with uncached DNS
        //    minus the time to load the image with cached DNS

        dns_time = t_dns - t_http;
    };

    // 2. Load an image from the random hostname
    img = new Image();
    img.onload = A_loaded;

    t_start = new Date().getTime();
    img.src = gen_url + "image-l.gif?t=" + (new Date().getTime()) + Math.random();

}

Let’s step through the code quickly. What we’ve done here is the following:

  1. Create a random hostname prefixed to our wildcard domain. This makes sure that the hostname lookup isn’t cached by anyone.
  2. Load an image from this host and measure the time it takes for it to load.
  3. Load another image from the same host and measure the time it takes to load.
  4. Calculate the difference between the two measured times.

The first measured time period includes DNS lookup time, TCP handshake time and network latency. The second time measured includes network latency.

There are two downsides to this approach though. First, it measures the worst case DNS lookup time, i.e. the time it takes to do a DNS lookup if your hostname isn’t cached by any intermediate DNS server. In practice, this isn’t always the case. There isn’t an easy way to get around that without the help of browsers, and we’ll get to that later at the end of this article.

Also, what probably makes it hard for most people to implement is setting up a wildcard DNS record. This isn’t always possible if you don’t control your DNS servers. Many shared hosting providers won’t let you set up a wildcard DNS record. The only thing you can do in this case is to move hosting providers, or at least DNS providers.

Measuring IPv6 Support And Latency

Technically, measuring IPv6 shouldn’t really be a separate topic, however, even a decade after its introduction, IPv6 adoption is still fairly low. ISPs have been holding back because not too many websites offer IPv6 support, and website owners have been holding back because not too many of their users have IPv6 support, and they’re not sure how it will impact performance or user experience.

The IPv6 test in boomerang helps you determine if your users have IPv6 support and how their IPv6 latency compares to IPv4 latency. It doesn’t check to see if their IPv6 support is broken or not (but see Google’s IPv6 test page if you’d like to know that).

There are two parts to the IPv6 test:

  1. First, we check to see if we can connect to a host using its IPv6 address, and if we can, we measure how long it takes.
  2. Next, we try to connect to a hostname that only resolves to an IPv6 address.

The first test tells us if the user’s network can make IPv6 connections. The second tells us if their DNS server can lookup AAAA records. We need to run the test in this order because we’d be unable to correctly test DNS if connections at the IP level fail.

The code is very similar to the DNS test, except we don’t need a wildcard DNS record:

var ipv6_url = "http://[2600:1234::d155]/image-l.gif",
    host_url = "http://ipv6.foo.com/image-l.gif",
    timeout: 1200,

    ipv6_latency='NA', dnsv6_latency='NA',

    timers: {
        ipv6: { start: null, end: null },
        host: { start: null, end: null }
    };

var img,
    rnd = "?t=" + (new Date().getTime()) + Math.random(),
    timer=0, error = null;

img = new Image();

function HOST_loaded() {
    // 4. When image loads, record its time
    timers['host'].end = new Date().getTime();
    clearTimeout(timer);
    img.onload = img.onerror = null;
    img = null;

    // 5. Calculate latency
    done();
}

function error(which) {
    // 6. If any image fails to load or times out, terminate the test immediately
    timers[which].supported = false;
    clearTimeout(timer);
    img.onload = img.onerror = null;
    img = null;

    done();
}

function done() {
    if(timers['ipv6'].end !== null) {
        ipv6_latency = timers.ipv6.end - timers.ipv6.start;
    }
    if(timers['host'].end !== null) {
        dnsv6_latency = timers.host.end - timers.host.start;
    }
}

img.onload = function() {
    // 2. When image loads, record its time
    timers['ipv6'].end = new Date().getTime();
    clearTimeout(timer);

    // 3. Then load image with hostname that only resolves to ipv6 address
    img = new Image();
    img.onload = HOST_loaded;
    img.onerror = function() { error('host') };

    timer = setTimeout(function() { error('host') }, timeout);

    timers['host].start = new Date().getTime();
    img.src = host_url + rnd;
};

img.onerror = function() { error('ipv6') };
timer = setTimeout(function() { error('ipv6') }, timeout);
this.timers['ipv6'].start = new Date().getTime();
// 1. Load image with ipv6 address
img.src = ipv6_url + rnd;

Yes, this code can be refactored to make it smaller, but that would make it harder to explain. This is what we do:

  1. We first load an image from a host using its IPv6 address. This checks to see that we can make a network connection to an IPv6 address. If your network, browser or OS don’t support IPv6, this will fail and the onerror event fires.
  2. If the image loads up, we know that IPv6 connections are supported. We record the time that we’ll use to measure latency later.
  3. Then we try to load up an image using a hostname that only resolves to an IPv6 address. It’s important that this hostname does not resolve to an IPv4 address or this test might pass even if the DNS server cannot handle IPv6.
  4. If this succeeds, we know that our DNS server can look up and return AAAA (the IPv6 equivalent of A) records. We record the time.
  5. And then go ahead and calculate the latency. We can compare this with our IPv4 latency and DNS latency. This would also be an appropriate place to call any callback function to say that the test has completed.
  6. If any of the image loads fired an onerror event or if they timed out, we terminate the test immediately. In that case, any tests that haven’t run have their corresponding variable (ipv6_latency or dnsv6_latency) set to “NA”, indicating no support.

There are other ways to test IPv6 support with help from the server side, for example, have your server set a cookie stating whether it was loaded via IPv4 or IPv6. This only works well if your testing page and your image page are on the same domain.

The NavigationTiming API

The NavigationTiming API is an interface provided by many modern browsers that gives JavaScript developers detailed information about the time the browser spent in the various states of downloading a page. The specification is still in a draft state, but as of the date of this article, Internet Explorer, Chrome and Firefox support it. Safari and Opera do not currently support the API.

JavaScript developers get access to the NavigationTiming object through window.performance.timing. Try this now. If you’re using Chrome, IE 9+ or Firefox 8+, open a Web console and inspect the contents of window.performance.timing.

The diagram below explains the order of events whose time shows up in the object. Let’s look at a few of them:

Navigation Timing Overview diagram from the W3C
Larger view | Image source

Now the items we’ve been interested in measuring are:

  1. Page Load Time
    We get the full page load time by taking the difference between loadEventEnd and navigationStart. The latter tells us when the user initiated the page load, either by clicking a link, or entering it into their browser’s URL bar. The latter tells us when the onload event finished. If we’re not interested in the execution time of the onload event, we could use loadEventStart instead.
  2. Network/Application Latency
    Network latency is the time from the browser initiating download to the time the first byte showed up. Now, part of this latency could be attributed to the application doing something before sending out bytes, but there’s no way to know that from the client side. We use the difference between requestStart and responseStart.
  3. TCP Connect Time
    TCP connect time is the difference between connectStart and connectEnd, however, if the connection is over SSL, then this includes the time to negotiate an SSL handshake. You’d need to take that into account, and use secureConnectionStart instead of connectEnd if it exists, and if you care about the difference.
  4. DNS Latency
    DNS latency is the difference between domainLookupStart and domainLookupEnd.

Important: We use a combination of times from window.performance.timing to determine each one of these.

While this looks good for the most part, and really tells you what your users experience, there are a few caveats to be aware of. If DNS is already cached, then DNS latency will be 0. Similarly, if the browser uses a persistent TCP connection, then TCP connect time will be 0. If the document is read out of cache, then network latency will be 0. Keep these points in mind and use them to determine what fraction of your users makes effective use of available application caches.

The Navigation Timing interface provides us with many more timers, but several of them are restricted by the browser’s same origin policy. These include details about redirects and unloading of the previous page. Other timers related to the DOM already have equivalent JavaScript events, namely the readystatechange, DOMComplete and load events.

The Network Information API

Another interesting network related API is the Network Information API. While not strictly performance related, it does help make guesses at expected network performance. This API is currently only supported by Android devices, and is exposed via the navigator.connection.type object. In particular, it tells you whether the device is currently using Ethernet, Wi-Fi, 2G or 3G.

An article I highly recommend reading would be David Calhoun’s piece that shows some good examples on Optimizing Based On Connection Speed. Both the article and the comments are useful reading.

Summary

While the Navigation Timing API provides easy access to accurate page timing information, it is still insufficient to draw a complete picture. There is still some benefit to estimating various performance characteristics using the techniques mentioned earlier in this series.

Whether we need to support browsers that do not currently implement the Navigation Timing or get information about resources not included in the current page, be sure to find out more about the user’s network bandwidth or whether their support for IPv6 is better or worse than their support for IPv4 — a combination of methods gives us the best all-round picture.

All of the techniques presented here were developed while writing Boomerang though not all of them made it into the code yet.

References

The following links helped in writing this article and may be referred to for more information on specific topics:

(Credits of image on frontpage: Vlasta Juricek)

(il) (ea)

Source: Smashing Magazine

Part 1: Mojo Motors Responsive Redesign With Fireworks: UX And Interaction Design

Thanks to strong mobile Web adoption worldwide, we have seen the launch of even more responsive designs in 2012 and 2013. Most of these have been in the publishing category, but lately we are starting to see complex transactional websites, such as Currys UK, take a brave step into this new world.

For very well thought out reasons, Mojo Motors (a startup created in 2010 to provide shoppers with a better way to buy used cars) also just launched the first responsive website in the automotive market space.

When I joined Mojo Motors in May 2012 as head of UX, it had only a desktop website — but 21% of its total Web traffic was already coming from mobile devices. Of that number, 64% were from iOS devices and 34% from Android devices. It was quite clear to me that we had to think carefully about our mobile strategy when redesigning the new website. After carefully assessing the situation, we ended up adopting the responsive design approach, for the following reasons:

  • We were planning to redesign the entire website from scratch.
  • Our content lends itself well to this approach, and we did not have to deal with ads like our competitors.
  • A large number of our users were already viewing, sharing and linking to retargeting emails on mobile devices.
  • It was the fastest point of entry to mobile for us, and the cost of development, management and maintenance was lower compared to building separate websites and native mobile apps alongside a desktop website.
  • Our UX and development teams are very small, agile and nimble — a key ingredient to helping a small startup such as ours get a minimum viable product to market quickly.

In this article, I’ll shed some light on the whole process and on how Adobe Fireworks fit into it.

mojo-front_mini

Our Design Process And Adobe Fireworks

As any team that has taken on a responsive design project recently will tell you, the process is different and challenging, and it stretches the limits of what traditional Web design tools such as Photoshop, Fireworks and OmniGraffle are capable of accomplishing. So, to get things done, our design team adopted a hybrid approach of designing in visual tools and directly in the browser. For us, Adobe Fireworks became the workhorse visual tool that we depended on to get things done.

I’ll share the whole process that we used to craft our responsive website and the role that Adobe Fireworks played in it. To keep the content easy to digest while still providing enough detail, I will present it in two separate articles:

  1. Part 1: UX and interaction design stage;
  2. Part 2: Visual design and front-end development stage.

UX And Interaction Design

In this first article, I’ll share our interaction design process, the role of Adobe Fireworks and some of the other design tools that helped us bring our vision to life.

Research

Naturally, we began the process by doing user research to understand how people engaged with our non-responsive website. Armed with this information, we came up with design principles, product principles, personas, scenarios and so on to help us determine and prioritize the project’s requirements.

We came away from this process with a core set of features that would provide a consistent user experience across all platforms. The key for us was to quickly go through discovery so that we could move into the iterative design process.

Designing From the Content Out

We decided earlier in the project that we would adopt a content-first approach by allowing the website’s content to shape the grid’s structure and layouts.

Why? On a responsive website, you have very little control over content because it scales across varying device widths — and because users explicitly zoom the viewport. In addition, some content, such as images, video and ads, can wreak havoc on the layout and affect overall performance. Identifying the different types of content, their value to users and the constraints they present early on is important. It will help you to avoid headaches later on in the process.

Mojo motors search and details page image

The old Mojo Motors website, showing photo placement. (Large version)

In our project, the image dimensions, aspect ratios and placement drove the overall layout because these needed to be flexible. The reason is that, on most automotive marketplace websites such as ours, car photos are one of the primary drivers of the user’s initial engagement, next to the selling price. Furthermore, these photos are typically consumed from a feed in formats and sizes that are uploaded directly to the dealer’s system.

Another thing we decided up front was to use real content wherever we could and to avoid placeholder copy like “Lorem Ipsum” and image placeholders with unknown dimensions. We were able to rise to this challenge early on by engaging our copywriter as soon as we identified missing copy throughout the project.

Breakpoints and Grids

Before diving deep into design exploration, we knew that determining the screen widths we would support was important. For us, a healthy range between 320 and 1024 pixels was practical, based on our analytics data. We settled on three major breakpoints to support desktop and the most popular mobile and tablet device resolutions of current users. But this is not always optimal — why?

Because device specifications frequently change, as in the case of the recent taller iPhone 5 (which would be wider in landscape orientation). To mitigate this, we planned to introduce minor breakpoints and even adjust our three breakpoints as needed later during the HTML prototyping iteration stages.

Mojo motors final responsive grids

Mojo Motors’ responsive grids, via the Gridset app. (Large version)

To aid in the creation of our grids, I played with a bunch of responsive grid systems from the endless choices of frameworks in the wild. We narrowed our choice to Gridset, by Mark Boulton’s team, and Gridpak, by the good folks at Erskine. Both of these apps provide a grid image file for designing in Fireworks (or Photoshop) and an HTML framework for prototyping.

One of the factors that influenced our choice of grids was the need to accommodate the “vehicle listing module” image across breakpoints. Because we had sketched out the mobile “vehicle listing module” first, we wanted to find opportunities for reuse as we scaled up to the desktop.

In the end, we went with a 12-column grid for the desktop, a 12-column grid for tablets, and a 6-column grid for mobile in portrait orientation, via Gridset. This grid choice enabled us to reuse the module from the mobile layout proportionally across the three main breakpoints. For instance, the mobile and desktop modules are exactly the same dimensions, except that we display three modules side by side for desktop.

Sketching Mobile First

I can’t stress enough how important it is to resist the urge to jump into your favorite visual tool during the initial phase of generating ideas! Trust me, this stuff is hard enough — the last thing you need to worry about at this point is setting up the technical layouts and pixel perfection. So, if you must, work in your favorite wireframing tool — just solve the problem at hand.

For me, making a few sketches of the website’s key pages at the three major breakpoints — starting with the mobile layouts and working my way up to the desktop version — and then iterating between them made sense. I personally found designing for mobile first to be an effective way to identify problems and resolve constraints presented by touch and small-screen devices.

Initial sketches for mobile screens
Initial sketches for mobile screens.

To aid in creating your layouts, you might want to consider the Responsive Design Sketchbook by App Sketchbook, or the Dot Grid Book by Behance.

Creating Wireframes And Prototypes

Before discussing in more detail why we used Adobe Fireworks in our project, I’d like to be clear that I find the endless debates about which design tool is better and whether to just code the darn thing to be fruitless banter.

In the end, a good designer is a creative problem-solver, and the tools are just a means to an end. Remember that users and clients don’t really care what tool we’ve used to create the final product. With that out of the way, I will focus the rest of these articles on why Adobe Fireworks made sense for our project.

High-Fidelity Wireframes in Fireworks

The great thing about creating products at a startup is that you have no external client, so you can avoid artifacts that do nothing to move the ball forward. On the other hand, the clock is winding down as your competitor tries to get the next best thing out before you can launch yours. With this in the back of my mind, the choice of using Adobe Fireworks came down to speed, familiarity and capabilities.

Hi-fidelity homepage wireframes for desktop, tablet and smartphones
High-fidelity home page wireframes for desktop, tablet and smartphones.

Because we needed to create a clickable prototype for user testing quickly, we decided to skip lo-fi wireframes and go straight from sketches to high-fidelity grayscale wireframes. Below are a few other reasons why we used Fireworks to create wireframes:

  1. Compared to other tools I had considered, Fireworks has the best vector and bitmap features suitable for creating both low- and high-fidelity wireframes, detailed visual UI designs and clickable prototypes, without having to switch between multiple tools.
  2. It offers a built-in set of symbol libraries, suitable for functionality that made our work quicker.
  3. The native Fireworks PNG file format is at least three to five times smaller than a comparable Photoshop PSD file and is easily sharable with stakeholders without requiring any software other than a browser or simple image viewer.
  4. The Pages and States features work really well for creating multi-screen layouts within a single file.
  5. I was in the process of hiring the rest of my team when the design phase began, and I needed to work pretty quickly.

Multi-Page vs. Multi-Breakpoint File Set-Up

In the past, I would have advocated setting up a single file with multiple pages and a master page for this project. But due to the constraints of creating responsive layouts, I decided that using the Pages functionality for different breakpoints of the same page was more efficient. I found this to be the best way to quickly switch between breakpoints during the iterative process. This method also allowed us to keep the file sizes small and made it easy for my team to share files and work concurrently on different screens.

Adobe Fireworks Pages panel

Adobe Fireworks Pages panel (example)

Adobe Fireworks Pages panel (example)
The Pages panel in Adobe Fireworks is used for different screen sizes of the same page.

Adobe Fireworks Layers panel
The Layers panel in Adobe Fireworks is used to manage layout elements.

Adobe Fireworks States panel

Adobe Fireworks States panel (example)

Adobe Fireworks States panel image (example)
The States panel in Adobe Fireworks is used to show different states of the same screen.

The other benefit was that we could still use the States panel to document interaction states associated with each breakpoint independently. The final file structure consisted of a “Page” for each breakpoint, a Web layer, a grid layer and other layers for the website’s content. In our template file, the grid layer was placed between the content and Web layer, as shown.

Creating Reusable Modular Elements Using Symbols

In a design like this, thinking in terms of modular reusable components that can be converted to symbols is really helpful. Doing this saves a lot of time and makes it easy to update as you iterate.

One element that benefited from this approach was the car listing module. As illustrated below, it is composed of a few different elements, including a photo with a non-destructible saturation filter applied, heart and camera icons from the library, as well as styled text. Elements such as headers, branding, navigation and footers are good candidates for symbol conversion as well.

To create a symbol in Fireworks, all you have to do is select the objects and go to Modify → Symbol → Convert to Symbol, or just right-click on the selection and choose “Convert to Symbol.”

Car-Listing module
Car-listing module symbol.

Another neat thing about the symbols feature is its nesting capability. You can include symbols inside a module that you want to convert to a symbol using the same process as above. We took advantage of this feature to make it easy to vary the listing photo and flags during prototyping and in preparation for user testing.

Creating a unique module to show a different car or flag was as simple as swapping the embedded symbol within the new main symbol variation. To do this, follow these steps:

  1. Select a copy of the main symbol and go to Modify → Symbol → Break Apart.
  2. While it’s still selected, save it as a new symbol variation.
  3. Double-click the new symbol to enter symbol-editing mode. Then, select the embedded symbol to update.
  4. Go to Modify → Symbol → Swap Symbol in the menu bar, choose the replacement symbol from the “Swap symbol” dialogue box, and you are done.

Symbol swapping illustration
Photo symbols embedded into car listing module symbol

Symbol swapping process
Swapping embedded photo symbols to create other similar modules.

Visual Scaling During Design and Live View

Another thing that is quite disorienting when creating mobile screens is mapping resolutions as you lay things out on your large monitor. Without careful planning or knowledge of best practices for things like touch target sizes and legible text sizes, you could end up creating layouts that are hard to use.

One tool that I cannot live without and I highly recommend is the Live View App. It is available for the Mac, iPhone and iPad. All you have to do is place the app window over your Fireworks layout and it will let you see how things scale on a real device such as an iPhone or iPad.

Preparing and Sharing Wireframes for Design Review

Clear and frequent communication between stakeholders, developers and designers was essential to the successful completion of our project. It ensured that everyone understood the implications of design decisions and were able to ask questions.

To prepare screens for our design reviews, we just exported Fireworks PNG files directly from Fireworks into a folder. During the review, we simply dragged the PNGs into multiple tabs of the browser and discussed things. I personally prefer this method of testing desktop screens because the width of the wireframes is rendered closest to how a user would see them (compared to testing with PDF files).

“Export Responsive Prototype” Extension to the Rescue

While the method described above also worked for showing mobile and tablet screens, it was sometimes difficult for the team to visualize the scale, context and fixed viewport constraints of real devices. This is where the Export Responsive Prototype extension for Fireworks (by Matt Stow) came in handy.

Creating the quick prototype using the existing wireframe file was really easy. The first thing I needed to do was define which areas of the wireframe would be fixed width and which would be flexible widths using slices. By default, areas that have not been given slices are converted to percentage-based widths. To make a sliced area fixed width or absolutely positioned left, right or center, I assigned keywords in the “Target” attribute of the Property Inspector (PI) panel (or Properties panel). Note that slices without “Target” keyword assignments are also converted to percentage-based widths.

Visualizing responsive design wireframes using Fireworks extension
Visualizing responsive design wireframes using Fireworks extension.

Assigning attributes in the Property Inspector panel
Slices are assigned “Target” attributes in the PI panel.

Once I was done setting up the file, all I had to do was go to Commands → Prototype → Export Responsive Prototype and export as “HTML and Images” files using the default settings. These files were then uploaded to a Web sharing folder on my computer or a Web server where it could be hosted. Next, we shared the URL with everyone, and from there anyone could view the mockup on any desktop, smartphone or tablet browser. For more details on using the extension, watch the screencast on YouTube.


A screencast by Matt Stow that explains this workflow.

Exported prototype files in finder window
“HTML and Images” exported files.

Note: The prototype that is created is not a responsive HTML production framework. It is only illustrative and to be used during the wireframe review process.

To keep the distraction down in a larger group, you could also mirror your iPhone or iPad onto a projection screen using Reflector.

Projecting mobile screen using Reflector app
Projecting a mobile screen using the Reflector app.

Creating the Prototype for User Testing

Putting together a clickable prototype in Fireworks is easy and flexible because Fireworks will accept almost any graphic file format and all HTML embeds such as videos, maps and social plugins.

For us, the first step was to plan the scenarios and determine what screens would be needed to simulate the tasks that we are asking our users to perform. In our case, we used some of the wireframes that we created and modified existing screenshots for others.

To complete the prototype, each existing wireframe and screenshot was imported as a page into a new Fireworks file and given an appropriate page name. Making edits to screenshots was a snap with the help of the bitmap tools, the vector tools and the “Fill with background” command (by John Dunning). Using these, we removed elements before compositing to reflect our own data.

Once assembled, all we needed to do was add hotspots to each page and select a destination from the PI panel. On some pages, elements were added to the States panel to simulate things like hover states.

(You can check “Creating Interactive Prototypes With Adobe Fireworks” by André Reinegger and “Interaction Design and Rapid Prototyping With Fireworks” by David Hogue for more in-depth exploration of the prototyping features available in Fireworks.)

Finalizing the prototype just required exporting the file using the “HTML and Images” option, and the project was ready to be hosted on the testing machine.

Note: The purpose of the prototypes at this stage was to test the website’s flow and structure. As such, we opted for this method to export separate non-responsive prototypes for each breakpoint to get initial feedback quickly. You may also decide just to use an HTML prototype framework such as Bootstrap or Foundation if your timeline and resources allow it — we opted for the quickest way to maintain our project’s velocity.

In The Next Article

Well, that’s it for this article. I know that so many workflow options are out there, which you may want to consider when designing responsively. I hope some of the ideas and workflows discussed in this article will come in handy and inspire you to consider Adobe Fireworks for your next project.

In the next article in this series, I will share our transition from the UX and interaction design phase of the project to the visual design and front-end development iterative cycle. Stay tuned!

Note: Even with the recent announcement by Adobe that it no longer plans to add new features to Fireworks, the tool is still very powerful and offers some of the best UI design features. Also, since Adobe plans to continue to sell Fireworks (version CS6) and provide updates to support the next major releases of both Max OS X and Windows, it is still worthwhile considering Fireworks for your next project, because of its workflow efficiency, lightweight file size and many other advantages.

Further Reading and Resources

(mb al ea)

Source: Smashing Magazine

Designing For Digital Products

In digital culture, we are beginning to think of our output as products and of our clients as users. “Products” might be websites, apps or communities, and they might be created by startups, agencies or a couple of people at a hackathon. This shift mainly means that we have gotten serious about asking how to better serve users, which reflects a significant change in the designer’s skill set.

Designers will use the same tools they have always used, but they are now responsible for more than just the interface. Conducting usability studies, planning design strategically over the course of a product’s lifespan, facilitating communication and — above all — “shipping” are frequent requests. Whether or not a designer calls him or herself a product designer is beside the point; to remain relevant, they need to master these new user-centered values and processes.

Forget The Job Title

Designers have in the past distinguished themselves by job title, but existing titles have become inaccurate. Job expectations are no longer confined to singular tasks. Labels like user experience designer, user interface designer, interaction designer, product designer and so on may describe a person’s interests better than another, but most designers do a little of all of this, as “hybrids” (be it designer and coder, user experience and user interface designer, or designer and entrepreneur).

This trend is clearly reflected in the variety of open jobs posted. No one knows exactly who they’re looking for, so they pick the label that sounds best. Here are a few examples from the Smashing Job Board and Dribbble:

Cat Lover Job Posting on Dribbble
Wordpress Happiness Engineer Job Posting
SupercalifragilisticIxDadocious Interaction Designer Job Posting
Hiring companies are choosing creative descriptions to draw attention to their posts.

On the flip side, people who do the hiring understand that anyone can choose a title they like the sound of and slap that on their portfolio or business card, and that doesn’t change a designer’s level of experience or resourcefulness. The new product design world, on the other hand, is about being effective as a designer, a task rooted in real products and real people (think living portfolios and networks of people). Authenticity is getting harder to manufacture.

In high-profile opportunities, designers are expected to know UX, UI, front-end code, even how to write strategic business plans. Let’s look at a few of the requirements from a product designer job listing on Evernote (emphasis mine):

Responsibilities:

  • Be a thoughtful voice for our users. You are constantly thinking about new and improved use cases and features that will appeal to our users.
  • Work in small multidisciplinary product teams to help build products that are beneficial to our company and our users.
  • Develop high level user stories, prototypes, design mockups, specs, and production assets.
  • Define innovative user experiences that result in improved user productivity.
  • Be equally comfortable working the details of your designs at a pixel level.
  • Maintain a high level of visual fidelity across products.
  • Be nimble. You will be working to define requirements while simultaneously designing for those requirements.

Requirements and Skills:

  • Experience designing engaging user experiences for desktop, web, or mobile apps.
  • Proficiency with the common suite of desktop applications used to create the wide variety of materials required to take a solution from concept through code.
  • Ability to think about a problem from multiple angles to come up with the best design.
  • Unique drive to continue pushing products forward and innovating.
  • Proven track-record for shipping high quality experiences.
  • Excellent presentation skills and attention to detail.
  • Articulate and passionate verbal communicator.
  • A strong sense of design theory and typography are critical.
  • Ability to prototype designs in lo-fidelity and hi-fidelity as required.
  • At least 3-5 years of relevant product design experience working on major product releases.
  • A complete portfolio that shows breadth and depth of work.
  • Experience working closely with other designers, product managers and developers.
  • B.S./B.A. in related field or equivalent experience.

Please include your online portfolio on your resume or cover letter for consideration.

Individually, the requirements appear vague, but as a sum total, the message is clear: Design is no longer a “service” so much as it is a core offering in the “idea economy”:

“The service economy is going… going… soon to be gone like its predecessors in the manufacturing/industrial economy and the agricultural economy. […] The primary product of the Idea Economy is ideas. You and I can and must produce ideas just as those who prospered in previous economies had to produce crops, manufactured goods, and most recently, services.”

– Rob Brazell, founder of Overstock.com and author of The Idea Economy

These changes in culture represent a shift in the way we value design. Designers are expected to use whatever resources they have available to build upon and sell good ideas.

It’s never been easier to “sell” design ideas to non-designers. The growing support infrastructure for designers as entrepreneurs over the last few years has had a huge impact on the culture of design, particularly with the creation of The Designer Fund, a key investor in designer-led startups, and the abundance of role models of successful designer-entrepreneurs.

Designer Founders
A plethora of designer-founders are changing the way designers are being perceived.

Having been on the hiring end of product teams, I can confidently say, yes, the portfolio is important. Yes, experience is important. Yes, an intricate mastery of our craft (typography, grids, layout, etc.) will get a designer noticed. But in addition to these skills, you can be sure that employers are looking for big-picture thinking that will directly add value to their team and their product.

Usability Testing

“The real audience were the people out there in the real world who were going to be stuck with whatever it was I was designing. […] The more you can be their advocate, the better the design will be. That’s not just the goal of identity design, but design period.”

– Michael Bierut, in an interview with designboom

Everyone has intuition or experiences that shape their judgment in interaction design, including developers, product managers and other members of the team. And why shouldn’t they? We are all users, after all. The designer no longer lays claim to be the sole advocate of a user’s experience, and their opinion has become less relevant without evidence to back it up.

I think this has happened for a few good reasons:

  1. User testing has never been more accessible.
  2. Perfectionism is less valued than it used to be.
  3. More people recognize good design as more than a veneer.

Regarding the first point, a plethora of articles (such as those on Design Staff) have made it impossibly easy to do what used to be the siloed and specialized skills of human factors and user-centered design. It’s often as simple as following a set of instructions. The up-front cost, given tools like Silverback ($ 70) and options like UserTesting.com (from $ 100 for three participants), can be as minimal as paying a staff member — such as a designer — to write the testing criteria. Moreover, businesses understand that the payoff for conducting a simple study, with even just five participants, is huge compared to the risk of not talking directly to users early on.

Nielsen's Why You Only Need to Test With Five Users
Nielsen’s diagram depicts a diminishing amount of useful feedback after testing with just five users. (Image: Jakob Nielsen)

Paul Graham of Y Combinator talks about early testing in his essay “Do Things That Don’t Scale”:

“In software, especially, it usually works best to get something in front of users as soon as it has a quantum of utility, and then see what they do with it. Perfectionism is often an excuse for procrastination, and in any case your initial model of users is always inaccurate, even if you’re one of them. The feedback you get from engaging directly with your earliest users will be the best you ever get.”

For designers, a bit of time spent writing surveys and scenarios, creating a testing environment (however simple), making prototypes, interviewing users, gathering data and then analyzing that data are all experiences that will feed directly back into the designs. This is not about being a perfectionist, but rather about nimbly applying appropriate tools to inform good work. Design, as a utilitarian vocation, will thrive on this, and the wider acceptance of user testing in the product world will mark the transition of good design from being a veneer or ethos to being a very real part of the product.

Design For The Minimum Viable Product

Founders often believe that getting users and investments means being in the right place at the right time, which nearly always means now. Designers and developers are expected to keep up with this pace. If a good idea is on the table, they’d better build and release, or else someone else will beat them to the punch.

Minimum Viable Product User Experience Design
Sketch notes for minimum viable product UX (Image: Dean Meyers | Large view).

This manic environment can pose a particular kind of hardship for designers; we care about the utility of our designs, and we may even see the larger business case for launching early, but we also carry an inherent respect for the subtleties of our craft that create the larger experience and that take time (often a lot of time) to develop.

Timelines, however, rarely shift for perfection, especially in product design (and, really, they don’t need to). Does this mean that designers — if they really care — should work all hours to perfect the interface and experience before the big launch? No.

Designing for the minimum viable product (MVP) means designing with a strategy. It means knowing up front that the website will not be built responsively, but that it should be designed as if it were. It means accepting that the user experience can’t live up to MailChimp’s at first launch, but still designing with that ideal in mind. It means realizing the difference between a minimum viable product and a minimum delightful product, as well as which works for your target audience.

“You’d never find the magnetic click [from an Apple power cable] on an engineer’s list of MVP features or user stories. It’s really easy in minimal viable products to actually design the delight out of them.”

– Andy Budd, in an interview with Inside Intercom

A big challenge of MVP design lies in sacrificing your darlings for the benefit of an early release. A bigger challenge lies in knowing where to follow up and prioritize design improvements for the next release. Luckily, user testing should help with this, but a level of intuition — or awareness — is still needed to determine which piece of the puzzle should fall into place next in order to gain a clearer picture.

I like to think of good MVP design as holding on to your dreams and showing up to work every day; having a vision, but also having the practicality to break your vision into small goals.

Lastly, MVP design doesn’t mean releasing work early to be done with it. It means returning to good but difficult-to-execute ideas that arose in early planning, learning from users, and having the discipline to keep iterating. It means seeing a project through from its messy beginnings to its final finesse.

Communication And Facilitation

Building fast, smart and targeted necessitates a good understanding of different facets of production. Knowing what makes a product tick, the implications of how and why something is being developed in a certain way, and how best to communicate the user’s needs will put the designer in a position to design well. There is no end to the questions designers can ask; any question is relevant.

Now more than ever, design means taking off the headphones and coming out from behind the computer screen in order to talk to people, expose problems and offer solutions. As a team member who tends to see a project holistically, the designer has more opportunities to make connections between people and establish decision points to keep a project on track.

This role shouldn’t be confused with a project or product manager, because design is still a designer’s main deliverable. However, it is worth noting that the designer who communicates well will take a more central role on the team, and more often than not this is the expectation rather than the exception.

“Design is all about relationships. Unfortunately, many designers don’t fully appreciate this. Some of the best design work I’ve ever done was drinking coffee or beers with engineers, marketing people, and business development hustlers. And I wholeheartedly mean design work.”

– Daniel Burka, in The Pastry Box Project

Surviving in a digital industry means learning hard skills all the time, but communication will be a valuable soft skill for the entirety of a designer’s career. It’s worth working on.

Getting It Done

Adam Davidson of NPR recently published an article titled “What’s an Idea Worth?” in the New York Times, writing:

“During the past few decades […] global trade and technology have made it all but impossible for any industry to make much profit in mass production of any sort. (Companies like G.E., Nike and Apple learned early on that the real money was in the creative ideas that can transform simple physical products far beyond their generic or commodity value.)”

The emphasis on “transform” is mine, because transformation is a lot like good design: It is active. Good design actively contributes to the execution of an idea.

Davidson goes on to present a compelling argument for nixing the billable hour, explaining that such a payment structure incentivizes long, boring or redundant tasks and reduces professionals to “interchangeable containers of finite, measurable units that could be traded for money.” Granted, he is talking about accountants, but this easily applies to design as well. Are we not more than the time we spend doing something? Is time-spent how we value the success of good design?

busy-building-things-real-artists-ship
The culture of “shipping” is becoming increasingly important to designers. (Image: Busy Building Things)

In product design, the answer, of course, is no. However, it is not just the idea that matters either. A product begins with an idea, but it is ultimately evaluated by what is released into the world.

If you are a designer who has ever had to mock up every page of a website just because a client insists, then the reason for this shift becomes clear: It is much better to test work in a living prototype, so that it can be played with, iterated on and further developed.

“At the end of the day, is an iPhone and an Android not the same idea, just executed differently? Execution is what really differentiates products or companies, not ideas.”

– Ross Popoff-Walker, in Ideas Do Not Matter: Here’s Why

The penultimate value of a product is in the creative execution of the idea. In other words, what have you released lately?

The Real Value Of Design

“The war is over. Design has won a place on the team. We can lay down arms, fuck around in text editors, and stop fighting the battles of yesteryear. If you’re still fighting it at your company, quit and move to SF or NYC. The future is here, and it’s hiring.”

– Joshua Seiden, in “Designers Shouldn’t Code” Is the Wrong Answer to the Right Question

An army of designers, especially recent graduates, will still work in client services (and will gain valuable experience there), but this shift towards product design has far-reaching implications for all designers and the skills they are expected to contribute when they are hired.

The users, the product and the team are now integral parts of the design brief. Fortunately, it is no longer the value of design that we are fighting to get recognized, but the value of the product, and this means we have more resources at our disposal. Design doesn’t have to do it alone, but designers do need to recognize and learn the processes necessary for success in this new environment.

(al) (il)

Source: Smashing Magazine

WebKit Has Implemented srcset, And It’s A Good Thing

WebKit has made some serious news by finally implementing the srcset attribute. As Chair of the W3C’s Responsive Images Community Group, I’ve been alternately hoping for and dreading this moment for some time now. It turns out to be good news for all involved parties—the users browsing the Web, most of all.

As with all matters pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the signal in all the noise. Here’s what you need to know.

What Does It Do?

As originally proposed, the srcset attribute allowed developers to specify a list of sources for an image attribute, to be delivered based on the pixel density of the user’s display:

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Not too scary, this markup. In plain English:

“Use low-res.jpg as the source for this img on low-resolution displays, and for any browser that doesn’t understand the srcset attribute. Use high-res.jpg as the source for this img on high-resolution displays in browsers that understand the srcset attribute.”

Things were starting to look scary, for a little while there. Due in part to high resolution devices, the average website is now nearly an entire megabyte of images. Now developers can target users on high-resolution displays with a high-resolution image source. Meanwhile, users on lower pixel density displays won’t be saddled with the bandwidth cost of downloading a massive high-resolution image, without seeing any benefit.

Can’t We Do That With JavaScript?

On the surface, srcset isn’t doing anything special—it chooses an appropriate source from an attribute and swaps the contents of an img tag’s src. Swapping the contents of an attribute is something we’ve been doing with JavaScript since time immemorial. Well, since the 90s, anyway. So, what does this gain us?

We actually attempted this approach on BostonGlobe.com, one of the earlier sites to make use of any sort of “responsive images” solution. Thanks to increasingly aggressive prefetching in several of the major browsers, an image’s src is requested long before we have a chance to apply any custom scripting: we would end up making two requests for every one image we displayed, defeating the entire purpose. I’ve documented some of those efforts elsewhere, so I’ll spare you the gory details here.

Can’t We Do That With CSS?

“Yes” and “No.” We can do this with background images easily enough, using a combination of media queries concerned with pixel density. srcset as implemented by WebKit is very similar to the recent image-set feature they introduced to CSS. image-set allows you to specify a list of background image sources and resolutions and allow the browser to make the decision as to which one is most appropriate—pretty familiar stuff. We didn’t have anything along these lines for non-presentational content images, however, until now.

Using CSS to manage content images is broken by default, in terms of keeping our concerns separate. It’s an approach that may make perfect sense within the scope of a quick demo page, but stands to quickly spiral out of control in a production website. Having our CMS generate scores of stylesheets full of background images would be no picnic, from a developer standpoint. Worse, however, is that it would lead to requests for stylesheets and images that users may not need unless done very, very carefully. Beyond that, it renders our images—no pun intended—inaccessible to users browsing by way of assistive technologies.

The closest thing we’ve found to a CSS-based approach would swap an image’s sources based on values set in HTMLs data attributes, using some proposed CSS trickery, much of which is only theoretical and may never happen. However, it still didn’t account for the the double download of high and low resolution image assets—the same issue we encountered with JavaScript. Even if a technique like Nicolas’ should become available to us, we’ll still face the same problems as many script-based solutions: attempting to work around a wasteful, redundant request.

What Does It Do About Bandwidth?

Regardless of screen density, there are a number of situations where lower resolution images sources may be preferable: a Retina MacBook Pro tethered to a 3G, for example, or an unstable conference WiFi network—both situations we’ve all been in plenty of times.

Beyond simply providing us with a sort of inline shorthand for resolution media queries, srcset accounts for bandwidth as well, in a sense. It’s buried in arcane spec-speak, but one of the really exciting facets of srcset is that it’s defined as a set of suggestions to the browser. The browser can then use environmental heuristics or a user preference to decide that it wants to fetch a lower resolution image despite a high-resolution display: envision a preference in your mobile browser allowing high-res images to only be requested while connected to WiFi, or a manual browser preference allowing you to only request low-resolution images when your connection is shaky.

Responsive Images
Ideally, we’d love to send only those images to devices which are specifically resized for each screen resolution. The intention is to save bandwidth and allow the images to download faster on the targeted screen. A common use case for responsive images.

This isn’t a part of WebKit’s early srcset implementation, but it does pave the way for their addition without requiring any changes to our markup. We, developers, can safely use srcset today, and these optimizations may come “for free” in the future.

What Does This Mean For The picture Element?

Here’s where things get interesting.

The version of srcset implemented by WebKit matches the original proposed use of srcset, and the version that the Responsive Images Community Group has been working towards. We can think of this incarnation of srcset as shorthand for the whole slew of media queries concerned with resolution, with one key difference where the browser can choose to override the applicable source based on user preference.

While this implementation matches the original srcset proposal, the current srcset spec attempts to expand the syntax to cover some of the use cases that the picture element fulfills, using a microsyntax that performs some—but nowhere near all—of the functions of media queries.

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">

In our opinion not ideal, this markup pattern. We’re restricted to the equivalent of max-width media queries, pixels, and an inscrutable microsyntax, all for the sake of duplicating the function of media queries. Fortunately for us, neither Web developers nor browser reps are particularly fond of this overextended syntax—hopefully, it will never see the light of day.

The picture element exists to address these use cases using a more flexible—and familiar—syntax. picture uses media attributes on source elements, similar to the video element. This allows us to target image sources to a combination of factors: viewport height and/or width, in pixels or ems, using either min or max values—just like media queries in our CSS.

<picture>
    <source src="med.jpg" media="(min-width: 40em)" />
    <source src="sm.jpg" />
    <img src="fallback.jpg" alt="" />
</picture>

The picture specification was written with this reduced srcset syntax in mind, so it could be used on picture’s source elements as well as img elements.

<picture>
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" />
    <source src="sm.jpg 1x, sm-hd.jpg 2x.jpg" />
    <img src="fallback.jpg" alt="" />
</picture>

In concert, the two markup patterns give us an incredible amount of flexibility over what image sources we serve to users, depending on their context.

So This Is Good News.

Absolutely, it is. While srcset as implemented by WebKit doesn’t address to all the responsive images use cases, it does represent a major step toward a long overdue solution—hopefully the first of many.

Let’s hope that other browsers follow WebKit’s lead in implementing this feature as it was originally proposed, and stay tuned to the Responsive Images Community Group’s homepage and Twitter account to keep tabs on the subject.

I also wrote about the issues with responsive images and the solutions we’ve come up with when working on the BostonGlobe website in the chapter “The Struggles and Solutions In Responsive Web Design” of the upcoming Smashing Book 4. Grab it, you won’t be disappointed.

(vf)

Source: Smashing Magazine

Semantic CSS With Intelligent Selectors

“Form ever follows function. This is the law.” So said the architect and “father of skyscrapers” Louis Sullivan. For architects not wishing to crush hundreds of innocent people under the weight of a colossal building, this rule of thumb is pretty good. In design, you should always lead with function, and allow form to emerge as a result. If you were to lead with form, making your skyscraper look pretty would be easier, but at the cost of producing something pretty dangerous.

So much for architects. What about front-end architects — or “not real architects,” as we are sometimes known? Do we abide by this law or do we flout it?

With the advent of object-oriented CSS (OOCSS), it has become increasingly fashionable to “decouple presentation semantics from document semantics.” By leveraging the undesignated meanings of classes, it is possible to manage one’s document and the appearance of one’s document as curiously separate concerns.

Overthinking how a functional thing should look.

In this article, we will explore an alternative approach to styling Web documents, one that marries document semantics to visual design wherever possible. With the use of “intelligent” selectors, we’ll cover how to query the extant, functional nature of semantic HTML in such a way as to reward well-formed markup. If you code it right, you’ll get the design you were hoping for.

If you are like me and have trouble doing or thinking about more than one thing at a time, I hope that employing some of these ideas will make your workflow simpler and more transferable between projects. In addition, the final section will cover a more reactive strategy: We’ll make a CSS bookmarklet that contains intelligent attribute selectors to test for bad HTML and report errors using pseudo-content.

Intelligent Selectors

With the invention of style sheets came the possibility of physically separating document code from the code used to make the document presentable. This didn’t help us to write better, more standards-aware HTML any more than the advent of the remote control resulted in better television programming. It just made things more convenient. By being able to style multiple elements with a single selector (p for paragraphs, for instance), consistency and maintenance became significantly less daunting prospects.

television remote reading DRIVEL

The p selector is an example of an intelligent selector in its simplest form. The p selector is intelligent because it has innate knowledge of semantic classification. Without intervention by the author, it already knows how to identify paragraphs and when to style them as such — simple yet effective, especially when you think of all of the automatically generated paragraphs produced by WYSIWYG editors.

So, if that’s an intelligent selector, what’s an unintelligent one? Any selector that requires the author to intervene and alter the document simply to elicit a stylistic nuance is an unintelligent selector. The class is a classic unintelligent selector because it is not naturally occurring as part of semantic convention. You can name and organize classes sensibly, but only with deliberation; they aren’t smart enough to take care of themselves, and browsers aren’t smart enough to take care of them for you.

Unintelligent selectors are time-intensive because they require styling hooks to be duplicated case by case. If we didn’t have p tags, we’d have to use unintelligent selectors to manufacture paragraphs, perhaps using .paragraph in each case. One of the downsides of this is that the CSS isn’t portable — that is, you can’t apply it to an HTML document without first going through the document and adding the classes everywhere they are required.

class selector called paragraph

Unintelligent selectors at times seem necessary, or at least easier, and few of us are willing to rely entirely on intelligent selectors. However, some unintelligent selectors can become “plain stupid” selectors by creating a mismatch between document structure and presentation. I’ll be talking about the alarming frequency with which the unintelligent .button selector quickly becomes plain stupid.

Vive la Différence

Intelligent selectors are not confined just to the basic elements offered to us in HTML’s specification. To build complex intelligent selectors, you can defer to combinations of context and functional attribution to differentiate basic elements. Some elements, such as <a>, have a multitude of functional differences to consider and exploit. Other elements, such as <p>, rarely differ in explicit function but assume slightly different roles according to context.


header p {
   /* styles for prologic paragraphs */
}

footer p {
   /* styles for epilogic paragraphs */
}

Simple descendent selectors like these are extremely powerful because they enable us to visually disclose different types of the same element without having to physically alter the underlying document. This is the whole reason why style sheets were invented: to facilitate physical separation without breaking the conceptual reciprocity that should exist between document and design.

a semantic heirarchy of needs: what it is, how it functions, where it is

Inevitably, some adherents of OOCSS treat the descendent selector with some suspicion, with the more zealous insisting on markup such as the example below, found in BEM’s “Definitions” documentation.


<ul class="menu">
  <li class="menu__item">…</li>
  <li class="menu__item">…</li>
</ul>

I won’t cover contextual selectors any further because, unless you have a predilection for the kind of overprescription outlined above, I’m sure you already use them every day. Instead, we’ll concentrate on differentiation by function, as described in attributes and by attribute selectors.

Hyperlink Attributes

Even those who advocate for conceptual separation between CSS and HTML are happy to concede that some attributes — most attributes besides classes and custom data attributes, in fact — have an important bearing on the internal functioning of the document. Without href, your link won’t link to anything. Without type, the browser won’t know what sort of input to render. Without title, your abbr could be referring to either the British National Party or Banco Nacional de Panama.

Some of these attributes may improve the semantic detail of your document, while others are needed to ensure the correct rendering and functioning of their subject elements. If they’re not there, they should be, and if they are there, why not make use of them? You can’t write CSS without writing HTML.

The rel Attribute

The rel attribute emerged as a standard for link relations, a method of describing some specific purpose of a link. Not all links, you see, are functionally alike. Thanks to WordPress’ championing, rel="prev" and rel="next" are two of the most widely adopted values, helping to describe the relationship between individual pages of paginated blog content. Semantically, an a tag with a rel attribute is still an a tag, but we are able to be more specific. Unlike with classes, this specificity is semantically consequential.

The rel attribute should be used where appropriate because it is vindicated by HTML’s functional specification and can therefore be adopted by various user agents to enhance the experience of users and the accuracy of search engines. How, then, do you go about styling such links? With simple attribute selectors, of course:


[rel="prev"] {
  /* styling for "previous links" */
}

[rel="next"] {
  /* styling for "next" links */
}

Attribute selectors like these are supported by all but the most archaic, clockwork browsers, so that’s no reason not to use them anywhere the attributes exist. In terms of specificity, they have the same weight as classes. No woe there either, then. However, I recall it being suggested that we should decouple document and presentation semantics. I don’t want to lose the rel attributes (Google has implemented them, for one thing), so I’d better put an attribute that means nothing on there as well and style the element via that.


  <a href="/previous-article-snippet/" rel="prev" class="prev">previous page</a>

The first thing to note here is that the only part of the element above that does not contribute to the document’s semantics is the class. The class, in other words, is the only thing in the document that has nothing functionally to do with it. In practice, this means that the class is the only thing that breaks with the very law of separation that it was employed to honor: It has a physical presence in the document without contributing to the document’s structure.

OK, so much for abstraction, but what about maintenance? Accepting that we’ve used the class as our styling hook, let’s now examine what happens when some editing or refactoring has led us to remove some attributes. Suppose we’ve used some pseudo-content to place a left-pointing arrow before the [rel="prev"] link’s text:


.prev:before {
  content: '90'; /* encoding for a left-pointing arrow ("←") */
}

previous link with arrow

Removing the class will remove the pseudo-content, which in turn will remove the arrow (obviously). But without the arrow, nothing remains to elucidate the link’s extant prev relationship. By the same token, removing the rel attribute will leave the arrow intact: The class will continue to manage presentation, all the time disguising the nonexistence of a stated relationship in the document. Only by applying the style directly, via the semantic attribute that elicits it, can you keep your code and yourself honest and accurate. Only if it’s really there, as a function of the document, should you see it.

Attribute Substrings

I can imagine what you’re thinking: “That’s cute, but how many instances are there really for semantic styling hooks like these on hyperlinks? I’m going to have to rely on classes at some point.” I dispute that. Consider this incomplete list of functionally disimilar hyperlinks, all using the a element as their base:

  • links to external resources,
  • links to secure pages,
  • links to author pages,
  • links to help pages,
  • links to previous pages (see example above),
  • links to next pages (see example above again),
  • links to PDF resources,
  • links to documents,
  • links to ZIP folders,
  • links to executables,
  • links to internal page fragments,
  • links that are really buttons (more on these later),
  • links that are really buttons and are toggle-able,
  • links that open mail clients,
  • links that cue up telephone numbers on smartphones,
  • links to the source view of pages,
  • links that open new tabs and windows,
  • links to JavaScript and JSON files,
  • links to RSS feeds and XML files.

That’s a lot of functional diversity, all of which is understood by user agents of all sorts. Now consider that in order for all of these specific link types to function differently, they must have mutually differential attribution. That is, in order to function differently, they must be written differently; and if they’re written differently, they can be styled differently.

In preparing this article, I created a proof of concept, named Auticons. Auticons is an icon font and CSS set that styles links automatically. All of the selectors in the CSS file are attribute selectors that invoke styles on well-formed hyperlinks, without the intervention of classes.

art_auticons

In many cases, Auticons queries a subset of the href value in order to determine the function of the hyperlink. Styling elements according to the way their attribute values begin or end or according to what substring they contain throughout the value is possible. Below are some common examples.

The Secure Protocol

Every well-formed (i.e. absolute) URL begins with a URI scheme followed by a colon. The most common on the Web is http:, but mailto: (for SMTP) and tel: (which refers to telephone numbers) are also prevalent. If we know how the href value of the hyperlink is expected to begin, we can exploit this semantic convention as a styling hook. In the following example for secure pages, we use the ^= comparator, which means “begins with.”


a[href^="https:"] {
   /* style properties exclusive to secure pages */
}

a link to a secure page with a lock icon

In Auticons, links to secure pages become adorned with a padlock icon according to a specific semantic pattern, identifiable within the href attribute. The advantages of this are as follows:

  • Links to secure pages — and only secure pages — are able to resemble links to secure pages by way of the padlock icon.
  • Links to secure pages that cease to be true links to secure pages will lose the https protocol and, with it, the resemblance.
  • New secure pages will adopt the padlock icon and resemble links to secure pages automatically.

This selector becomes truly intelligent when applied to dynamic content. Because secure links exist as secure links even in the abstract, the attribute selector can anticipate their invocation: As soon as an editor publishes some content that contains a secure link, the link resembles a secure one to the user. No knowledge of class names or complex HTML editing is required, so even simple Markdown will create the style:


[Link to secure page](https://payment.example.com/)

Note that using the [href^="https:"] prefix is not infallible because not all HTTPS pages are truly secure. Nonetheless, it is only as fallible as the browser itself. Major browsers all render a padlock icon natively in the address bar when displaying HTTPS pages.

PayPal secure page

File Types

As promised, you can also style hyperlinks according to how their href value ends. In practice, this means you can use CSS to indicate what type of file the link refers to. Auticons supports .txt, .pdf, .doc, .exe and many others. Here is the .zip example, which determines what the href ends with, using $ =:


[href$  =".zip"]:before,
[href$  =".gz"]:before {
   content: 'E004'; /* unicode for the zip folder icon */
}

Combinations

You know how you can get all object-oriented and use a selection of multiple classes on elements to build up styles? Well, you can do that automatically with attribute selectors, too. Let’s compare:


/* The CSS for the class approach */

.new-window-icon:after {
   content: '[new window icon]';
}

.twitter-icon:before {
  content: '[twitter icon]';
}

/* The CSS for the attribute selector approach */

[target="_blank"]:after {
   content: '[new window icon]';
}

[href*="twitter.com/"]:before {
  content: '[twitter icon]';
}

(Note the *= comparator, which means “contains.” If the value string contains the substring twitter.com/, then the style will be honored.)


<!-- The HTML for the class approach -->

<a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>

<!-- The HTML for the attribute selector approach -->

<a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>

A twitter link with icons to show that it goes to twitter and is external

Any content editor charged with adding a link to a Twitter page now needs to know only two things: the URL (they probably know the Twitter account already) and how to open links in new tabs (obtainable from a quick Google search).

Inheritance

Some unfinished business: What if we have a link that does not match any of our special attribute selectors? What if a hyperlink is just a plain old hyperlink? The selector is an easy one to remember, and performance fanatics will be pleased to hear that it couldn’t be any terser without existing at all.

A basic anchor selector (a)

Flippancy aside, let me assure you that inheritance within the cascade works with attribute selectors just as it does with classes. First, style your basic a — perhaps with a text-decoration: underline rule to keep things accessible; then, progressively enhance further down the style sheet, using the attribute selectors at your disposal. Browsers such as Internet Explorer (IE) 7 do not support pseudo-content at all. Thanks to inheritance, at least the links will still look like links.


a {
  color: blue;
  text-decoration: underline;
}

a[rel="external"]:after {
   content: '[icon for external links]';
}

Actual Buttons Are Actual

In the following section, we’ll detail the construction of our CSS bookmarklet for reporting code errors. Before doing this, let’s look at how plain stupid selectors can creep into our workflow in the first place.

Adherents of OOCSS are keen on classes because they can be reused, as components. Hence, .button is preferable to #button. I can think of one better component selector for button styles, though. Its name is easy to remember, too.

button element selector

The <button> element represents a button.

W3C Wiki

Topcoat is an OOCSS BEM-based UI framework from Adobe. The CSS for Topcoat’s various button styles is more than 450 lines if you include the comment blocks. Each of these comment blocks suggests applying your button style in a manner similar to this introductory example:


   <a class="topcoat-button">Button</a>

This example is not a button. No, sir. If it were a button, it would be marked up using <button>. In fact, in every single browser known to man, if it were marked up as a button and no author CSS was supplied, you could count on it looking like a button by default. It’s not, though; it’s marked up using <a>, which makes it a hyperlink — a hyperlink, in fact, that lacks an href, meaning it isn’t even a hyperlink. Technically, it’s just a placeholder for a hyperlink that you haven’t finished writing yet.

Dog in a shark costume
A dog in a shark costume does not a shark make. (Image: reader of the pack)

The examples in Topcoat’s CSS are only examples, but the premise that the class defines the element and not the HTML is deceptive. No amount of class name modification via “meaningful hyphenation” can make up for this invitation to turn your unintelligent selector into a plain stupid one and to just code stuff wrong.

See No Evil, Hear No Evil

“If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck.”

A link that resembles a button and triggers button-like JavaScript events is, to many, a button. However, this only means that it has passed the first two stages of the “duck test.” For all users to be able to apply inductive reasoning and discern the button as such, it must also quack like one. Because it remains a link, it will be announced by screen readers as “link,” meaning that your allegorical skyscraper is not wheelchair-accessible. Avoiding this kind of unnecessary confusion for assistive technology users is not a pursuit of semantic perfection but a responsibility we should undertake for real benefit.

Nonetheless, some will insist on using a as the basis of their buttons. Hyperlinks are (slightly) easier to restyle consistently, after all. If a is the element of choice, then there is only one way to make it a close-to-true button in the accessibility layer. You guessed it: You must apply another meaningful attribute in the form of a WAI ARIA role. To ensure that a hyperlink element looks like a button for good reason, apply only the following attribute selector.


[role="button"] {
   /* semantic CSS for modified elements that are announced as “button” in assistive technologies */
}

Quality Assurance With Attribute Selectors

“CSS gives so much power to the class attribute, that authors could conceivably design their own “document language” based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the “class” attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings.”

– “Selectors,” CSS Level 2, W3C

The reason we have two elements — a and button — is to semantically demarcate two entirely different types of functional interaction. While the hyperlink denotes a means to go somewhere, the button is intended as the instigator of an event or action. One is about traversal, the other about transformation. One facilitates disengagement, the other engagement.

To make sure we don’t do anything too daft and get our links and buttons muddled up, we will now build a CSS bookmarklet that uses intelligent attribute selectors to test the validity and quality of the two respective elements.

Inspired partly by Eric Meyer’s post and taking a few cues from DiagnostiCSS, this style sheet will combine attribute selectors and the :not selector (or negation pseudo-class) to highlight problems in the HTML. Unlike these other two implementations, it will write an error to the screen using pseudo-content. Each error will be written in Comic Sans against a pink background.

By connecting function directly to form, we see that ugly markup results in ugly CSS. Consider this the revenge of an abused document, exacted on its designer. To try it out, drag revenge.css to your bookmarks, and click the bookmark to trigger it on any page that you fancy (Facebook is good):

REVENGE.CSS
Drag to your bookmarks bar.

Rule 1

“If it’s a hyperlink, it should have an href attribute.”


a:not([href]):after {
   content: 'Do you mean for this to be a link or a button, because it does not link to anything!';
   display: block !important;
   background: pink !important;
   padding: 0.5em !important;
   font-family: 'comic sans ms', cursive !important;
   color: #000 !important;
   font-size: 16px !important;
}

Notes: In this example, we are testing not the attribute’s value, but whether the attribute exists in the first place — that is, whether [href] matches any element with an href attribute. This test is only appropriate on hyperlinks, hence the a prefix. The rule reads like, “For every a element that is not also an [href] element, append some pseudo-content with an error notice.”

Rule 2

“If it’s a hyperlink and has an href attribute, it should have a valid value.”


a[href=""]:after, a[href$  ="#"]:after, a[href^="javascript"]:after {
   content: 'Do you mean for this link to be a button, because it does not go anywhere!';
   /*... ugly styles ...*/
}

Notes: If the href is empty, ends in a # or is using JavaScript, it’s probably being used as a button without the correct button element. Note that I am using “starts with javascript.” Standard practice for voiding hrefs is to use javascript:void(0), but we can’t depend on that always being written in the same way (with or without a space after the colon, for example).

Rule 3

“If it uses a button class, it should be a button — at least in the accessibility layer.”


.button:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
.btn:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
a[class*="button"]:not([role="button"]):after {
   content: 'If you are going to make it look like a button, make it a button, damn it!';
   /*... ugly styles ...*/
}

Notes: In this example, we’re demonstrating how you can chain negation when testing for attributes. Each selector reads like this: “If the element has a class that says it’s a button but it’s not a button element and it doesn’t have the correct role to make it a button in the accessibility layer and it’s not an input being used as a button, then… well, you’re lying.” I’ve had to use [class*="button"] to catch the many Topcoat class variations (62 in total!) that fail to enforce actual buttons on hyperlinks. I’ve noticed that some authors use button-container and the like on parent elements, which is why the a qualifier is included to avoid false positives. You may recognize the .btn class from Twitter Bootstrap, which (if you’ve read the component’s documentation carefully) you’ll know is also unsure about whether links or buttons are buttons.

Rule 4

“If it is an a element with role="button", then it should link to somewhere when JavaScript is off.”


a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"]):after {
   content: 'Either use a link fallback, or just use a button element.';
   /*... ugly styles ...*/
}

Notes: We can be fairly sure that hrefs that do not include one of /, . (usually to precede a file extension) or ? (to start a query string) are probably bogus. Getting links to act as buttons and return: false when JavaScript is on is fine — fine, that is, if they have a page to go to when JavaScript is off. In fact, it’s the only legitimate reason I can think of not to use <button> instead.

Rule 5

“You can’t disable a hyperlink.”


a.button[class*="disabled"]:after,
a.btn.disabled:after,
a[class*="button"][class*="disabled"]:after {
   content: 'You cannot disable a hyperlink. Use a button element with type="disabled".';
   /*... ugly styles ...*/
}

Notes: Even ancient user agents understand the disabled attribute, so use it with an appropriate element in a compliant way. You can concatenate attribute selectors just as you can concatenate classes: In the last of the three selectors, we’re saying, “If it’s a link that contains the substring button and the substring disabled, then print an error message.” Twitter Bootstrap uses the second form, .btn.disabled, in its style sheet, but not with the a prefix. We’ll only consider it an error if used on hyperlinks.

Rule 6

“Buttons in forms should have explicit types.”


form button:not([type]):after {
	content: 'Is this a submit button, a reset button or what? Use type="submit", type="reset" or type="button"';
}

Notes: We need to determine whether buttons within forms have explicit types, because some browsers will treat any button in this context without a specified type as type="submit". We want to be absolutely sure that the form won’t submit if our button has a different purpose.

Rule 7

“Both hyperlinks and buttons should have some sort of content or an ARIA label.”


a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after,
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after,
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after {
   content: 'All buttons and links should have text content, an image with alt text or an ARIA label';
   /*... ugly styles ...*/
}

Notes: Buttons and links that don’t include any kind of direction for their usage — in either textual or graphical form — are pretty bogus. These final two selectors are perhaps the most complex I’ve ever written. For the hyperlink version, the selector reads something like this: “If it is a hyperlink that does not have either an aria-label attribute or an aria-labelledby attribute and it contains only an image as content but this image does not have an alt attribute, then write the ugly error message.” Also, note the use of the :empty selector. Arguably, no element that is not self-closing should ever be left empty.

Ten points to the first person using revenge.css who can tell me where I’ve broken my own rule in this very article. Trust me, the error is definitely there.

Conclusion

The reason I use the kinds of selectors and patterns described above is not to try something different or to have something new to write about. Attribute selectors aren’t, by themselves, anything new anyway. IE 6 is the only browser that doesn’t support them. The reason I use them is because I simply do not have the time or mental capacity to “do” HTML and CSS in parallel. My brain just isn’t good enough for that. The reason I style my page headers with [role="banner"] and not .page-header is because that’s the only way I’ll know — upon seeing the intended visual effect — that I’ve put the navigable landmark in place. How else does one keep track? You can’t just leave it to testing, because then it’s usually too late.

There’s no such thing as semantic CSS. There’s only semantic HTML and its visible form. In this article I have tried to demonstrate that, by coupling the function and form of Web pages directly, you can create mechanisms for reward and punishment. On the one hand, you can set up selectors that invoke visual motifs only when the suitable markup is used. On the other hand, you can query the markup for bad patterns and erode the visual design as a commitment to the underlying ugly truth.

It’s true that not all the styling hooks in your arsenal will likely ever be uniformly semantic or intelligent. Classes are often desirable as polyfills for much needed elements or attributes that have yet to be standardized. That’s how .footer became <footer> and type="text" (with a bunch of JavaScript) became type="url". Other times, they are helpful for doing non-semantic layout scaffolding with grid frameworks and the like.

However, if you are committed to giving CSS its own completely separate logic, then you are bound to create unnecessary arguments between form and function. In this eventuality, only constant vigilance can protect against inaccessibility and invalidity. To make matters worse, trying to manufacture pseudo-semantics purely with classes makes it easy to fall into one of those interminable discussions over what makes a semantic class name. You’ll start spending less time using the remote to control the TV and more time just sitting there, contemplating the remote control held in your hand.

Life is too short.

(al) (ea)

Source: Smashing Magazine