How we structure JavaScript and CSS in Ruby on Rails

At Planet, we do a lot of work for startups at all stages of product lifecycle. When we jump into a project after it has already been created, we are often surprised at the lack of organization, flexibility, and modularity of Ruby on Rails projects.

You have the asset pipeline, treat it as your friend. It is okay to separate files.

Remember the old days of a single stylesheet for a project? That was ridiculously stupid. One file, a number of frontend devs, equals disaster. But in Rails projects we now have the asset pipeline to create different manifests or sets of stylesheets. I’ll go through stylesheets first and then tie everything into javascript architecture.

There are multiple types of stylesheets you need to consider.
1. Chrome and layout stylesheets. These include header, footer, logo, and other universal layout components.
2. Reusable patterns. Similar to bootstrap, your forms, lists, content boxes and more all go here.
3. Page-specific styles. Nearly every page has some special style and all those should be scoped to your page here.
4. Third party. Bootstrap, clearfix, modal, and other styles from projects that aren’t your own go here.
5. Browsers. I keep browser specific styles here. In other words, Internet Explorer.

Screenshot of stylesheets directory

Set page-specific IDs to the body tag to scope your pages

1. Create helpers in application_helper.rb

  def page_id
    if id = content_for(:body_id) and id.present?
      return id
    else
      base = controller.class.to_s.gsub("Controller", '').underscore.gsub("/", '_')
      return "#{base}-#{controller.action_name}"
    end
  end
  
  def page_class
    controller.class.to_s.gsub("Controller", '').underscore.gsub("/", '_')+" "+content_for(:page_class)
  end

2. Set page ID and class in application.html.erb

<body id="<%= page_id %>" class="<%= page_class %>">

3. Now the ID for a body will be controller-view. For example, on Recognize the homepage ID is “home-index”.

4. Structure your stylesheet page styles by controller and have each file be a view.
Screenshot of folder structure

If you have controller-wide styles then create a file called the controller. For instance home can be: home/home.sass, home/index.sass, home/tour.sass, etc.

Home.sass will look like…

.home
  p
    font-weight: 600

The home index stylesheet will look like…

#home-index
  p
   font-weight: 100

Now everything is scoped and isolated. If you change something in the home-index you are 100% sure it will only affect that page. The result is far lower bugs and more confidence for developers to create new features.

Some follow the paradigm if giving the view and controller class names on the body.

.home.index
 p
  font-weight: 100

The problem with this is will never do styles specific to index across all controllers so why would I want a class of index?

Regardless, the reason why I do #controller-view is for JavaScript, and it a good time to get into that.

Make your JavaScript also scoped by controller-view (the page).

Now that we have our page ID of controller-view, we use that for the key of a page-specific javascript object. The object ends up looking like this:

JavaScript page object

You can create another layer of architecture to not have all the pages loaded when not in use. But removing the pages object all together only lowered memory by 2mb, so insignificant.

Create page-specific JavaScripts and run it on page load or view change

To start the page-specific JavaScript, use the following snippet in a init.js file.

 var dataScript = document.body.getAttribute("id");
 window.R = window.R || {};

 if (R.pages && R.pages[dataScript]) {
  R.currentPage = new R.pages[dataScript]();
 }

If there is a page-specific JavaScript, it will run it, if not, then it won’t. Simple!

Here’s what a page-specific JavaScript file looks like.

window.R = window.R || {};
window.R.pages = window.R.pages || {};

window.R.pages["home-index"] = function() {
 alert("Dude you are so on the home index!");
};

By declaring a function as pages[“home-index”], it is only executed if you are actually on the home-index. Perfect!

But what about JavaScript that is used across all views in a controller? The solution is to create an abstract class, or a base class, for the controller and have all the views extend that class. (I know JavaScript doesn’t have classes, but this is the best way to describe it.)

window.R = window.R || {};
window.R.pages = window.R.pages || {};

window.R.pages["home-index"] = (function($, window, undefined) {

  var Index = function() {
    Index.superclass.constructor.apply(this, arguments);
  };
  
  R.utils.inherits(Index, R.pages.home);

  return Index;
})(jQuery, window);

Here I extend the R.pages.home for the index. I never directly instantiate window.R.pages.home, it is executed via its views – index.js.

A screenshot of the JavaScript folder.
Screenshot of page JavaScript

What about AMD?

