Archive for November, 2010

Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up. However, most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS.

By considering the CMS as you design, you can maintain far more control over the final output. If your designs will be implemented and integrated into the CMS by a developer, then taking control at the design phase will help you to keep control over the design as opposed to leaving decisions to the developer or the content editors.

Know your enemy

Content Management Systems vary greatly in how much control they give the designer and the content editors. As a designer, you should first find out how much control over the templating system of your chosen CMS you have. Control may vary from simply being able to edit the existing templates to being able to shape the CMS completely around your designs. In some older CMS products you may find that you have little control over the mark-up that is inserted into the pages.

Where the content editors are concerned you should find out:

• Will the editors be able to insert any HTML tags into content areas, either by way of a WYSIWYG editor or directly?
• Is content simply large blocks of marked up content inserted by the editor or does the CMS use any kind of structured content?

Many people use WordPress as a CMS. In WordPress, users can add any mark-up to the Page content area

If users of the CMS will be able to insert their own HTML, then you need to consider how your design will hold up when that happens. The ideal situation for a designer is where the user has limited ability to enter their own mark-up and the CMS uses blocks of structured content to guide them into adding content in the right way that can then be marked up correctly by the templates. The more freedom a user has, the more defensively you need to design.

Keep it consistent

However flexible your CMS is, it is important to consider the consistency in your design templates. Training content editors is far easier if the elements that they have to work with are consistent across all pages of the site.

If working with any kind of structured content in your design (for example an article listing that displays a list of titles and excerpts from articles on the website), think of each section as a repeating block. With CSS3 we can more easily target every other item, or the last item, but this is not available for older browsers and it may not be possible to edit the back-end code of the CMS to add a class to every other item or the last item. Ensure that the design will hold up if each repeating block is the same — you can always add extra finesse for those browsers that do support CSS3.

When dealing with areas that are essentially large blocks of content where the user has control over the mark-up, don’t assume the user will remember to add lots of different classes to the mark-up to trigger the CSS effects you envisaged. Either keep things simple or use CSS3 selectors to target areas of the design.

Do not assume content length or height of blocks

On the web it is never a good idea to assume you know how tall something will be — as even where you have control of the content, text resizing can blow your assumed heights right out of the water and cause overlaps or text running off background images.

When designing for a CMS, you have the additional issue of more or less text being added to an area that you envisaged. If creating the initial designs in Photoshop or similar, consider how each box and the surrounding content will react to a greater or lesser amount of content. If providing PSD files to someone else to build, ensure that any background images on these boxes are provided with instructions on what happens if the box is taller. For example do we show more background or matt onto a flat color?

Grid type layouts of boxes can be a particular problem in this situation. A common design might have several boxes with header areas. They look lovely and neat in the PSD comp with regular lengths of lorem ipsum. However, once the content editors have added content, we find that some headings are on one line, some on two and the boxes are wildly differing heights leaving the neat grid looking rather messy. Considering this at the design phase may have dictated a different layout here.

The lists on the homepage of the Dubbed Creative website do not depend on height of content: some points have more text than others. This type of layout looks tidier than attempting to create equal height boxes with non-equal lengths of content.

If you are handing over to a front-end developer, thinking through these scenarios keeps the control on your side. Decide how you want it to look and explain to the developer how it should react to text resizing, additional content and so on and you don’t run the risk of leaving these decisions to people without an eye for design.

Avoid using image replacement for text

It is possible to generate images on the server side using PHP and other languages, however your CMS is unlikely to offer this capability as a standard feature. Therefore you should consider how any non-standard fonts will be included in your designs if that text needs to be managed by the CMS.

The situation with fonts is becoming far easier as there are now a number of services that allow you to use fonts that are not installed on your user’s computer but that would otherwise be difficult or impossible to license to include on your website. If you need a specific font you may be lucky and find that one of the below services have it available, or they may have something available which is close enough to get the visual effect you want.

Services such as Fontdeck and Typekit mean that using images for text is not neccessary to use a specific font.

• Fontdeck
• Typekit
• Fonts.com Web Fonts
• Font Squirrel
• Review of Popular Web Font Embedding Services (here, on Smashing Magazine)

Consider the CMS when designing navigation

The CMS that you are using is likely to dictate the navigation to some extent, so find out by checking the documentation or speaking with the developers what will be possible. It is useful to know what control content editors have over navigation. If they can add elements to the main navigation for example, it may be that you are best to avoid a neat row of tabs at the top of the site as additional tabs added by users may wrap.

An attractive row of tabs such as these on the Long Hollow Church Website may look untidy if editors have access to add new top level navigation elements.

Questions you should get answers to include:

• How many levels of navigation will be displayed? Is this configurable?
• Can content editors add to or change the main top-level navigation?
• Can you highlight the current page or section?
• Does the CMS offer breadcrumb style navigation?
• What mark-up will the CMS output for the navigation? Can we change it or add classes?

Design and create CSS rules for all possible HTML elements

In your design and dummy content you may only use two levels of heading and never add an ordered list or blockquote, However, if these elements can be added in the CMS, then at some point someone will use them. If you have used a CSS reset stylesheet you may not have styles defined for these elements at all — which will mean they look rather strange when used. Ensure that you have created CSS for all HTML elements in the content areas of your site.

