11 Case Studies in Single Page Website Designs

Keep It Simple, Stupid.... The right way

A new trend on the web I have noticed increasing in popularity is the single page website design. This is constituted by an all inclusive, all important Home page. The reason to use a single page design is varied, however there is one indisputable result: fewer people can get lost in a website when there is just one page. That said, there is a right way and a wrong way to handle a single page website design. Below I have listed 11 single page website case studies and examined the fundamental details of why they went right or where they went wrong.


  • Gotta Get to FOWA (Future of Web Apps)
    Single Page Website Image - The Webutante Comments: Web 2.0, clean, bright
    What makes it work: Staying Power. This site is looking for sponsors. People who support their aspirations to get to FOWA. People who will join their facebook groups or read their Tweets. Everything is clearly laid out and easily accessible. You don't get lost in the page because of anchored text throughout. It's length is used as a tool.
  • RZMota
    Single Page Website Image - The Webutante Comments: Graphical interface, ease-of use, potent functionality
    What makes it work: Content. RZMota does not sacrifice information or functionality in order to fit everything in one place. Instead, RZMota utilizes a clean structure to entice the viewer to check out the portfolio, learn about the designer and contact the designer. Usability remains in tact and the functionality does not deter the viewer.
  • Sofa
    Single Page Website Image - The Webutante Comments: CSS-driven, pure, simple
    What makes it work: Accessibility. All that is needed is there in an easy format for viewing.
    Faux Pas: No contact method other than a listed email. I let it slide for Sofa because of their powerful design, hence they are on the YES YES list.
    Webutante Fix: Small contact form at the bottom for potential clients.
  • Maurivan Luiz
    Single Page Website Image - The Webutante Comments: Perfect.
    What makes it work: The page is all encompassing. There are multiple methods of contact so the call-to-action is not neglected, numerous portfolio items, and all the information you need about Maurivan - including his sense of humor (which you see with the panic button).
  • Kobe
    Single Page Website Image - The Webutante Comments: All-inclusivity, usability, functionality
    What makes it work: The site maintains its curb appeal and stature while exploring the information about Kobe. The email sign-up is constantly present in addition to a separate contact form, and it's graphical appeal is excellent.
  • MPlusZ
    Single Page Website Image - The Webutante Comments: Clean, CSS-Based, comical
    What makes it work: MPlusZ keeps your interest throughout their single page site through their entertaining design, increased functionality and user prompts. Their work is elegantly featured on a slider, a contact form and contact information is available. Content and graphics are both used effectively without overloading the viewer with either.
  • Vanity Claire
    Single Page Website Image - The Webutante Comments: Hello, beautiful.
    What makes it work: While the design really speaks for itself on this portfolio site, there is also an element of charm in Claire's usability. With lighthearted leads and clean/pure functionality, you really get sold on the website...and Claire. That, my friend, is the point of a portfolio website, which makes this single page site get five stars in my book.


  • Alessandro Cavallo
    Single Page Website Image - The Webutante Comments: Great Design, beautiful work
    Faux Pas: Contact me link is merely an email link! Anyone who uses a webmail system (Yahoo or Gmail for example) will not be able to send Alessandro a message without installing Mac Mail or Outlook. Remember: Single page websites should not be a compromise, but rather a solution. Details should not be sacrificed for lack of room. Every t should be crossed and every i should be dotted.
    Webutante Fix: A contact form in a multi-box to maintain the one page feel but increase functionality
  • Basil Gloo
    Single Page Website Image - The Webutante Comments: Clean, Wow-factor, distinctive
    Faux Pas: The website lacks both information and functionality. There is no contact form, merely an email link instead, there are no explanations or featured works. Sure, we are linked over to Everyone Knows and Webmasters International, Basil's companies, however we know little about Basil or his work by looking at this site.
    Webutante Fix: Add sectionalized features via JavaScript with brief informational resources. Add a Contact form as well as work examples. Link the latest blog post to another section of the page. Familiarize the viewers with Basil and Basil's story. A website is supposed to serve more of a purpose than merely that of a business card. It is a tool.
  • Creative People
    Single Page Website Image - The Webutante Comments: Clean, Graphical, Distinctive
    Faux Pas: It took me a few minutes before I was actually able to find the navigation for this website. It blends in with the background and almost leads you away when all of the sudden you notice it (or you hope to). That's a huge problem considering that without the nav, the site is simply an off-beat image of a dude holding a sign and a squirrel.
    Webutante Fix: Make the navigation using buttons or icons. Use a different color for the buttons other than white or gray so they stick out more. It's called usability - and it is an absolute necessity on any website, much less a single page site.
  • Daniel Stenberg
    Single Page Website Image - The Webutante Comments: usable, functional, clean
    What makes it work: Everything is right there to see. The functionality is blazingly obvious so it can not be mistaken, and as a portfolio it serves it carries out all necessary functions.
    Faux Pas: Anyone who uses a webmail system will not be able to send Alessandro a message without installing Mac Mail or Outlook.
    Webutante Fix: A contact form that follows the 'About Me' section to maintain the sites single page appeal but increase the usefulness.