The one thing that isn’t awesome about this is it isn’t using an AMD pattern. To use AMD (such as require.js) with the asset pipeline in Rails would need a system that loops over all the JavaScript view files and create manifests that can be compiled by Rails. Another approach is using an additional build with a frontend JavaScript minification and combining library.

Isolating assets lowers your chances of bugs

By keeping everything scoped and organized not only do future developers have an easier time getting started, but it also reduces bugs, which also helps future developers. One of the biggest fears of new devs is breaking existing functionality. By knowing what you are doing only affects one page or widget, then the dev can be confident they can innovate rather than regress.

What about JavaScript that is across controllers?

Just like for the stylesheets, create a patterns/ directory that contains all the reusable JavaScript functionality.

This architecture described above has been used by our team for a couple of years now and we are super happy with it and I hope you are too!

Smart Group Messaging in Lyte

What if you didn’t have to search through long group message threads to find links, maps, images, photographs, videos, and other information?

Lyte pulls important information to the top of discussions

When information is mentioned in a Lyte thread’s comments section, it automatically takes the links and maps mentioned, and puts them into buckets at the top of the thread.

Lyte is smart group chat

Our users never have to search through long email chains to find directions or a link.

The analysis of the comments and discussions occurs in the browser. We never read or analyze messages, the work is done using browser technologies, mainly JavaScript. In other words, the user is analyzing their own information.

We call this technology Smart Group Messaging

Bringing intelligence into your group chats increases the value of a conversation. To make the information more valuable we are looking towards third parties to help parse and render more information based on user discussions. Also, we want to add dates and events. One can imagine many ways to expand Smart Group Messaging’s usefulness. Our number one goal is getting out of our users way, and giving them the information they need.

Write Todo lists within group messaging

In order to better understand what our customer base is looking for, we’ve interviewed a number of professionals and learned todo lists are important to people’s workflow.

We want to allow people to create todo lists in the easiest way possible. Imagine writing in a thread comment “TODO: Finish the press release” and automatically become a todo item listed at the top of the thread.

Lyte helps people keep track of their thoughts and ideas as they arise naturally. Write whatever comes to mind, and we’ll sort it.

Rethinking group messaging

People group messaging

The internet is still in its early days. People in their 20s and 30s can remember the days of dial up modems and the use of analog pay phones. Every online application and internet idea can be rethought and recreated a hundred times over. The light bulb is over 140 years old and it continues to enjoy innovative transformations. At Planet, we believe that like the light bulb, group messaging applications will also continue to be reimagined.

Introducing Lyte, lightweight group messaging

The goal of Lyte is to allow people to focus on the message. If you want to create groups, that’s easy to do. But the point is the messages. It is all about getting the information you need. We want to help you get to your map links, your attached photos, and helping you easily find everything that comes up in discussions. The experience of Lyte is 100% focused on you sending and receiving the messages that you can find later.

Conversations with smaller groups of people

“Do not spend too much time with large groups of people.” That’s a quote from the poem entitled, “How To Be Perfect,” by Ron Padgett. You can read it here. We agree with that quote. Let’s return home in our online social circles. With Lyte, you can easily communicate with the people you really care about.

Group messaging where the groups are optional

But you don’t have to create any groups. You create threads and if you want to save the recipients on that thread into a specific group, say “Basketball friends,” you can save that later. That way you can still focus on your message. Groups help to organize ideas and to easily message groups again, but they aren’t required.

Staying on the web

Although we have plans for features like reply by email, reply by text, and mobile app, we are going to keep Lyte primarily on the web. Beluga and GroupMe are mobile apps only, focusing on quick chats. Lyte is different. We are encouraging you to have conversations that can be retrieved. That’s why we have tagging, search, threads, and rich snippets. It is all about access to your thoughts and ideas.

We can’t wait to open it to the public, our friends love it and we hope you will too.

Lyte is closed for sign up right now. We are soon opening to beta. Please feel free to contact us to request access.

How you too can add a kitten puzzle to your 500 page

For Recognize, we wanted the error page to distract the user from errors. Although errors are extremely rare, they are nevertheless jarring experiences.

Create a distraction on your 500 error page.

To make our 500 error page more interesting we added a photograph shuffle puzzle. To take that puzzle to the next level, we chose an adorable photograph of a kitten.

Kitten Puzzle

We’ve received positive feedback regarding our puzzle.