I find it helpful to start my stylesheet with the default styling for all elements as this then acts as a fallback if I don’t add specific rules for styles later on in the document. I can always overwrite this CSS to make level 2 headings look different when they are in the main content area to when they are the heading of a sidebar box, but if I don’t add any specific CSS and then the user adds these elements, they do have some thought put into them.

Assume HTML elements can be stacked in any order

When creating your design, it is easy to assume that the content will look very much like your structured sample content. The h1 will be followed by a couple of paragraphs, never stacking headings and so on. The reality will be different once content editors get their hands on the design, so test the elements in different combinations.

Ask yourself questions such as:

• Does the design still hold together well with stacked headings? Is there appropriate spacing between them?
• What happens if a heading is used inside a list item?
• What happens if different list types are nested? Is the spacing correct at the bottom of each list?
• If the user can insert and align an image, what will then happen to the text around that image? Will there be a margin or will the text run right up against it? What happens if they put an image inside a list item?

Use CSS to enforce the style guide and semantics

This is something we tend to see once users become comfortable with their CMS: they begin to realize that, for example, an h1 heading gives them large bold text. You then start to find h1 headings in all kinds of strange places — wherever the user thinks something should be marked as very important. This can include half of the content of some pages. In the first instance we all need to try and educate our users and provide them with a style guide to help them understand the importance of semantics and correct usage of mark-up but the person you originally train will probably not be the person who manages the content forever and ultimately you will find users being creative with their mark-up.

A considered use of CSS can prevent this from happening. For example, we generally only want one h1 per page. If the main page heading is in a container, then you can use CSS selectors only to target that h1 with the main heading styling and reset the browser defaults on all other h1 headings to the same as the main body copy. This means the user has no benefit to using h1 in a non-semantic manner. The advanced selectors found in CSS3 can be very useful here.

CMS Editors may want to get creative when given a “WYSIWYG” editor such as CKEditor – use CSS to protect your design as much as possible.

Test with real content

Once your design has been developed into (X)HTML and CSS, test your assumptions in terms of how the content will behave. I find it helpful to do this before the templates are incorporated into the CMS. Points to test:

• Take each headline or small box in the design. Put in three times the amount of content you would expect it to have. How does it look? Does the box expand nicely or do you run off the background image or overlap another element?
• Grab a chunk of HTML from anywhere — just View Source on some site and grab a bunch of content complete with HTML tags. Paste it into your main content area in the template. How does it look?
• If using structured mark-up to display an event or similar — does the design hold up if certain items are removed or do you end up with obviously empty areas such as the word “Tel:” with no phone number after it if a phone number was not entered for a contact?

Help your content editors to maintain the design

If you hand over the CMS with little instruction for your users, then you can’t really expect them to read your mind and maintain the design as you would like. Even if your initial content editor is thoroughly trained on how to edit the site, as time passes by they may forget, or decide to get a little bit creative, or the initial editor may leave and someone else takes over with little training. At the end of the project, keep control over the design by helping your editor to do things the right way.

Remove functionality from the editor

The WYSIWYG editor in your CMS may by default give the user the ability to add all kinds of styling, even adding inline CSS. However, with many editors it is possible to trim down the toolbars to just offer a limited subset of icons and therefore functionality that is exposed to the user. If you can trim down the editor to only offer the ability to add basic HTML elements, you will have far fewer problems to deal with.

Add CSS to the WYSIWYG editor

If content editors have access to a WYSIWYG editor when editing content, add the CSS rules used on the site to the editor CSS. That way, editors can see how their changes to the content will actually look. In combination with using CSS to enforce the style guide, this can help users to maintain the consistency on the site.

Create a style guide that also includes semantics

Include a style guide for the site as part of your handover documentation. It is easy to just handover documentation on how the CMS functions and forget to also explain to content editors which elements they should be using when adding their content. This is particularly important if editors have a lot of control over the mark-up which they enter.

By considering how content will be edited on your site and the possible ways in which, over time, that content will grow and change, you can maintain far more control over a CMS website than you might think. If you have any additional tips or would like to discuss problems you have encountered when designing for Content Management Systems, leave a few lines in the comments below.

Further resources

Here are some additional resources that might help with your own CMS based projects:

• 24ways: Cleaner code with CSS3 Selectors
  Use CSS3 selectors instead of expecting your users to add classes to content.
• A List Apart: Strategic Content Management
  An in depth article about selecting and customizing a CMS.
• Design for CMS-Powered web sites
  An in-depth article explaining specific design techniques for use in CMS powered sites.
• cmsdesigns.org
  A showcase site for designs using Open Source CMS systems; a good place to see how flexible different systems are and how other designers are working with them.
• Getting Real: Use Real Words
  This tip is especially important when you are designing for CMS.

(vf) (ik)

© Rachel Andrew for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CMS, Content Management Systems

Years ago, the online design community was a thriving conversationalist — of sorts — through the comment sections across the community. It was through leaving meaningful comments that the thought-provoking ideas presented and discussed in a post were examined by others whose perspective and experiences may have provided them with a slightly different take.

