Max Kiesler – Designer

Do you want your website to be beautiful, SEO friendly and fast loading? Try a true minimalist approach. Total, complete and utter minimalism is a high mark to meet in any medium. Wikipedia describes minimalism as, “movements in various forms of art and design, especially visual art and music, where the work is stripped down to its most fundamental features.” In web design minimalism translates into style, structure, and download time. Many websites that look minimal are actually mired in obtrusive or invalid code and slow download times. I believe true minimalism in web design should consider the design, code and efficiency of each page. In this article I’ll discuss a basic standard for minimalist web design, show examples of how a few current sites measure up to these standards, and finally show you a road map to your own web design minimalism.

Minimalist design patterns are not new to the web, in fact, It’s how website design began. This was the first page that Tim Berners Lee ever made back at CERN. Currently archived by on his site, it is the essence of minimal design.

This is as minimal as it gets on the web even today. Default text, no columns, or images. If you take a layout like this and add a minimal of CSS you may have a well designed and minimalist website. We’ll call this website the internal elegance of web design. This is term I’m borrowing from mathematics where it is used to describe the beauty and efficiently of a formula, or in this case web design.

The Test

In order to dig a little deeper into whether a website is minimal, let’s first set up a methodology for reviewing a few sites. We’ll break this up into three sections, overall interface design, page code and efficiently of load time.

Interface Design
Of the three criteria listed above interface design is the most subjective, however, we will look at several objective factors so this is not just my opinion of minimalism. We will look at the use of white space, graphics, color and fonts. This is classically the area that most people think of when they think of minimal interface design. If the page looks minimal it must be minimal. That’s where the next two area of inquiry come into play.

Page Code
We will look under the hood of every page to determine how the page is marked up. A higher score will be given to pages who use CSS or cascading style sheets for style and structural declarations. XHTML/HTML and CSS will also be tested to ensure that all of the code being used is valid and error free. This will be done at the W3C Markup and CSS validators. You may be asking, “what does valid CSS and XHTML have to do with minimalism”? Well the answer is really quite simple. If you are using invalid code you are wasting download time with code that does not work in every web browser. True minimalist web design takes everything into consideration.

Overall Efficiently

Slow response times are one of the chief complaints of most internet users. Attention threshold is a term which describes how long a user will wait for a page to load before moving on to the next website. In general this is thought to be around eight seconds. With the advent of an 80% broadband penetration in the U.S. I would argue this may be as little as five seconds now.

In this section we will look in-depth at page and download efficiency. The methodology was to use WebSiteOptimization.com’s Web Page Analyzer and test each site to determine the pages overall efficiently. The script incorporates best practices from HCI research and web site optimization techniques. We will look at number of HTML files, HTML size, number of images including CSS background images, number of scripts, number of CSS imports, CSS size and multimedia size.

Now that we have some parameters let’s look at a few websites and see how they measure up.

Apple

While doing research for this article I reviewed several articles on web design minimalism. Many of these posts referred to the Apple website as a good example of minimalism so that will be the first site we look at.

Apple has a well honed sense of design and style as demonstrated by their home page. However, if you click into the website you quickly find yourself in another world where you are assaulted by a barrage visual clutter. Let’s look at the Mac page.

Interface Design
While the front page of the Apple site has a good use of white space, graphics, color and fonts the interior pages do not score quite as high as they become much more cluttered and a bit confusing. While this is a product site and the use of images is necessary Apple goes a bit far by adding a graphical menu, a javascript gallery box with images of all of their mac products, graphical buttons and page headings. Throw in a few advertisements and the page looses the minimalist effect. Associations and proximity of content is also a bit weak which adds the feeling of clutter and confusion.

Page Code
For this test we looked at the Mac page. The page uses XHTML and CSS for structure and style. Unfortunately, the page fails markup validation and has 17 errors in it’s XHTML. The page uses four CSS files which also failed validation with 88 errors and 30 warnings.

Overall Efficiency
The page received passing scores for total HTML, HTML size and multimedia size. The total CSS received a warning since it had 4 individual CSS files attached to it. It received a failing grade for total objects downloaded with 36 individual requests. It also failed total images, total size, total scripts, image size, script size and css size. In total they received 3 passing grades, 1 warning and 7 failures. To their credit Apple does use HTTP compression to encode its content which delivers the content to your browser in a compress form.

Analysis and Recommendations
I’ve owned Apple computers since 1982 and their product design has always been on the cutting edge, however, their website has always suffered in terms of design and functionally. The current re-design is no exception. With the exception of the the home page and a few product pages the site is a bit too cluttered and image heavy to be a true minimalist design. This could be improved with less images being used for navigational elements, page headings and the number of product images. The page code needs to be checked for errors and the XHTML and CSS need to be re-vamped. Overall efficiency can be vastly improved by using one CSS style sheet, far fewer script requests, and fewer images. Considering all of the above I would not call the Apple site internal elegant and a minimalist design.

Pentagram

Pentagram is one of the premier design firms in the world. They create print and interactive design, products, environments and buildings. The partners that own this company are some of the best designers in the world including greats such as Michael Beirut.

Interface Design
The interface design is very clean and only the information and navigation you need is presented per page. The navigation is clear and easy to use. Whitespace is used in a very dramatic way. Images are only used when necessary, and the typography is readable and clean. The colors used are classic black, grey and red and are used effectively to differentiate content, headings and navigation.

Page Code
The site uses XHTML, CSS and javascript to create its layouts. The XHTML is valid, however, the CSS has 8 errors and 8 warnings and fails validation.

Overall Efficiency
The page received passing scores for total HTML, total CSS, HTML size, image size, and multimedia size. They receive cautions for total size, and total scripts (6). The page received warnings for total objects (24), total images, (15), script size, and CSS size. They are also not using HTTP compression.

Analysis and Recommendations
The site design is using all of the constructs of a true minimalist design, however the page code has 16 possible errors and the overall efficiency of the site suffers from too many scripts and images. My recommendations would be to reduce the use of external javascript files or use the packed or compressed versions of their current jquery files. Reducing image load on every page by removing all of the image calls from the CSS file and putting them on the page would reduce download time. Also combining CSS file into one import would help. By doing all of the the overall page load would decrease significantly.

Mark Boulton Design

Mark is a well known interface designer who along with Khoi Vinh brought back the grid system to the web with their articles, Mark Boulton’s grid system and Khoi Vinh’s Subtraction 7.0. As stated in the article, New Minimalism in Web Interface Design, “Creating elaborate and beatiful designs with complex grid systems and layers of text was timeless style of Paul Rand. Originaly emanated from Swiss graphic design school, books about grids and typography became essential food for inspiration-hungry interface thinkers and problem solvers. New web minimalism is reborn!” I couldn’t agree more.

Interface Design

Marks use of white space, graphics, color and fonts are impeccable. His interface design is minimal, easy to read and understand. The sites navigation is clear, non-graphical and accessible. Heading tags are properly used and images are only used when necessary.

Page Code
His XHTML code is valid and strict which is the highest level you can attain in this test. The CSS only has 1 error and 6 warnings. These errors are very minor and will not do anything to spoil the page view.

Overall Efficiency
The page received passing scores for total HTML, total scripts, HTML size, script size and multimedia size. It received 2 warnings for total images (10) and total size. There were only 4 failures for total objects (20), total CSS files (8), image size and css size. He is not using HTTP compression.

Analysis and Recommendations
Overall Marks site exhibits the constructs of an internally elegant website with minimalist design. I assume the reason he has so many CSS files is so he can sniff for your browser type and deliver a CSS file the looks perfectly in every browser. My only recommendation would be to look at the necessity of this a little closer. All in all a very minimal website. Cheers.

37signals

A bastion of web design minimalism, 37 signals is well known for their 1999 article, “The 37signals manifesto” and later their focus on web based applications such as Basecamp. Renowned for their UI minimalism and easy to use applications 37signals is a true believer in the minimalist paradigm.

Interface Design
Excellent use of white space, graphics, color and fonts. What they do is clear and their web applications are front and center. All minimalist web constructs are used well. The UI is simple and easy to understand.

Page Code
Their XHTML is not valid and contains 20 errors, however, the pages CSS file is perfect and error free. Most of the XHTML errors seem to be associated with missing HTML entities which is probably the fault of their CMS. There are a few other errors associated with improperly formated br tags.

Overall Efficiency
This is where their design really shines. The page received passing scores for total HTML, total CSS, total scripts, HTML size, and multimedia size. They received warnings for total images, total size, image size, and css size. The only failures were total objects (11) and script size.

Analysis and Recommendations
I have very few recommendations for this site. They only things I might suggest is to fix all of the XHTML errors take a look at the total page objects. I would give this site the mark of internal elegance for minimal design.

Conclusions

As we have learned in this article many websites on the internet exhibit the look and feel of a minimal site, however, a true minimalist design pattern needs to consider page code and efficiency as well as interface design. Page code includes the use of XHTML and CSS and the mark-up must be valid code. This is necessary so you are not delivery code that does not work in every browser. Overall page efficiency is important so the user does not have to wait too long for your page to load in their browser. If, however, you combine all of these parameters you can find yourself on the road to true minimalism in website design.

Your Road Map to Minimalism

So now you’re saying to yourself, “you’ve convinced me Max how do I make a true minimalist website”? Let’s once again break it down into the three necessary steps to accomplish this.

Interface design
Pay careful attention to the use of white space, graphics, color and fonts. If your someone who always starts off in Photoshop or Illustrator to create a web page design consider adding the wireframing process. Wireframing is basically starting off with the entire contents of the web page in greyscale. Navigation, content and any other elements needed to convey the point of your page. Once you have all of these elements in a document you can start to look at the use and necessity of every item. Remember minimalism is the process of stripping down and interface to its most fundamental features. Once this is accomplished you can move on to the use of white space, graphics, color and fonts. Again, keep it simple and keep it clean.

Page Code
As discussed in this article page code should be as minimal as possible. The best way to accomplish this is to use valid XHTML and CSS with a minimal of scripts, images and other external files. If columns are used make sure you are using the lest possible code to accomplish grid. All code should be check for validity using the W3C Markup and CSS validators. Additionally, always check your code on all possible browsers. If you don’t own hardware to check this you can use a service like browsercam.com to see how your page renders in all platforms and browsers.

Overall Efficiency
In short make sure your page is calling no more external files than necessary. This includes HTML files, iframes, images, CSS files, and Multimedia files. You can check your site at a number of free website optimization services such as the Web Page Analyzer. These kinds of sites are not the bottom line, however, they will give you insight into where and how you can improve your overall page efficiency.

Special Note
At the time of this post my site also does not adhere to the standards of minimalism I outlined above. I’ve decided instead of waiting to do a complete re-design to start changing my pages over one-by-one. So far I have the home and permalink page cut over to the new layout. Other pages will come in the next few weeks. I still have some issues with my 700 plus posts and will be working on them in the coming weeks also. Cheers…