Nate Vaughn posting on our 500 page

Now you too can add a kitten puzzle to your 500 page

Step 1. fork my puzzle on github

Go to the Github repo and download the JavaScript HTML5 puzzle.

Step 2. Rename index.html to 500.html

Paste the entire package (minus the README) into your public directory where you keep your 500.html page. Re name the index.html as 500.html.

Step 3. Edit 500.html and CSS

Put your important meta data into the head of your new 500.html and update the introduction html and content. There is a bunch of CSS that you will probably want to cut out. Out of box it is somewhat space themed.

Step 4. Put in your own photograph

Make sure to change the image. Has to be 500x500px. This is the image you’ll want to update: https://github.com/grandecomplex/JS-Picture-Puzzle/blob/master/_ui/img/image.jpg.

And now you have a puzzle as your 500 page! Users are successfully distracted!

San Francisco Coffee

As a Seattle-trained barista I have grown a certain level of coffee snobbery. My friends argue I’m overly critical and I argue it is just water and coffee; how can someone screw it up so bad, so often? San Francisco coffee is not generally the best, but follow my guide and you’ll always get a good cup.

The SF coffee scene is growing and the options are diversifying; it is wonderful to watch. More than ever, it is important to know where to go and what to drink in San Francisco. To help educate the espresso neophyte, the following list provides a series of tips.

Where San Francisco coffee is the best

Sight Glass Coffee - San Francisco Coffee Roaster
Coffee shops are quickly popping up in SF. I haven’t been to them all and I’m sure there are many more great cafes than listed below. But the following list guarantees a great cup of joe. The best of the best are promoted here, and any critism I write is really just a level of snobbery that isn’t necessary for most people.

Haus

A small coffee shop located in the deep Mission. One of the few cafes with outdoor seating and delivers consistent good coffee. Check out this awesome cafe on 24th Street.

Coffee Bar

Coffee Bar replaced what the The Summit was back in the good old days of Valencia Street. It is like a shared office space slash espresso bar with food. Coffee Bar is in the Mission near Mission Cliffs. The food is good, the atmosphere is beautiful and creative, and the coffee is almost always the best. Macbooks and other devices are welcome.

Blue Bottle

Blue Bottle is a San Francisco coffee native. Even with a number of cafes now open in SF and NYC, they have maintained quality. The newer Blue Bottle cafes can have some problems with their shots, but Hayes Valley, MOMA, and the Ferry Building are always very good. Blue Bottle’s flavor is balanced and slightly sweet.

Sight Glass

For coffee strength, Sight Glass is in between Four Barrel and Blue Bottle. The coffee is well-rounded and always delicious. The best part of Sight Glass is their 7th street cafe in SOMA. The space is beautiful and they allow bikes inside. This is my favorite cafe in the city next to Coffee Bar. They are also a San Francisco coffee native.

Four Barrel

This cafe is located on Valencia Street in the Mission. It is everything hipster. The staff is very interesting and mostly very nice. Definitely a great place to people watch. The coffee is generally too strong, but I like that. No WIFI here and I advise not bringing a laptop unless you sit in the back. Four Barrel only has one cafe even with lines around the block, and is another San Francisco coffee native.

Ritual

Not my favorite cafe, but has good single origin pour over. They have a large cafe on Valencia Street and a really hip stand in Hayes Valley.

What to drink in San Francisco coffee cafes

Espresso Shot
Many drinks aren’t listed here because they aren’t important. Focus on the primary drinks.

The Espresso

Espresso is the drink that puts hair on your chest. Order with caution. But, a straight espresso can have many positive effects, sucha as sudden euophria and innovative ideas.

When ordering make sure the barista pulls a ristretto shot. That means the shot is pulled short, or in other words it uses less water. Ristretto is the opposite of what they do in Europe where they pull the shot until it fills up a cup of coffee. Luckily, the West Coast of USA knows that is unacceptable.

Americano

The americano is like a normal cup of coffee, but extra delicious due to it being espresso. Essentially the americano is a diluted cup of espresso by adding water. Try an 8oz double americano, and enjoy a strong cup of coffee.

If your americano is bubbly at the top, kindly ask for it to be redone with hot water poured first into the cup, then the espresso is prepared and poured into the hot water. Espresso never goes in first, especially with spraying boiling water.

Single Origin Pour Over