The continued dissection and discussion of the topic expanded the dialog far beyond the initial post, challenging and redirecting ideas and allowing dialog to evolve; it showed a certain level of critical thinking from within the community. We still have sites that are design conversationalists, but unfortunately they are rather exceptions. And it seems that the problem occurs not only in the design community, but in other areas as well.

Since those good old days, things have taken an unexpected turn. Comments are becoming less and less expansions on the ideas presented, and more and more just simple offerings of praise or agreement. Even in articles where solutions are being sought for problem areas within the field, numerous comments show acceptance of this need for action but offer no solution or approach; often, the comments also show that the ideas were not given much consideration by the reader.

This is certainly not indicative of every comment on every post out there across the blogosphere, or a generalization about the community — just an observation of an increasing trend. Once, posts would inspire active discussion and participation with such a wide range of opinions that the post would take on a whole new life. That phenomenon has faded.

What Is This Saying?

The rise of the less-than-conversational commenting can make it look like we are losing our capacity for critical thinking — at least, with regards to the topics being presented for discussion. It can sometimes feel like there are those who rush to throw their support behind the author of the post without considering what is being proposed. Even if you agree with what was said and wish to show your support, there are still ways to comment that indicate a more thoughtful approach.

Sometimes comments can also leave the impression that the commentator just skimmed through the headers and did not read the article in full. The sentiments left behind in such comments, though they may be honest, can impart a hollow feeling rather than the intended encouragement.

So, What Happened?

There is one important aspect of online content that we often tend to forget. With most posts (beyond those intended to offer inspiration and little else), the ideas presented are there to be examined and dissected; they are not the “final word” on the subject, but a perspective presented for consideration. They don’t have to be correct and they don’t have to be accepted “as is”. The current commenting attitude can effectively undercut any potential ongoing discussion that the author of the post set out to have. When, and why, did the dialog die? Perhaps if we can root out the cause, we can better address the problem.

1. It’s a Matter of Time

One obvious consideration is time. Our multiple daily online “obligations” can cause our time to be finely divided; we may opt to leave behind a quick sentiment because our RSS feeds are calling with dozens of other articles that we want to give our attention to; because we have e-mails to attend to; or because any number of time-consuming reasons keep us “running” the whole time we are online.

2. The Social Media Connection

Perhaps the rise of social media shares some blame for the devolving of critical commenting. People started using social media networks more frequently and offering follow-up thoughts mainly when they shared a post, usually limiting their comments to little or nothing; it became easier to simply share a post, rather than to actively formulate a meaningful follow-up comment to leave on the post itself. And as the path of least resistance is often the one traveled most, here we are.

3. Just a Visual Contribution

We also have to consider that for some of the blogosphere populous, commenting is more about visibility than actually contributing to the discussion. At times, the only purpose is to be “seen” on the website or to have their information linked to the website via the comment section — especially if they can be the absolute first to leave a comment. It does not really matter what the post is about; in fact, they may not have even read it. What’s often overseen in these cases is that links next to a meaningful comment are an indicator of author’s competence and as such much more useful and therefore much more valuable than simple link dropping.

As Content Creators, What Can We Do?

What can content creators do to generate more discussion and critical thinking among readers? Many of us are unwilling to adopt a focus on putting out content that does not promote critical thinking; we wish to keep challenging our readers and colleagues. We like to read content which gets us thinking and questioning, so in turn, we like to create the same type of content.

Photo credit: Ian Muttoo

1. Maximize Engagement

Find creative ways to ensure that the content we are putting out is as engaging or interactive as possible. If you can involve your readers in the post, you are more apt to get them thinking about the ideas being presented. Ask them questions throughout the article to get them into an inquisitive state of mind, so that they may end up reading with a much more critical eye and have more comments to make.

2. Respond in a Timely Manner

Watch the comments that are coming in and reply to them within a day or so. This is not to say that we have to be available at a moment’s notice to respond to each comment; but if readers take the time to consider your ideas and to leave their thoughts, we need to take the time to reply. Most will check back in a day or two to see if you have responded, hoping to keep the discussion going; if we have not gotten back to them by then, they might write off the idea of continuing the dialog and move on.

3. Foster a Conversational Environment

Create an atmosphere that is conducive to dialog. If we are already asking questions to get responses and are responding back, we need to nurture the conversation by being approachable. If your ideas are challenged, you have done well; don’t let that make you feel defensive about your original points as that tone will come across in your replies and might degrade the discussion into a debate, with both sides becoming more entrenched.

4. Adapt the Discussion

If our audience is turning to social media networks with their thoughts and follow-ups, we might have to adjust our approach and adopt an “If you can’t beat them, join them” mentality by moving the conversation there — even if it leads away from the original post. We can then try to later steer the conversation back to the comment section attached to the original article or post.

As Commentators, What Can We Do?

We cannot forget that we end up as both creator, and commentator, in our daily online lives — or at least, we should. Admittedly, having fallen victim to the social media networks, I now tend to comment less on blog posts than I did before. We have to fall back on that golden rule: treat others as we wish to be treated, and seek out other articles to read through and critically consider. When we don this hat, we need to take the responsibility seriously and give as good as we expect to get.