Labels: , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Cross-Browser Testing Methods

Hassle Free Website Browser Testing

Since the early days of the web when Bill Gates made Internet Explorer the default browser for PC purchasers throwing Netscape for a loop, web developers have had to test their creations on multiple browsers to ensure cross-browser compatibility. Although most developers reserve a sacred spot in their hearts for the Mozilla Firefox browser, a browser sponsored by anon-profit organization that devotes its resources to promoting openness, innovation and opportunity on the Internet, the general public has yet to completely catch on. Therefore we are left with the largely ungratifying and often times tedious task of correcting our website creations in those other browsers... Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 (just forget about 5 and lower- too much hassle for such a small audience), early versions of Mozilla (for the slackers that refuse to update), Opera, Safari, and optionally Google Chrome (...and sometimes others). Whoever actually 'won' the browser wars is debatable. What we can say, however, is that we do know who lost... Web Developers.

The Webutante - Cross Browser Testing Methods - Browser Image

Because of the inconvenience testing a website in all of these browsers can be, I have compiled a couple of methods for cross browser testing that increase developers efficiency and quality when conducting cross-browser tests. Check them out and be sure to Contact me if you have any additions, modifications, or even just commentary.

The Webutante - graphic design and web development resources - browser statistics
  1. Browser Shots offers both a free service and a paid service for testing an awesome selection of browsers on PC's, Mac's, Linux and more. So why pay? Buying Browser Shot's service gives you priority, meaning if you don't pay, you are essentially last in line to be provided with your request. So, needless to say, the main drawback on the free browser shots service is rendering time. I put in a request for one of my personal websites to test it out a little bit for myself, and...well I am still waiting with my queue estimate being somewhere between 3 minutes and 1 hour and 30 minutes (!).
  2. IE NetRenderer offers a convenient method of testing the Internet Explorer browser, encompassing IE5.5 all the way through IE8. This is one of my faves because of its straightforward utility, and no hassle service. There is no charge for the service and your screenshot shows up fairly rapidly. Drawback: NetRenderer only gives you a screenshot of the browser, so interactivity and usability testing is pretty much out of the question.
  3. For testing a website in Mac browsers be sure to check out Browsr Camp, which tests with with the latest versions of 12 different Mac OS X browsers. Drawbacks: this baby costs money, even if it is only $3 for a two day pass or a $99 year long pass - and although you can test Safari 3.1.2 for free, the website I chose to test showed up flawed in the screenshot for some reason... It also only entails the most recent versions of the Mac OSX browsers, leaving out the previous versions that many people still have. Either way, however, Browsr Camp's rendering speed still makes this program pretty sweet.
  4. Xenocode Browser Sandox could be considered the free alternative to Browsr Camp. Despite being less browser inclusive (Xenocode only tests for Internet Explorer 8, 7, and 6, Mozilla Firefox, Apple Safari, Opera, and Google Chrome), it still covers the primary browsers necessary for testing and even features multiple versions of IE. The main drawback with Xenocode is its incompatibility with Mac users.
  5. Another good PC freebie is IE Tester which allows PC users to download the program to test all relevant versions of the IE browser on both Windows and XP. Again, the drawback with this program is its incompatibility with Macs.
  6. For more browser testing programs that cost money, check out Web Worker Daily's recommendations.