This is all the rage in San Francisco. They even have it in Terminal 2 in SFO. Pour Over is like a traditional cup of drip coffee, but it only pours enough water for one cup. The result is strong, but clean.

Toddy (cold brewed)

Cold brew is up and coming with coffee makers now selling them by the bottle. Toddy is a specific technique, but is commonly used to describe cold brew coffee. The methodology is to make a french press with cold water and let it sit for 12 hours. The result is a very strong, but low acidity, cup of cold coffee. Serve with ice and cream.

Latte

A latte is delicately steamed milk mixed into espresso. A correctly steamed milk is obvious when the barista can make latte art, such as a heart or a rosetta leaf. The ratio is mostly milk and a bit of foam.

Don’t use any flavors. If it requires flavor to enjoy a latte, then maybe lattes aren’t your drink.

Macchiato

Macchiato are tiny lattes. In a demitasse cup, the barista swivels steamed milk into espresso. The result is a two gulp smooth mix of frothy milk and espresso. Delicious!

Cappuccino

Cappuccino can come dry or wet. Wet caps are more like lattes with half milk and half foam. Dry Cappuccino are all foam and espresso at the bottom. One fun idea is having the espresso poured over the foam in an “upside down dry Cappuccino.”

If you want to drink San Francisco coffee and talk web technologies or Planet’s social professional recognition app Recognize in one of SF’s great cafes, shoot me an email at alex@planet.io.

Increase website speed by lazy loading images

Website Speed
Increase your website’s speed by lazy loading background images. Only load images above the fold, and let the rest lazy load.

The problem: Too many images and website is designed responsively

By only loading the top images of your website, you can increase your website’s speed. This is especially true when you have a long page of graphics.

Most image lazy load solutions only work for <img> tags. But what if you want to lazy load images in a responsive designed website? In responsive design we use multiple images for the same graphic. We do this because different graphics are loaded for different screen widths, hence the responsive component.

The solution: Load background images when the user scrolls

Load below-the-fold images when the user scrolls to increase website speed optimization.

Lazy load background images by simply adding a CSS Class to the body tag after the user starts to scroll. That’s it! Now your site is optimized for speed by only loading the images the user sees on load.

Responsive lazy load library

I wrote a simple JavaScript library to handle this. It is called Zoink and you can find it on our github page.

The reason why this is so important is because normal websites load all the images on the site. Absolutely no reason to load images that aren’t seen by the user. I recommend showing the first two main images on your site, and load the rest of your CSS with Zoink.

Case study: Recognize

On Recognize’s homepage, we use a lot of large images. On page load on a desktop browser Recognize loads 400k of images. Most of the bulk is due to the first two images we load.

But when the user scrolls the page we load the reset of the images. A total of 858k of images are loaded. We are saving the user from waiting for all those images to load when they may not ever scroll to them.

Lazy loading background images improves performance on mobile, tablet, and desktop. Stop loading images your users may not ever see.

How to load JavaScript

When learning something new we sometimes don’t know where to start. For JavaScript, what is the step before hello world? How do load JavaScript in the first place?

How to load JavaScript with the <script> tag

<script type="text/javascript" src="path/to/AwesomeJavaScript.js"></script>

Break loading JavasScript down:

<script> is the tag for loading scripts. You can load different types of scripts.

Because of different types of scripts, in HTML4 and earlier it is required to specify the type. In the case of JavaScript it is “text/javascript”.

But as of HTML5 the type attribute is not required and can be omitted.

The src attribute specifies the file. The path can be relative or absolute.

Relative paths are file paths from the point of view of the file loading it. If the HTML file is in /files/ and the JavaScript is at the root /, then the src would be src=”../file.js” for relative.

The absolute path, using the previous example, would be src=”/file.js”.

How to load a JavaScript file dynamically in JavaScript

// Create the script element
var script = document.createElement("script");
// Add type attribute
script.setAttribute("type", "text/javascript");
// Add the file path to the source attribute
script.setAttribute("src", "/path/to/awesomeJavaScript.js");

// Now it is time to load the file and at this point you'll see the file loaded in your network tab in the web development toolbar
document.body.appendChild(script);

How to SEO

This article shows seven ways to increase your website’s search engine optimization. Consider it a short how to SEO. Contact me at alex@planet.io if you want a closer look into your SEO.

1. Have a blog

Having a blog is currently one of the best ways to improve SEO.