1. Offer Personal Highlights

Even when we are in complete agreement with a post and have nothing to expand on, we can still leave meaningful comments: we can always take the time to let the rest of those participating in the comment thread know what areas resonated with us. By highlighting what connected with us, you allow the author to get some insight into what is landing with the audience, and by default, what is not.

2. Be Constructive

Remain as constructive as possible so the conversation doesn’t get derailed. There is no use in belittling or insulting the points presented even if you disagree with them, especially if you are interested in actual dialog or in getting the author to rethink a position. This does assume that our intention, as readers, is to expand on the ideas presented; if we feel we cannot reasonably or respectfully contribute to the dialog, we should just move along without leaving any comment.

3. Read Fully Before Drawing Conclusions

If we are going to leave a comment, especially one that raises a point of contention, we need to fully read the post. If we are pressed for time and have a “Shoot first, ask questions later” attitude, we may skim through the post, get something out of context, and immediately jump down to the comment section to dispute it — forgetting that the rest of the article could contextualize the point, or even cover what we are about to comment on.

4. Ask Questions

Ask relevant questions about the points that were raised to instigate further discussion. When creating content ourselves, we often lean on queries to spark dialog and to get comments flowing; why not employ the same tactic when we are on the other side of the discussion? Even if all of the ideas in the post were expressed plainly enough, one can always ask follow-up questions. Again we want to keep the tone of our comments in mind, so that our inquiries stand a better chance of being well received and of getting answered.

5. Share Related Experiences

Contributing our own experiences can further the discussion and bring others into that portion of the continuing conversation, but only relevant contributions need apply: it is one thing to offer a story to really accentuate a point made in the article, but quite another to share a story that has nothing to do with the post.

In Conclusion

Many factors could have brought about this uncritical commenting trend, and there are many ways that we can combat diminishing dialog to spark critical thinking in our readers and encourage them to “see” what they read with inquisitive eyes. Most bloggers have no problem receiving praise for their posts, but when the readers are additionally provoked to think more about the topic and to leave a comment that carries on the discussion, the post evolves — a win for both the blogger and the readers.

…So, What Do You Think?

© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: comments, posts

Since the beginning of time, people have exploited the human desire to sin so that they could achieve their goals. Finding out what causes people to sin helps us understand the triggers which prompt people to take an action. The Web has made it even easier to exploit these tendencies to sin, in order to build user engagement and excitement about your service or product. In this article we’ll show examples of how successful companies exploit the tendency to conduct all the famous Seven Deadly Sins, and in turn generate momentum with their website visitors. Ready? Let’s roll.

Sin #1: Pride

Pride is defined as having an excessively high opinion of oneself. You must remember someone from your school days who had an extremely high sense of their personal appearance or abilities. That’s pride at work. On the Web, this sin will help you sell your product. Every website visitor wants to be associated with a successful service that other people might find impressive.

People want to say: “Yes, Fortune 500 companies use this tool and I use it as well,” or “Yes, I got on the homepage of Dribbble in front of thousands of other designers; that’s the type of work I do.” In all these examples, people are proud of their achievements and the website helps them show their pride. Here are examples of this first sin in action:

Showing off your customers. People want to use tools that big brands use. SEOmoz does a great job of fronting up the logos of famous companies that pay for their tools, with a simple call to action prompting you to be as successful as these top brands. This entices users to try this tool: “I want to use something big brands use.”

Full Interactive View | Summary view

Fronting up the top users. People want to be considered the best. You are proud to be nominated or picked to be the best. You brag about it to your friends. You mention your accomplishments to your significant other. You want to to be picked as the best one, over thousands of others. Dribbble fronts up top designs on their homepage. This forces people to use their website more and more, to get to the top. A little pride on your site just might get many more customers to use your service.

Full Interactive View | Summary view

Sin #2: Gluttony

Most people think of gluttony in terms of eating. However, the more generic definition of this sin is over-consuming something to the point that it is wasted. It’s a desire to consume more than you can possibly consume. On the Web, companies use this sin to seduce the user into signing up by promising an endless supply of goods.

How many times have you seen “Unlimited” as one of the motivators to get you to buy a tool or service? We are a consumer generation. We want more and more awesome functionality and coolness for our money. The more a website promises us for our money, the more likely you are to sign up. Here are examples of this sin in action:

Full Interactive View | Summary view

The unlimited gluttony of features for a cheap price drives people to sign up for a product or service. If you want to attract user’s attention, create a valuable offer and provide unlimited resources for customers to use or collect.

Full Interactive View | Summary view

Sin #3: Sloth

In the modern view, “sloth” means laziness and indifference. Let’s face it, some of us are extremely lazy by nature. If we don’t have to do something, we’d rather not do it. On the Web, this sin is seen as making tasks overly simple and easy for potential customers. Products and services which “do all the hard work for you” win customers over. Here are some examples of this technique in action:

Making posting a blog post ridiculously easy from anywhere. Posterous is another example of sloth. Don’t want to invest too much time in a blog post? Want to just email or text message your blog post to post it? Solved. Now you don’t have to worry about the formatting, the look and feel, or any other details. You just email the text for your blogs and Posterous takes care of all the details.

