Do's and Don'ts of modern web

We have a lot of things to account for when developing a website these days. They need to meet the clients initial objectives, but they also need to look great, be cutting edge, respond to the users device, and still be managed in a CMS. Some of these things can clash for sure. Here are a few things we have learned along the way.

Do always use a grid

Grids help to establish consistency and rhythm in your design. Embrace it without overly relying on it. Our sites use a 12 column grid percentage system.

Do plan for breakpoints

Responsive design means having break points. For all factor1 developed sites, we use foundation. Which has a small (mobile +) medium (tablet +) and large (larger than 1200px) break point stack. Learn more about this.

Don’t design a site for full screen

You may have a large screen, your client’s visitors are most likely on a 1300px x 800px screen (75% of all internet traffic is on that size or less).

Do create a styleguide

Style guides are essential to establishing and maintaining consistency within a design system. Particularly useful for teams.

Do think in terms of a system

By designing a system rather than individual pages you are able to think how something works in relation to the whole site. The site we build is in a system, and managed by the client as a system.

Do pay attention to patterns

Using familiar common ui patterns will keep the user comfortable using your interface. These content patterns also layout in the cms.

Do proof the site in the browser

Export your jpgs and open in the browser or on an ipad. See what it looks like on the screen, and scroll. Is it legible? Do buttons stand out enough?

Don’t make users think

Your job as a designer is to eliminate ambiguity: your designs should be obvious and self-explanatory. Know the demographics at hand and assume they are less tech savvy than you. This is a your mama scenario. Can your mama figure it out?

Do make form input type 16px

Small text on a form is hard on the user. Also apple ios requires 16px, or else it will zoom to the point of being 16px.

Don't make touch targets too small

Ensure that touch targets are easy to select — 44x44px area is recommended. Apple and android require this in their app approval process. You should too.

Don't make text too small

Text on the web should be generally larger to ensure optimal legibility.

Do use web fonts

Web fonts have been designed and hinted specifically for maximum legibilty on screens. Take advantage of them. Typekit, google fonts, and font squirrel are your friend here.

Don’t over-extend the use of headings

Headings in site layout represent visual and seo hierarchy, very much inline with how a newspaper or magazine would work. There should not be 3 flavors of a heading 1.

Do think about content expansion or reduction

Any time we have a CMS, the end client will add too much, or not enough content. Will your design work with that headline wrapping to 3 lines? What about when there is not a photo for that blog post?

Do avoid abrupt changes

Objects should be accelerated swiftly and decelerated slowly to avoid abrupt changes in velocity.

Do consider the weight of animations and scripts

Keep in mind that the mass of an object will determine how fast or slow it will accelerate and decelerate. This mass also effects the page load time

Do consider purpose

Use motion to guide the user’s attention and focus through an experience and not simply as an embellishment.

Preflight check list

Here are just a few critical elements to plan for both in design and development hand off.

Design Planning

Hand off to Development