Use Google Keyword Tool to check if a blog title has an ROI. For instance, the keyword “How to SEO” has 9,140,000 monthly searches and has medium competition. Not a bad topic to discuss in Planet’s blog.

Google Keyword Tool

Write a number of blog posts in one day, and schedule them out over a period of a few weeks. Google loves new content.

Content Creation is all the rage in SEO these days. Take a look at this infographic:

Content Creation Infographic

2. Share

Share as much as you can is the general rule. Google loves cross links, and sharing is a great way to get your blog posts out. Whenever you write a blog article, share it on LinkedIn, Google Plus, Facebook, and Twitter. Don’t stop there, share your blog articles on the niche sites as well. For Planet, we need to post to Reddit and Hacker News to increase our traffic, because those websites are focused on technology.

3. Choosing Keywords: Google Keyword Tool

When people search for a phrase, techie people call that a “keyword search.” You want to target specific keywords by mentioning them on your website. The Google Keyword Tool is gold when choosing your keywords. Use numbers from Google Trends and Google Keyword Tool to back up your keyword ideas. Then make sure you reuse the same keywords through out the site from the title to the paragraphs.

4. Add Microdata to your HTML

The new hotness on the HTML5 ticket is Microdata. These HTML5 attributes tell Google the type of content a website is serving. Now search engines have an intelligent view into your content. For example, with metadata you can specify the content is for movie tickets, book review, a related link, or if it is the footer or header of the site. Now search engines can show rich snippets of data in search results, such as movie times or a book review pulled from your site. Stay tuned as this feature proliferates in web development. Read more about it here: Increasing traffic with Microdata. To see all the categories of metadata, visit Schema.org.

5. Waiting game

The newer your website the worse your SEO. Google is concerned with spam that are fly-by-night websites. Even though the URL of your website plays a big part of SEO, it won’t help if the site is brand new. Google treasures websites that have been around a while.

It is crucial to start a blog for your business as soon as possible. Even if you haven’t started building your business, just owning the URL and writing regular blog content will get your SEO going even before your business does.

6. Install Search Engine Optimization plugins for WordPress

Get the WordPress SEO by Yoast plugin for your WordPress blog. With this tool you can set your metadata, analyze the posts, add social, and more.
WordPress SEO by Yoast plugin

7. Learn your <meta> tags

Search Engine Optimization at its very basic is knowing what a meta tag is. In the <head> tag of your HTML document, there are a number of tags you need to fill out for each page. They describe the target keywords and the description of your website that is displayed in search results. Here’s a quick overview of the ones related to SEO from Moz.

How to make a new homepage

Recognize homepage

Recognize gets a new homepage

Planet’s primary product outside of agency work is a social professional reputation platform called Recognize. We started working on this project in July of 2012 and launched to the public in February 2013.

Funny to think that Recognize’s first homepage was designed before the app existed. Martin Karasek did a great job designing our initial homepage. It focused on the sign up form and to visually represent the badges. Ten months later, it was time for a redesign.

In this post, I will try to provide advice as to how to launch a successful homepage redesign.

Start from scratch

We are often attached to our current design or our current code base. Designers will use current designs as base rates for future design. Programmers will comment out code to be used later. Detach from your old work and free your homepage to new possibilities. Delete commented out code and use your company’s current and future business strategy as your design base.

For Recognize, we now have a full product and marketing vernacular. Our old homepage didn’t dive deep enough into our product. It didn’t explain our business as a fully functional employee recognition platform. Here’s a screenshot of our old homepage.

Old homepage

When I started the new homepage, I literally deleted everything in our homepage CSS file and deleted all the HTML in the homepage partial. With a clean plate I was able to think clearly and produce something completely new.

Right at the top show a product

Let the world know your company is actively producing something of value. It can be anything you produce, such as a product, community, or service. For instance, if your company produces shoes, you can display a sponsored marathon at the top of the homepage. Showcasing a product or byproduct at the top allows the user to immediately connect your company with a tangible object.

People more likely to scroll than click

It isn’t easy convincing people to use your website. That’s why it is important to show the gist of your business above the fold, or generally the top 600px of the homepage. For content beyond the first 600px, don’t make users click to find it. Make your homepage long enough to explain everything important. Flickr’s homepage redesign is a good example of a nice scrolling experience.

Screen Shot 2013-06-10 at 1.01.51 PM