Making finances ridiculously easy. Mint is a great example of sloth. Who really wants to spend their time looking for the best interest rates for their savings accounts? Who wants to track their spending? All I have to do is give Mint my financial details and it will tell me where I’m overspending, and also look through thousands of banks to give me the best deals. The tagline reads: “We download and categorize your balances and transactions automatically every day—making it effortless to see graphs of your spending, income, balances, and net worth.” I could do all this on my own, but I’m lazy, and I want someone else to do this for me.

Sin #4: Envy

Envy is when you want something others have. You’re so envious of people that have a status or possession you want, that you’re willing to do what ever it takes to get. On the Web you see this in envy for reward points, followers, friends, and private invites. Here are examples of this in action:

Achieving a status. Mayorship in Foursquare is a great example of this. Ever hear something like this from someone you know: “Who has the mayorship of the Starbucks I go to? Oh, he has only 35 check-ins. I’ll totally beat him next week.” People want that “mayor” status. They’re envious of the person that has it. This drives people to use Foursquare more and more to achieve that status.

Full Interactive View | Summary view

Rockmelt is a web browser that can be downloaded only per invite. The developers portray the browser as “your browser, re-imagined.” They ask folks who want to join, to connect via Facebook and request an invite. Once you’ve done it, your friends on Facebook who already use Rockmelt can see that you asked for an invite and send you one through the browser’s interface.

You might also check up on whether existing members share invite codes on Twitter. This exclusivity creates envy in people who don’t have invites. This envy fuels their desire to constantly seek an invite to Rockmelt, all the time. Once you actually become a user of the tool, you feel like you’re part of an exclusive club and are strongly encouraged to engage with the tool.

Give people something to envy on your website, and you’ll see more loyal users engaging with your service or product.

Sin #5: Lust

Lust is usually thought of as excessive sexual desire. On the Web, this sin translates into our desire to buy sexy, shiny things which not all of us can afford. Websites use interactivity with large, bold, rotating images to seduce us into buying the gadget. Here is an example of lust in action:

Providing the ability to play around and view the product. In web design, lust is often triggered by professional product photography which appears shining, attractive and exclusive in its own right. Rolex’s website is an example of this. The sliding gallery encourages the site visitors to explore the site which is not just a showcase of Rolex’s products, but rather an exhibition of company’s image, style, philosophy and branding.

Rolex tells the story about the quality of its products, their precision and aesthetic appeal. Notice how the designers provide animations and various views for each product, making it more interesting and desireable.

Volkswagen does a good job of seducing people into buying their cars. Its interactive website lets you customize and build your own version of the car you’re interested in. It is even possible to paint the car in whichever color you like. The process of pimping your car in the way you want, makes you lust over the car you’ve just “created.” In this example, our lust for shiny things is exploited. The more we interact with the Volkswagen website, the more we want to buy their product.

Full Interactive View | Summary view

Sin #6: Greed

Greed is an overly excessive pursuit of status, power and wealth. It’s the desire to have more than you need or deserve. The pursuit is so strong that one would go through any means necessary to fulfill it. On the Web, this sin is seen in the desire to gain influence, followers and power.

Being hungry for more Twitter followers. Twitter is the perfect example of a website where all of us are hungry for more followers. The famous wars of Ashton Kutcher, Oprah, CNN and Britney Spears for more followers, shows us how greed gets the best of us. The more followers we have, the more influence we have over people. All of us are greedy for these followers.

Getting power through more Digg followers. The original model behind Digg was very simple: you “digg” a specific piece of news, or a website. Your friends see this, and “digg” this same article, moving it to the top. The top articles on the Digg homepage get millions of people checking them out. The more friends you have, the easier it is for you to move any news to the top. A person who has 500,000 friends can move a story to the top of Digg in minutes, as opposed to someone who is just starting out. People at the top have much more power over everyone else. The greed for friends on Digg is what keeps us hungry for more.

In these examples above, we are hungry to gain influence and power and want to engage with the  service to fulfill our goal.

Sin #7: Wrath

Last but not least, wrath is defined as uncontrolled feelings of rage, anger and hatred. On the Web, this sin is used by companies to generate gossip and buzz around their product or service.

Encouraging criticism. Amazon is a perfect example of using wrath to create controversy and more engagement with the product. The website fronts up the most helpful critical review, right beside the most helpful, favorable review. This prompts the shoppers to respond to these reviews and to add their own reviews, as they try the product out.

Full Interactive View | Summary view

Catering to frustration. The Consumerist is a perfect example of using consumer frustration to generate content and activity on a website. Giving angry shoppers the ability to vent and to express their frustrations, generates tremendously long discussions and activity on the website. The concept of consumer anger is rooted deep in the Consumerist tagline:

Furthermore, as you use the website and vent your anger about products, you get even more worked up about banners such as these (found on the Consumerist website):

Conclusion

You can now see in what way the results sinning on the Web generate for your business. Keep in mind that when companies try to get their customers to sin too hard, it’s usually very apparent and often results in drawing potential customers away. It’s important to maintain a good balance between sin and common sense. Next time you’re creating a website for a product or service, think back to these examples of the Seven Deadly Sins in action and see how you can use them to your advantage. Now go out there and get your customers to sin. What are you waiting for?