Until the day comes that all browsers unite their standards principles, functional capabilities, and visual interpretations, we must cope by utilizing the cross-browser testing methods listed above. Oh- and if you are viewing this on IE, please do me a solid and download Mozilla. Trust me, it's for your own good.

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


A March Featured Website

Speak Visual

As a big fan of the Web 2.0 movement, big buttons and simplistic (yet pure) web design, I almost found it difficult to announce NVIDIA as my pick for this months featured website. Yet their flash layout and movie-style functionality simply can't be ignored (no matter how boxy!).

The thing that really makes this website pop is it's character emphasis and clean color scheme. It's subtle pop effects and unique loading techniques also add a classy touch. So be sure to check it out for yourself. And congratulations NVIDIA.

Labels: , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Developing a Development Plan

The Essential Steps for Designers & Developers to evaluate projects

Often the most difficult aspects that businesses offering development and design services tend to face involves the planning stages. Because I, myself, have noticed the all too often occurrence of problems as a result of poor planning, I thought it was important to outline and discuss important planning steps for design & development projects in today's post.

  1. Step 1: Client Questionnaire. The client questionnaire is a multi-page document with in-depth questions covering all sides of the development process. This document will determine the rough scope of work and relevant information to that as well as the website budget and timeline. Aesthetics, purposes, goals, points of contact, and add-ons need to be encompassed in the client questionnaire. For assistance creating a client questionnaire, see Big Slick Design's article 46 Questions for a web design project. Also be sure to use your own personal experiences when developing a questionnaire. For example: I have encountered many people who simply did not feel capable of creating their own website or brochure content. Because of this, I included a question in my client questionnaire about whether they would be capable of creating their own content. I also gave them brief information about the fees associated with content assistance below the question so they could make an informed decision. Click on the image below to view The Design Group's client questionnaire for web development clients. The Design Group's Client Questionnaire for Web Development Projects
  2. Step 2: Brainstorming. Following the receipt of the completed client questionnaire, the onset of the brainstorming stage begins. This step involves individual brainstorming sessions. One of the most efficient ways to go about this step is to make copies of the completed client questionnaire for each person to separately read over and take notes on any questions, concerns or ideas that arise while doing so. This course of action prevents groupthink which can be detrimental to the development process.
  3. Step 3: Group Discussion. After each individual team member has gone over the questionnaire thoroughly, a group discussion should ensue. This allows for all concerns to get out in the open and tentative planning stages begin to form. No one's ideas or concerns are to be ignored or brushed off, and no one should be left out of the conversation. It is important that any foreseen issues are reconciled at this stage and all potential problems are troubleshooted. This prevents potential issues from squeezing through the cracks and prepares the team for the requirements meeting.
  4. Step 4: Requirements Meeting. The requirements meeting is a meeting where the team sits down with the client and discusses a plan of action. Each side clarifies any ongoing concerns and the design/development team begins to get more of a first-hand feel for what the client is looking for. While some discussion during the requirements meeting will come from the answers found in the client questionnaire, some discussion should be unique to develop project clarity and a common ground for the project scope.
  5. Step 5: Statement of Work (SOW). Before any actual design or development work begins, a bulletproof contract outlining the basic information about the project ought to be created. This contract should be signed by the client and kept in your files for legal purposes. The Statement of Work ought to cover the project scope, special features, basic design elements (colors, etc.), browser testing or printing specifications, schedule, hours and fees. The Statement of Work also serves as the foundational element of the Project Outline.
  6. Step 6: Sitemap. This step can be skipped in design projects that do not require any website development work. The Sitemap is simply a diagram of all website pages and a guideline for site navigation. Sitemaps can be color coded and quite detailed (which often brings the need for a key), or they can be simple representations sketched out on paper. I find that to help everyone on the development team throughout the project, a detailed sitemap is the way to go. You may review the sample sitemap below (which happens to be a sitemap I used for a client) for basic guidelines and ideas. The Design Group's sample sitemap
  7. Step 7: Design Wireframe. The project wireframe will outline the design of the project and is important for conceptual purposes in regards to both the design/development team as well as the client.The Design Group's Sample Wireframe The wireframe supplements the sitemap to create an informative bundle that allows the team and the client to visualize the website on the whole. It also brings to light those potential issues that have somehow squeezed by in the last six planning steps. This wireframe will additionally be serving as the premise for the mock-up design.
  8. Step 8: Project Outline. The project outline is based on the foundation set by the Statement of Work, but emphasizes more of the aesthetics and specific functionality of the project. It can be divided into sections, some of which ought to be included: project goals, timeline, colors, typefaces, logos, features, pages, user testing, and programming. This not only specs out this distinct areas of the project, but it also builds your SOW into a detailed project plan for the design/development team to reference.
  9. Step 9: Team Approval. Perhaps one of the most important steps in the process, the Team Approval Phase involves members of the team evaluating the sitemap, wireframe and project outline for its accuracy and documenting any issues that remain items of concern. It may seem repetitive to do this at this point, but this allows for everyone to approve all aspects of the project one final time, and identify any growing concerns before they get out of hand. This stage also presents the team with a more vivid picture of where the project is heading.
  10. Step 10: Mock-Up Design. The final preparatory stage in the design/development process involves the translation of the wireframe into a clean and accurate mock-up design. This stage is the culmination of the planning process and should accurately depict the design and functionality proposed in the last nine steps.

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