A scrolling homepages tell a story

Write a story in a half dozen sentences, and use each sentence as a section on your homepage. Think of your homepage as an extension of your elevator pitch. For instance, “We build websites for socially responsible companies. We work with brands like Patagonia and Whole Foods. We are community-driven, recently we hosted a hackathon focused on environmentalism. Let us help your business translate its social responsibility into web experiences.” Each one of those sentences can be a complete section on your homepage. Use a graphic or a photograph to visually explain your point. You’ll find users will get a better understanding of your business.

Appeal to logic and to emotion

In your graphics and your copywriting, think of two groups of people: logical people and emotional people. Emotion-driven people are compelled by abstract marketing copywriting and strong imagery. Apple’s slogin “Think Different” is a great example of emotion-driven marketing speak. Whereas listing product specifications is more attractive to logic-driven people. You’ll hit a homerun if you can appeal to both.

For Recognize’s new homepage, the headlines are emotion-driven, such as “Track success” or “Motivate the workplace.” Then, we provide details for our product, such as “Edit and delete recognitions.” The facts help back up the headlines, and that ties your messaging together.

Learn more about different types of people according to Myers Briggs at Wikipedia – http://en.wikipedia.org/wiki/Myers-Briggs_Type_Indicator.

Show photographs of people

Pictures of real people can double homepage conversion. Learn more about that here. If you have customers who use your product, ask them permission to show their profile.

Recognize homepage showing people

It is 2013: think responsive layouts

If your homepage doesn’t respond to different screen widths and device sizes, then your homepage is outdated. Make sure your designer and developer build different versions of the homepage to display well on mobile, tablet, laptop, and large desktops.

  1. Check your analytics and determine the most used screen resolutions by your users.
  2. Make designs that work well with your most used resolutions.
  3. Use a responsive layout framework, such as Boostrap to easily manage mobile and tablet screen resolutions.
  4. Ensure you aren’t loading large images on mobile and tablet. Use the correct image sizes for your user’s screen dimensions.

Watch analytics

Watch your analytics, and see if you can increase your homepage conversion with a fresh new homepage. It is a fun game when your conversion rate goes up.

Web design tips for developers

A repost from Recognize’s blog

Think of this article as a general guideline for designing any website. I’ve learned these lessons through photography, working in the Enlightenment Linux window manager many years ago, and developing for a design agency. I apply these rules while designing and building Recognize. Being able to do both has saved our team a lot of time and money. Learn to design along side your web development skills, and your value greatly increases.

Enlightenment window manager on Linux

Enlightenment window manager on Linux

Follow nature

If you have to follow one rule, this is it. Farther in this article I will go through more specific examples of nature, such as the grid, 1.6 golden ratio, and following your senses. In the meantime, try to think more theoretical. Think about Apple, and look at their web design and applications. The reflections, subtle patterns, and momentum scrolling are all patterns taken from nature. Observe how light and objects behave, then mimic that in your design.

iphone-gesture-300x288

Take advantage of the senses

Users will appreciate sensory experiences in your application. Tactile, visual, and auditory are all ways to stimulate your users.

Button example for visual and tactile experience

For instance, a button should suppress, or light up, when pressed. Next time you get in a car, press a few buttons. Try to mimic those behaviors in your application, and you’ll create a more realistic user experience.

Find ways to use vibrations to simulate tactile response

Android innovates with vibration responses. Most people say that their Android’s vibration response gives them a sense of context when a keyboard button is pressed on the screen. Android’s vibration is to iPhone’s momentum natural scrolling- they are both game changing user experiences. See how you can innovate with vibrations.

Are sounds possible for your application?

Auditory experiences are generally faux pas in desktop applications. Most apps steer clear and tend to indicate events through visual indicators, like updating the title tag. Still, audio if done right can add value to your app.

But mobile is a different ballgame. When a push notification triggers a background service, play a sound to indicate a message or event. Give yourself a voice, and allow the user to know when an event occurs with a unique one of a kind sound. Remember ICQ and their weird ho-hoo jingle.

Whitespace is your best friend

Some try to fill empty screen real estate with pictures and useless text. Don’t fall for this fallacy. Apple is again another great example, they place the product in the middle of the screen and leave empty space around it. You’ll find people will be at ease with your design.

Whitespace helped Google beat Yahoo. Google put the primary action front and center with nothing around it to distract the user. Embrace whitespace and start allowing your users to focus.

Screen Shot 2013-04-26 at 2.01.52 PM

Focus focus focus

One of my most famous photographs

Websites and apps need to consider a few things when trying to maintain focus. Here are a few steps to help guide a focused design lifecycle:

  1. What is the primary goal of your application? Keep that in mind as you make design decisions.
  2. Create a styleguide, a one page document with all the colors and styles. Create it in HTML and CSS. To make a styleguide, search and extract patterns from the designs. Things like paragraphs, headers, horizontal rules, and forms all can be included.
  3. Only allow two fonts. I tend to choose one embedded font used for headers and buttons. The other font is a standard typeface, such as Helvetica and Arial, for paragraphs and links.
  4. Keep your colors to a minimum. Create a colors.sass file to save the colors as variables. Choosing colors on future designs will be as easy as scrolling a short list of existing colors.

Follow those four rules, your design will be consistent and well-maintained.

Tell a story

Research shows if you tell a chronological story to a jury, they are more likely to believe your case. This heuristic is innate in humans and extends to all parts of life. Humans are storytellers and if you tell a good story, people will believe in your product. Storytelling is why vertical parallax sites are so popular. They create evocative storytelling. What’s your story, and how will it play out on your homepage?

Nike's famous vertical parallax

Bigger is Better

A/B tests indicate that the bigger the action button the better in homepage sign up conversions. If you beef up your headers and buttons, users will unconsciously associate your site with being larger than life.

This is true for images as well, A/B tests have shown that fullscreen images, when used appropriately, can increase your conversion.

treehouse

Whenever possible, use the golden ratio: 1.6

The golden ratio is found throughout nature. Trees, shells, and the Fibonacci Sequence all follow 1.6. You can use this simple ratio to your advantage when choosing header styles or how you layout your website’s columns. If your first header (h1) font size is 40px, try 40 / 1.6 = 25px for your header 2 (h2).

shell

Use a grid

Grids are commonplace with the advent of responsive web design. Grids allow you to lay out a site using the golden ratio. It helps to set up your layouts following a grid in your styleguide.

nytimes-grid

Grids, golden ratio, and storytelling are all part of our natural environment. Stay in tune with nature and your designs will be focused and simple.

Write clear messaging, and drop the evocative hype

Fancy headlines and witty copywriting may be interesting, but if the user doesn’t know what your product does, they won’t want to use it.

  1. Come up with a few clear headlines.
  2. Test them out in person and using Google Adwords.
  3. Go with the slogan that most people understand and also gets the best Click Through Rate (CTR) on Google Adwords.

When in doubt, follow the leaders

If you aren’t sure how to proceed with a design, then shamelessly browse around on all the top sites. See what is happening on Behance, Bootstrap, Apple, or 37Signals. See how they solve an autocomplete list, an image carousel, or an user profile. Adapt your styleguide with their suggestions. After a night’s sleep revisit what you came up with, and create a better version. Innovation comes from copying. Copy away!

Think about the “F”

Users read websites in the shape of an “F”. They browse down and run right to scan over content. I should note that sometimes people read in “E” shape, as shown in the image below. Here’s an article on that.

useit.com

Draw on paper, then in CSS

If you are a web developer, you probably can skip the Photoshop step.

  1. Get out a big piece of blank paper and a pen.
  2. List out all the features you need to design.
  3. Rate the features in importance.
  4. Fit the features in order of importance in a grid or an existing layout.
  5. When the design feels good enough, jump into CSS and build a prototype.

If Photoshop is needed, I take a screenshot of the website I’ve already built and paste it into Photoshop. It allows the designs to come out more realistic and I am able to Photoshop it faster.

When really in doubt, hire a contract designer

For Recognize, we hired a couple of fantastic designers to design our marketing site based off of our business requirements. Once the marketing designs were done, I used those styles in the rest of our site. A couple mockups acted as the design foundation for Recognize.

Do the same for your business. If your design isn’t at the level of your business requirements, use Dribbble or Behance to find a designer that meets your style needs, and hire them. When you email them, ask if they know anyone else in case they are too busy for new work. Chances are they have a friend that is just as good.

Have fun and keep trying

That’s the most important, if you are having fun you will want to keep trying and if you keep trying you will get better. Simple as that. Expand your mind by learning to design your own sites.