(ik)(vf)

© ZURB for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: customers, envy, gluttony, greed, lust, pride, seven deadly sins, sloth, visitors, wrath

The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail — twice the detail horizontally, and twice vertically. For developers only using Apple’s user interface elements, most of the work is already done for you.

For those with highly custom, image-based interfaces, a fair amount of work will be required in scaling up elements to take full advantage of the iPhone 4 Retina display. Scaling user interfaces for higher detail displays — or increasing size on the same display — isn’t a new problem. Interfaces that can scale are said to have resolution independence.

In a recent article, Neven Mrgan described resolution independence: “RI [resolution independence] is really a goal, not a technique. It means having resources which will look great at different sizes.” If it’s a goal, not a specific technique, then what techniques exist? How has Apple solved the problem in iOS?

Fluid Layouts

While apps that take advantage of Apple’s native user interface elements require a lot less work when designing for the Retina display, we’re here to talk about highly custom, graphic-driven apps that need a fair amount of work to take full advantage of the Retina display.

While not strictly a resolution-independent technique, using a fluid layout can help an app grow to take advantage of a larger window or screen by adding padding or by changing the layout dynamically. A lot of Mac, Windows and Linux apps use this method, as do some websites.

This is partially how Apple handled the difference in resolution from iPhone to iPad — a lot of UI elements are the same pixel size, but padded to make use of the extra screen real estate. The status bar is a good example of this. It works because the pixel densities of the iPhone 3GS and iPad are similar (163 ppi vs 132 ppi).

Full view

Fluid layouts work when the change in density is minor, but aren’t any help with the iOS non-Retina to Retina display transition (163 ppi to 326 ppi). The image below demonstrates what would happen if an iPhone app was simply padded to cater for the higher resolution display of the iPhone 4. Buttons and tap areas would be the same size in pixels, but half the physical size due to the higher pixel density, making things harder to read and to tap.

Full view

Just-in-time Resolution Independence

Another approach to handling widely different resolutions and pixel densities is to draw everything using code or vector-based images (like PDFs) at runtime. Without trying to stereotype anyone, it’s usually the approach engineering-types like. It’s clean, simple and elegant. It lets you design or code once, and display at any resolution, even at fractional scales.

Unfortunately, using vector-based images tends to be more resource-hungry and lacks pixel level control. The increase in resources may not be an issue for a desktop OS, but it is a considerable problem for a mobile OS. The lack of pixel level control is a very real problem for smaller elements. Change an icon’s size by one pixel, and you will lose clarity.

Neven emphasizes in his article that:

“…it is simply not possible to create excellent, detailed icons which can be arbitrarily scaled to very small dimensions while preserving clarity. Small icons are caricatures: they exaggerate some features, drop others and align shapes to a sharp grid. Even if all icons could be executed as vectors, the largest size would never scale down well.”

Although here he is talking exclusively about icons, his description is apt for most UI elements. The decisions involved in scaling are creative, not mechanical. Vector-based elements aren’t suitable for all resolutions, if you value quality.

Ahead-of-time Resolution Independence

The best quality results — and the method Apple chose for the iPhone 3GS to iPhone 4 transition — comes from pre-rendered images, built for specific devices, at specific resolutions: bespoke designs for each required size, if you will. It’s more work, but pre-rendering images ensures everything always looks as good as possible.

Apple chose to exactly double the resolution from the iPhone 3GS to the iPhone 4, making scaling even easier (different from the approach of Google and Microsoft — notice that this article is not relevant to the latest version of Microsoft’s mobile OS — proving yet again that controlling the entire stack has huge advantages).

Currently, there are three iOS resolutions:

• 320 × 480 (iPhone/iPod touch)
• 640 × 960 (iPhone 4 and iPod with Retina display)
• 768 × 1024 / 1024 × 768 (iPad)

In a few years, it seems highly likely that the line-up will be:

• 640 × 960 (iPhone/iPod touch with Retina display)
• 1536 × 2048 / 2048 × 1536 (iPad with Retina display)
• Some kind of iOS desktop iMac-sized device with a Retina display

There are significant differences between designing iPhone and iPad apps, so completely reworking app layouts seems necessary anyway — you can’t just scale up or pad your iPhone app, and expect it to work well or look good on an iPad. The difference in screen size and form factor means each device should be treated separately. The iPad’s size makes it possible to show more information on the one screen, while iPhone apps generally need to be deeper, with less shown at once.

Building Designs That Scale

Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution.

When it comes to building UI elements that scale easily in Adobe Photoshop, bitmaps are your enemy because they pixelate or become blurry when scaled. The solution is to create solid color, pattern or gradient layers with vector masks (just make sure you have “snap to pixel” turned on, where possible). While a little awkward at times, switching to all vectors does have significant advantages.

Before anyone mentions it, I’m not suggesting any of the methods are new; I’m willing to bet that most icon designers have been working this way for years. I’ve been using vector shapes for ages too, but the Retina display has changed my practice from using vector shapes only when I could be bothered, to building entire designs exclusively with vector shapes.

I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).

Full view