10 Client-Side Editability Options

Offering Clients Hands-On Updating Options without Hiring a Programmer

Not all web developers are PHP or JavaScript wiz kids. In fact, a lot of us draw the line after complex CSS... maybe even after cut'n'paste JavaScript. So when it comes to offering clients the opportunity to edit the content of their web page, it can often be a struggle for web businesses to figure out the best way to go about doing so.

To help those businesses, and myself, I decided to do some research on the subject. Based on my own experience in addition to other reviews and information, I gathered the top 10 most useful applications and software that allow for clients to edit portions of their website without paying a web developer to do it for them. These will come in handy under many circumstances, but especially when you are working with a client on a budget that does not necessarily need a custom back-end system that a programmer can build.

If you find this information useful, be sure to check out some of my related posts:

The Top 10:

  1. Cushy CMS is a straightforward method for offering client editability without sacrificing time, money or design. With Cushy CMS your editable regions are pointed out via CSS classes, allowing for clean-cut code and purity in CSS. Vandalay Design offers an excellent Cushy CMS Explanation and tutorial to help you get started.
  2. Adobe Contribute is a handy way to offer clients a simple content management system for under $200. With an interface similar to MS Word, Contribute allows for rich-media files, in-browser editing capabilities, and Adobe Dreamweaver compatibility.
  3. Tiny MCE is a WYSIWYG web based Javascript HTML editor control to help assist your clients with content management. Released as Open Source under LGPL by Moxiecode Systems AB, it has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is also has the ability to integrate into other Content Management Systems. Drawback: You have to use file/image managers to relay the information.
  4. For those clients who only need to provide clients with the ability to edit their website's gallery, Zen Photo is for you. With a wide variety of gallery features, customizable CSS-based templates, comment capabilities, support for Flash Video, MPEG4, Quicktime, and 3GP (.3gp), ZenPhoto is the way to go for anyone seeking an all-around gallery solution.
  5. Using an interface similar to that of the popular project management application, grouphub, WidgetFinger is free with limited use. However, unlimited use of the application can be bought for the low price of just $10/month. The Widgetfinger editor will enable your clients to edit a live web site in real time, while also helping to maintain standards compliant XHTML and CSS code by separating the content from design.
  6. With features including WYSIWYG editing, video compatibility, photo galleries and blogs, Light CMS is free to start (pricing begins with increased users and pages) and offers a clean, hassle-free CMS experience with web 2.0 functionality. Featured on the website are useful video tutorials (which helps with client training). The drawbacks with this system is the hosting requirements (hosting with them) and the graduated pricing.
  7. Available in ASP, ASP.net, or PHP, Content Seed allows your client to visit a page that you've "seeded", hit control-y on their keyboard and log in, at which point they can change the text, upload images, add links, and anything else they want to do within the area of the page you've given them editing privileges over. It's customizable toolbar (to control the editing capabilities of the client) is what distinguishes this content system. Pricing runs from $150-$300 for unlimited deployments.
  8. The award-winning Joomla is a content management system (CMS) that enables you to build Web sites and powerful online applications. Its ease-of-use and extensibility have made the open source, freely available Joomla a popular choice among developers. Websites presently using Joomla include the United Nations, Ihop, and LA Weekly.
  9. Drupal may be a little more challenging at first compared to some of the other applications/software I have posted here, however for anyone willing to invest some time, Drupal is a great open source CMS software to learn. The primary drawback: Time is money.
  10. Finally, there's always the blog option. Although this option will only allow for editability on the actual blog page, itself, sometimes that is all a client really needs. Some reliable blogging websites you can use to create client blogs: Blogger, BlogSpot, and Word Press

