The Basics of Responsive Design

Responsive design is a major buzz-word, everyone wants it and rightfully so with the huge shift towards mobile. But what exactly makes a site responsive? It essentially takes three things:

1. Flexible grid-based layout based on percentages

2. Flexible images and media

3. Media queries

 

Flexible grid-based layout

A flexible percentage-based grid is the backbone of responsive design. It’s based on the formula:

target pixel size (in design) / context of available size = result

If the width of the browser is 1024px, then 100% width will be 1024px, 90% will be 922px, 50% will be 512px, etc. If the width of the primary container is 90%, the new context for the elements that it contains becomes 922px.  (see illustration)

Let’s say that the primary container on a PSD design is 936px, and it contains a column that is 608px, 608 (target) / 936 (context) = 65% of the total. When the width of the container is 922px, as it is in the example, 65% of a 922px context  is  599px (922 * 0.65 = 599) .

Font size is calculated in the same way, most desktop browsers begin with a default context of 16px, if you would like to change the font size to 22px, 22px becomes the target size, 16px is the context, which become 22 / 16 = 1.375, or 1.375em. (see h1 above)

 

Flexible Images and Media

An image or video becomes flexible by using a large image with a container that is flexible. The image has a max-width set to 100%, and the height will automatically adjust proportionately (as long as a specific height has not been set, and if so, that height will need to be removed with JavaScript).

If an image was in the left column above, it’s container would be set to 65%, in this case that would be 599px. As long as the image is larger than 599px, it will be scaled down to a 599px width. This means very large images are often needed to work for large screens, particularly if full-width images are needed.

 

Media Queries

Media queries are used in both responsive and adaptive design (mobile design that does not use a percentage-based grid). Media queries are CSS calls that check for browser width or height, and serve CSS to browsers only with specific minimum or maximum heights and widths.

For example, if a site is built with the maximum size in mind, then a media query is added at the width where the top navigation breaks to a second line. Let’s say the top nav breaks at 740px width, a new set of styles is used to display the top navigation in a different way below that width, like stacked below the logo instead of to the right.

There are a number of common responsive breakpoints based off of current devises that can be a good basis for media queries as well:

Mobile portrait (320×480)
Mobile landscape (480×320)
Small tablet portrait (600×800)
Small tablet landscape (800×600)
Tablet portrait (768×1024)
Tablet landscape (1024×768)

 
I hope this helps simplify what responsive design is and if it’s something that’s needed for your next project. Responsive design is great for a lot of projects and a positive move towards the mobile web shift, although it’s not always quite right for everything depending on image availability, budget, audience, or purpose.

WordPress as a CMS

WordPress is typically thought of as a blogging platform, and traditionally, it is. Although with the use of plugins and custom theme development, WordPress can also be a very effective content management system (CMS) for almost any site, large or small.

A CMS is used to write, edit, and manage your website content, which is a lot more convenient for website owners than needing the HTML edited directly every time updates are made.

A common misconception with WordPress and what it’s able to do, stems from the difference between WordPress.com and WordPress.org sites. WordPress.com is an all inclusive hosted solution, and while suitable and incredibly easy to get going for a blogger or hobbyist, is very limiting in it’s function. It has a limited number of themes to choose from that can’t be edited, you don’t have the ability to install custom plugins, and usually “wordpress.com” is included in your URL address (not very professional for businesses).

On the other hand, WordPress.org site files are downloaded onto your own server where your domain is hosted, the theme template files can be edited or a theme can be coded from scratch to fit your design needs, and thousands of plugins are available and can be installed for extended features. A few useful plugins for using WordPress as a CMS are custom post types (creates additional groups of items other than “post” or “page”, the blog-centric defaults), custom taxonomies (used for sorting, similar to categories or tags), and custom fields (adds additional text and image upload areas). You can also create custom templates for different types of pages that site administrators can choose from, as well as create navigation menus that can be managed by the admin.

Custom, custom, custom…there seems to be a trend here. The idea is that almost any site design can be taken from concept and design, and translated directly into a custom WP site. It’s well suited for small to medium sized ecommerce sites, newspaper or magazine-like sites, forums or job boards, photo gallery-like sites, event sites, and of course, static content sites.

The admin area (pictured below) has a simple interface and is much more user friendly than most CMSs. The admin interface can also be further adjusted by adding elements to fit your brand, limiting the functions and what is seen to only what you need as an editor, adding additional instructions for editing, and creating various user roles with different site privileges. A WP site is very flexible for future expansion, is optimized for SEO out of the box, and is very time efficient, and thus, cost efficient.

There are certainly a lot of very good CMS options out there, and the decision on which one is best for your project isn’t always an easy one. Although, WordPress is a very promising choice for many sites.

Why Wireframe

The first step in my web design process starts with wireframing, creating very basic sketches that give a sense of the overall structure and flow of a website. A wireframe shows how a user will interact with a site before getting into the design details (colors, typography, images, etc). At this stage, things are much easier to modify than a design comp, so it’s a good time to explore ideas until the site flow is solid and addresses the client’s needs, without worrying about wasting anyone’s time.

If you start with the design process, it’s easy to focus on the details like what photo is being used or the right shade of green, and it’s easy to overlook the most important aspects, like does the site function as a whole. Another benefit to properly thinking through a wireframe is that the design comp process that follows seems to fall into place much more naturally.

The wireframe process and what is involved varies by designer and personal preference, but I always start with sketches. These are usually pretty rough, and include the details needed to translate the idea into a visual in the most efficient way. They include all pages that are significant to the flow and function of a site or app and there are generally notes and comments to the side with more direction about options, movement, etc. Here are a couple of sketches from a recent project to give you an idea:

The next step is to create a digital version that is more neat and clean, and I think a bit easier for clients to visualize. But of course, using the same idea of basic structure and flow with generic fonts and grey scale or stroke boxes. There are many wireframing tools out there, my personal preference is Adobe Fireworks or Illustrator, which are both very efficient programs for creating vector based boxes and shapes that are easily moved around, and both also transition smoothly to comps once in the design stage. Additionally, Fireworks has many of the same features as Photoshop but with added vector capabilities, as well as multiple pages within the document (which can share templates for headers and footers for site-wide changes). Illustrator has it’s advantages as well, primarily with the ability to view multiple artboards at once, which can be useful in gaining instant insight into how a site is coming along as a whole. Here’s an example of the above sketch as a digital wireframe:

If a site is well-planned, good design can only improve it. Although nothing can fix a site that doesn’t function properly.

What’s New in CSS3

Many new features in CSS3 appeared to be done in CSS2, although it’s now much simpler to achieve with code what was once done with images, or series of images, used to simulate the effects. Here is a brief overview of some of these new visual effects:

Rounded Corners

The border-radius property rounds the corners of an object by defining a specific radius value. You can specify a different radius for each corner if you like, rounding some corners and not others. Or a circle can be created if the radius is half of the total width of the object, for example a 20px by 20px div, with a 10px radius will create a circle.

Colors

Color can now be defined using the RGBA property, rather than the traditional hexadecimal value (#FFFFFF for white). With RGBA, you select the RGB value (integers from 0-255 or percentages), plus a transparency value (from 0-1.0). White would be rgba(255, 255, 255, 1.0) or at 50% transparency white would be rgba(255, 255, 255, 0.5). Additionally, a transparency value can be defined for an element separately from the color using the opacity property, which also uses decimal values between 0-1.

Drop Shadows

Drop shadows can be applied to objects using the box-shadow property, or to text using the text-shadow property. There are options for the direction of the shadow, amount of blur, amount of spread, and color. An added benefit of generating a drop shadow with code, is that the space the shadow uses is outside of the flow of the rest of the layout, which makes things much simpler to align with the grid than using an image with a shadow.

Gradients

Linear and radial gradients can also now be created dynamically. A linear gradient, where colors transition over a straight line from top to bottom or left to right, can be created using the linear-gradient property. And a radial gradient, which is circular or elliptical and colors blend out from a starting point, can be created using radial-gradient. With both options, you can have multiple color stops between the first and last color, defined by percentages to indicate the distance to the next color (creates the same result as gradients in Photoshop or Illustrator).

Multiple Backgrounds

With CSS3, you now have the option to apply multiple backgrounds to one object. This is done by simply adding a coma between different images, colors, or gradients. In prior versions, you would have needed multiple div elements inside of div elements to get the same effect.

Selectors

One of the most crucial behind the scenes improvements for CSS3 is a wider range of available selectors. CSS is based entirely on the ability to select different elements and apply styles to that element or group of elements with the same HTML, class, and id tags. There are now relational selectors, including direct children within an element and siblings that are on a parallel level to the element. And there are many variations within those, such as the first-child of the element, last-child, nth-child, only-child, as well as first-of-type for a specific type of element within a parent, last-of-type, nth-of-type, only-type etc. There are also new selectors based on attribute values, and new pseudo-classes. A handful of pseudo-classes have been available for some time like :link, :visited, :active, and :hover, but you now can also use classes like :enabled, :checked, :target, :valid, and :required among others.

Embedded Fonts

Last but certainly not least, is embedding fonts on your website using @font-face. Until recently, the web was limited to a handful of fonts that were already installed on computers like Arial, Times, Georgia, and Verdana. There were many workarounds using images for navigation and headings, but this was very limiting for SEO, because the text wasn’t there for search engines to find, and was also quite time consuming to maintain for larger sites with content that frequently changed. Typography on the web has been drastically opened up with @font-face, which enables you to embed almost any font directly into the CSS.

A very important side note on compatibility. Browsers have been fairly quick to adopt many of the new techniques, and many properties are surprisingly compatible on older browsers as well. A quick way to find out if new features are supported is to reference the Can I Use site, which is an extremely helpful resource for checking the latest browser support for CSS3, as well as HTML5, JavaScript, SVG, and other new capabilities for specific browsers.

Stay tuned for Part 2 which will get into some of the more advanced new CSS3 features that primarily focus on layout and animation.

Site Launch – Postscript

Very excited to launch the Postscript website, a personal project featuring letterpressed art prints in the form of postcards, in other words, mailable art. The first two series are based on the history and meaning behind Denver streets names.

The design of the site reflects the look and feel of the postcards, a bit eccentric and fun, yet simplistic. The hover effect on the cards is my favorite part of the site design, which creates an interesting framing effect.

The site was built on the WordPress platform for CMS and ecommerce integration that is simple to maintain and update. The site uses the WP e-commerce plugin, which has nice shipping rate options, keeps track of stock, creates a sales report, has an efficient checkout process that doesn’t require leaving the site, and most importantly, the template files have fully editable PHP, HTML, and CSS to build a custom design and integrate JavaScript.

Check out more of the process behind creating the postcards on the Postscript blog.

Simplicity in Design – Why Less is More

The natural inclination of most businesses and organizations is that everything they have to offer is a great benefit, and should be featured prominently on the company website and other materials. It may well be the case that they have many truly great benefits and services, although focusing on too many things is often overwhelming for users, and they may not want to bother exploring any further. Equally so, adding visual clutter with background images, patterns, ads, gradients and poor typography can be very distracting and conceal the company’s message and what they are offering.

Ultimately, focus and clarity of message, paired with visuals that enhance the message, rather than detract from it is going to be the most successful at promoting the business.

How can this be accomplished? Less is more. What is the number one thing you want to convey? Number two? Number three? How can these ideas be expressed in the most basic and condensed form? The most difficult and most important part of the design process is often in defining priorities, and breaking the most important ideas down into concise thoughts that people can relate to and peak their interest into more exploration.

The design should fall to the background, almost invisible if you’re not really thinking about it, only making an appearance to reinforce the concept, to separate ideas, and organize the flow of information once a person is engaged.

What it really comes down to is making your content and message the focus of your site and easy to get to, which makes your site a pleasure to use. After all, that’s really why people came to the site in the first place.