More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer. Be careful when pasting into Photoshop, as the result doesn’t always align as it should — it’s often half a pixel out on the x-axis, y-axis or both. The workaround is to zoom in, scroll around the document with the Hand Tool, and paste again. Repeat until everything aligns. Yes, it’s maddening, but the method works after a few attempts. Another option is to zoom in to 200%, select the path with the Direct Selection Tool, and nudge once, which will move everything exactly 0.5px.

Full view

Even more complex objects requiring multiple colors get drawn in Illustrator to the exact pixel size, and then pasted into Photoshop as a Smart Object. It is a last resort, though — gradients aren’t dithered, and editing later is more difficult.

If you need to use a bitmap for a texture, there are three options: use a pattern layer, a pattern layer style, or build a bitmap layer at the 2× size and turn it into a Smart Object. I prefer to use pattern layer styles in most cases, but be warned: patterns are scaled using bicubic interpolation when you scale the entire document, so they become “softer.” The solution is to create two versions of each pattern, then to manually change pattern layer styles to the correct pattern after scaling — a little tedious, but totally do-able approach.

Full view

Scaling Up

At this point, your document should be able to scale to exactly double the size, without a hitch.

I have a Photoshop Action set up that takes a History Snapshot, then scales to 200%. That means, previewing at the Retina display’s resolution is only a click away. If you’re feeling confident you’ve built everything well, you should be able to scale up, edit, then scale down and continue editing without degradation. If you run into trouble, a Snapshot is there to take you back. Using one document for both resolutions, means not having to keep two documents in sync — a huge advantage.

A word of warning: layer styles can only contain integer values. If you edit a drop shadow offset to be 1 px with the document at 2× size, and then scale it down, the value will end up as 1 px because it can’t be 0.5 px (a non-integer value). If you do require specific changes to the 2× version of the Photoshop file, you’ll have to save that version as a separate file.

Exporting, Exporting, Exporting

Now for some bad news: exporting all the images to build an app can be extremely tedious, and I don’t have much advice here to assist you. As my documents act as full screen mockups, they’re not set up in a way that Photoshop’s Slice feature is any use. Layer comps don’t help either — I already have folders for each app state or screen, so switching things off and on is easy.

The best export method seems to be: enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

The problem is amplified when saving for the Retina display, where there are twice as many images and the 1× images must match the 2× images precisely.

The best solution I’ve come up with so far:

• Build your design at 1×
• Use Copy Merged to save all the 1× images
• Duplicate the entire folder containing the 1× images
• Use Automator to add @2x to all the filenames
• Open each @2x image and run the “Scale by 200%” Photoshop action. This gives you a file with the correct filename and size, but with upscaled content
• Scale your main Photoshop design document by 200%
• Use Copy Merged to paste the higher quality elements into each @2x document, turn off the lower quality layer, then save for the Web, overwriting the file.

In some cases, Photoshop’s “Export Layers To Files” can help. The script can be found under the File menu.

Mac Actions and Workflows

All the Actions and Workflows that I use myself can be downloaded from the blog post link below. The Automator Workflows can be placed in your Finder Toolbar for quick access from any Finder window, without taking up any space in your Dock.

Download: Retina Actions and Workflows.zip

Fortunately, Apple chose to exactly double the resolution for the iPhone 4, and for using ahead-of-time resolution independence. As complex as the process is now, things would have been far worse if they had chosen a fractional scale for the display.

Related Posts

You may be interested in the following related posts:

• How To Build a Mobile Web Site
• How To Market Your Mobile Application
• Smashing eBook: Mobile Design for iPhone and iPad
• Get Started Developing for Android with Eclipse

(rs) (ik) (vf)

© Marc Edwards for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Display, iPhone4, mobile, Retina, techniques, Workflow

Walk into any design classroom, at any college in America, and you’ll see a comfortable mix of male and female students. Turn your attention to the front of the classroom, or down the hall to the faculty and staff offices, and that wonderful gender balance starts to skew. Travel outside the campus, and there’s really no balance at all.

But why? If there are design classrooms across the country with a 50/50 blend of men and women — and in many classrooms, there are more females than males — then why doesn’t the design field represent the same ratio? Why does creative employment still showcase a male-dominated presence? What happens to these passionate and educated females? Certainly, there must be more to it than child-bearing — or is there? Is a more gender-balanced field really all that important? Why, or why not?

Gender disparities in the design field is a controversial as well as a complex topic. Image credit: Choichun Leung

These questions and many others accompanied me to a design and technology conference this past fall. Minnebar, an annual Twin Cities conference that celebrates vision, niche technology and collective wisdom, provided the perfect platform for such inquiries. I hosted a session aptly named “The Equal Sign” to pitch the dilemma of the field not representing the classroom. I played the role of discussion facilitator, and was eager to see where the conversation would go. What I hadn’t realized, was that I wasn’t the only one perplexed by this phenomenon.

First, the Stats

According to Findings From A List Apart Survey 2009, a poll created by and for Web designers, 82.6% of Web designers are male. Ironically, 66.5% of the same respondents stated there is “definitely not” a gender bias in the design field. Web design is just one segment of the design world, but the statistic is nonetheless chilling.

My audience for the session? Predominantly female. It seems the topic itself is more intriguing for women than men. What these women had to say was sobering. One mentioned that it’s foolish to expect a male-dominated field to be able to design interfaces that appeal to how women want to interact with technology. In other words, young girls put off as consumers of technology aren’t likely to desire to create in that arena.

Another common theme during the discussion was that of heroes. So few female designers exist, and of them, few are known superstars in the industry. Of these, even less are known by individuals outside of the industry. Lack of visible female heroes results in lack of female interest. But there are countless male role models in the field; why can’t they be heroes for young girls with computers? The same reason why I’d rather aspire to be Run DMC, than Mariah Carey.

Second, the Perceptions

In the book Unlocking the Clubhouse: Women in Computing, two researchers at Carnegie Mellon University found that “research shows that both males and females believe that males are better than females at computing” (Clarke, 1992; Spertus, 1991). This finding is nearly 20 years old, but this mindset could easily have been held by the parents of today’s college students. Going to college can be hard, but pursuing a degree with little support from mom and dad makes it even harder.

There is also an unspoken expectation that women are very creative and make great print designers, but aren’t wired to splice the intricacies of new and constantly changing software and platforms — as noted in a Fadtastic.net article written by designer Matt Davies. The field generally represents the occurrence of women holding positions in print, illustration and photography, with noticeable scarcity in more technology-dependent roles such as Web design, animation, game design and programming.

Google used to return the correction “Did You Mean: He Invented” for the search “she invented”. It generated a lot of buzz throughout the Web.

Third, the Conditioning

Conditioning is perhaps the most obvious and potentially controversial (but definitely the most changing) of all the reasons why there aren’t more women designers. Video games and scrapbooks are cliché, but a telling, cultural phenomena. Traditionally, young boys have been fascinated with video games. The constant newness of the technological capacities; the integration with other male stigmas, such as television and computers; and certainly the intense competitive nature of the games, whether against a friend or the software itself, have all catered to masculine characteristics.

Scrapbooking, on the other hand — often a self-involved, self-rewarding, aesthetic, process-oriented affair — has appealed to feminine sensibilities. Great; but what do video games and scrapbooking have to do with gender gaps in creative fields?

Everything. And, it’s changing. In the Newsweek article “’Where’s My Crazy Hot Guy?’ A Female Designer On Women and Videogames,” award-winning female game designer Brenda Brathwaite confessed, “There was a time literally, within this decade, when I knew every single female game designer out there. Personally….” Video games, or more specifically, the video game format, have found their way into almost every media component of our lives.

Log in to Facebook, and in no time you’ll end up fielding requests from friends to play “Farmville.” Shop your favorite store online, and you may be prompted to click a link and dress a sophisticated cartoon character to help you with your purchasing decisions. Save some time at the grocery store by going through the self-checkout line, and you’re confronted with the all too familiar series of buttons, colors and graphics to ease your way through the credit card swipe and out the door.

Video gaming isn’t just something engaged in by teenage football players. It’s a format that is relevant to men and women, boys and girls, and this inclusion of the female population is invariably causing more females to ask themselves how it all works, and how they can be a contributing factor.

Fourth, the Status Quo

All things design — video games, Web design and graphic arts — can bring two genders together and create acceptance and encouragement, which fosters the potential to level the creative employment playing field. You must ask yourself, “Is this a good thing?” There are numerous reasons why more women are needed, and need representation; but is the “female designer dilemma” really all that bad? If a city of people stormed the doors of their school district demanding more male kindergarten teachers, they might be mercilessly scoffed at.

Similarly, few are tooting the horn for more female firefighters, or male nurses. Our culture has built functioning gender-based roles, and has birthed young boys and girls excited to fill them. Why fix it if it ain’t broke? If gender balance is achieved in the creative industry, will it be adding new jobs for females, or replacing jobs that males had? If the latter is the case, what will happen to these men? My audience at Minnebar had blank faces, and empty responses, when I asked them.

All of this matters for one reason: I don’t want to face my female students every day with the thought that more than half of them won’t ever be designers, and of the few that do, what exactly do they have to look forward to? They will have to deal with their peers, employers, clients and families being both impressed and confused when their sisters, friends and coworkers create designs that aren’t “girly” and “cute.”

Lisa Firke, a woman embodying that rare combination of female and Web designer, commented on Zeldman.com: “I’m sure it’s not a coincidence that 90% of my clients are women. Perhaps taking women seriously as designers goes hand-in-hand with taking women seriously as Web consumers.”

Sources

Fisher, A. and Margolis, J. (2002). Unlocking the Clubhouse: Women in Computing. Cambridge, MA. MIT Press.

Editor’s Note

This post is an article from our series of “opinion columns,” in which we give people in the Web design community a platform to raise their voices and present their opinion on something they feel strongly about to the community. Please note that the content in this series is not in any way influenced by the Smashing Magazine’s Editorial team. If you want to publish your article in this series, please send us your thoughts and we’ll get back to you.

— Vitaly Friedman, Editor in Chief of Smashing Magazine

(sp) (rs) (ik) (vf)

© John Mindiola for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: community, Design, gender

Logo

Client: The Overlook Apartments