If you have any suggestions for additions to this post, be sure to Contact me or post a comment with any helpful information.

Labels: , , , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


A February Featured Website

I am Studios

I've been a fan of i am studios website for quite a while now, but since I have not yet shared it with you, I felt I needed to do just that. Check it out for yourself.

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Defining Web Standards

The Business behind the Web

I don't understand the way people devalue technology careers and businesses due to their lack of understanding. I have met all too many clients that will try too negotiate prices with me, as if I can wave a magic wand and make the exact same project take half of the time... or maybe they just want me to cut my hourly rate in half... I'm always tempted to ask if they negotiate prices at the gas pump.

One of the most difficult aspects a web development company inevitably faces involves establishing standards. Standards being how much time to bill for various aspects of production, which aspects are somewhat flexible, and when to draw a line with a client.

Web development companies vary drastically amongst themselves. There are the template guys: the ones who will give you a pre-fabricated site for you to fill in the blanks. There are the inexperienced guys: The ones who will promise you the world, but will never actually be able to get there. There are the bang-em-out guys: These guys are just trying to get paid; they usually have very limited design ability but somewhere along the line figured out how to use Dreamweaver. There are the corporate guys: Those guys who will provide you with a pretty decent website, after countless drawn out meetings, numerous worksheets and a highly over-structured contractual agreement. There are the outsources: These actually can be any of the above, but they are distinguished by their web inexperience and careless sort of business mentality. And then there are the freelancers. The Design Group, for example, is a network of freelancers.

All these different types of web development businesses make it very difficult to create unified standards. The template guy will sell you a pretty cheap website, but he will not tell you that eight other companies like yours share the exact same site, and he certainly does not offer any customer service. The inexperienced guy will probably give you an alright deal on a website, but you will definitely not get what you expect, and you may not get what you want. The bang-em-out guy will tend to limit client input on the website for the sake of speed and will likely charge too much for what he is producing. For a price, the corporate guys will usually get you a pretty good website, so long as you can endure all the rules and the semi-overbearing development process. The outsources can potentially produce an alright website, however the standards will not be up-to-date in a year or two, and they may not understand that if you are a dentist you don't want a giant picture of a needle as your home page banner.

Freelancers usually will give you a pretty good website for a decent price. By decent, I mean more than the template guys guys, but less than the corporate guys. They may be slightly slower than, say, the bang-em-out guys, but with a sensible price, an impressive design, and a laid back development process, it's usually worth the wait.

A professor of mine in college started numerous businesses in his life, which was why I asked him be my mentor when I began my own. He once told me a rule of thumb for businesses that I will never ever forget: Price. Quality. Service... Pick Two.

Labels: , , , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments