Categories
Learn

Perfectionism

by Paul Boag

http://boagworld.com/design/perfectionism

I recently came across this superb post entitled “Why I hate working with perfectionists
written by Karl Mendes. Karl perfectly summed up a growing problem I am
seeing among many website owners and web designers. It is a subject I
feel so passionately about that I felt I had to throw my hat into the
ring.

The problem

The problem began with certain high profile web designers who I will
kindly call somewhat elitist. These web designers liked to describe
themselves as perfectionists. They believe in an obsessive attention to
detail and an unwillingness to compromise their desire for perfection.

Because of their reputation this idea has begun to seep into the culture of web even going as far as some website owners.

On the surface this all sounds great. Surely we should strive for
perfection in design? Isn’t it good to have an obsessive attention to
detail?

The problem is that there is no such thing as perfection.

No such thing as perfection

Perfection is very much in the eye of the beholder. In my opinion it
takes an incredible amount of arrogance to say my idea of perfection is
somehow more valid than yours.

Of course it could be argued that a designers perception of design perfection is
more valid than that of a website owners. The problem is that
relentlessly seeking perfection in one field often undermines others.

For example, an obsession with detail is a huge drain on time and
money. You may go someway towards reaching a mythical design perfection
but at the same time you undermine any perfection in !

Equally design perfection may clash with a perfection in code. In
short pure perfection is not possible even if it wasn’t so subjective.

Personally I am the opposite of a perfectionist. I am a pragmatist.

Choose pragmatism every time

The thing that angers me so much about perfectionists is the sense of
superiority. Most perfectionists I know in web design are those who
work on huge projects with massive budgets. They have the luxury of
being able to spend months working on a user interface. The problem is
they still look down on those who don’t achieve their level of
‘perfectionism’ even if they don’t have the budget.

These are the people that sneer at websites thrown together in a
WYSIWG editor like Dreamweaver. Admittedly many website should not be
built in this way. However for some sites this is perfectly valid. For
example I have built my youth groups website in iWeb. It’s absolutely shocking. However, am I embarrassed by it? Not at all. It is the right solution for the project…

  • It had no budget.
  • I had no time to build something.
  • It’s going to be looked at by a handful of people.
  • The target audience don’t care what it looks like as long as it works.
  • It does not need to impress anyone.

Is it perfection? Absolutely not. Was it the most pragmatic solution in the situation? Absolutely.

That is the problem with perfection, it does not allow for context.

Karl summed it up for me when he quoted 37Signal’s book Rework

They claim to be perfectionists, but that just means they
are wasting time fixating on inconsequential details instead of moving
on to the next task.

Amen to that.

Categories
Learn

Twitter backfires

http://www.guardian.co.uk/environment/2010/aug/24/twitter-backfires-climate-camp

No self-respecting NGO and campaign group would be seen these days without a Twitter account to spread the word (Greenpeace, Friends of the Earth and WWF have over 200,000 followers between them for example). But Monday’s day of mass action by the Climate Camp protesters showed just how badly Twitter can backfire.

The Climate Campers set up in the grounds of the Royal Bank of Scotland corporate headquarters
on the outskirts of Edinburgh and were protesting against the bank’s
funding of fossil fuel interests – including highly CO2-intensive tar
sands in Canada. During the course of the day small bands of protesters targeted RBS-owned locations and other companies across the city.

Climate Camp had its own Twitter feed of course, but anyone browsing through the #climatecamp
hashtag would probably not have got the impression of the day’s events
that the spinsters at Climate Camp wanted. Supportive texts were swamped
by tweeters ridiculing the activists or even pretending to be them.

@oldhoborn, for example, mercilessly lampooned the campers all day for their middle-class demographic. For example:

Someone has stolen my “all property is theft” banner from #climatecamp. My mum gave me that for getting 3*A’s at Winchesterless than a minute ago via TweetDeck

and

Moonbeam says she never wants to come another #climatecamp and hopes the job at Barclays Private Banking is still open and her ponies are okless than a minute ago via TweetDeck

Oldholdborn also threw in a fake retweet:

RT @climatecamp: I would like to apologise for the complete mess we made today. God, I’m so ashamed #climatecampless than a minute ago via TweetDeck

Others, went for the “get a job” or “get a bath” line while @Akvavitix, had this:

Suppose it’s a bit too early to start #ClimateCamp bashing as the lazy little dears will still be hiding from the rain in their Yurtsless than a minute ago via TweetDeck

But the rather presumptuously named @wearethebritish put it most concisely:

#climatecamp got its arse owned on twitterless than a minute ago via web

He was right.

It is surprising that an organisation that puts so much emphasis on the art of manipulating the media (according to the Climate Camp media pack
journalists are “weak and cowardly” and “astoundingly unimaginative”)
did not think harder about how to use a medium that cuts out the peaky
middlemen altogether.

Posted byJames RandersonWednesday 25 August 2010 10.27 BST

Categories
Learn

Mobile Web design 2009

Web designers know that the industry involves plenty of change, and
continuous adaption and development of skills is required in order to
stay up to date. In the past few years, one of the biggest areas of
change has been the amount of Internet users who are accessing websites via phones and mobile devices.
As a result, Web designers have a growing need to be educated in this
area and ready to design websites that accommodate this audience.

Because
designing websites for mobile devices brings some unique situations and
challenges into play, the subject requires a strategic approach from
the designer and developer. In this article, we’ll look at the subject
as a whole, including current trends, challenges, tips and a showcase
of mobile websites. Plenty of helpful resources and articles are also
linked to throughout the post, so if you’re interested in learning more
about designing for mobiles, you should have plenty of information at
your fingertips.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Mobile Web Design Trends for 2009

1. Simple options

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg,
for example, contains only 10 simple headlines and links, a log-in link
and a few very basic navigation options. When it comes to mobile
websites, simplicity is key. Because of the lack of
space on the screen and Internet connections that are often slower, it’s
important for visitors to have access to what is most crucial, and as little else as possible.

Digg2 in Mobile Web Design Trends For 2009

In
an age of crowded pages, the simplicity of mobile websites can be
refreshing. What’s important is there, and what is most likely excess
gets cut out. The simple options that a user has can make a mobile
website much more usable than it would be otherwise, as long as the
options allow for actions the visitor wants to take.

2. White space

White
space is an important part of any design, and it’s something that’s
usually a challenge in Web design because there is a desire to get as
much as possible in front of the visitor. White space becomes even more
of a necessity in mobile design because the typical screen size is so
much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As
you browse through the websites shown in the gallery further down in
this article or in real-world scenarios on your own mobile device,
you’ll find that many websites include ample white space, especially the
ones that are helpful and easy to use.

3. Lack of images

As
high-speed Internet connections have become more common in recent
years, designers have been able to take more liberties with things like
bandwidth-hogging video and images. The average visitor on a desktop or
laptop wants to see a visually engaging website, and, as a result,
images are heavily used. However, when it comes to mobile design,
excessive use of images often does more harm than good.

There is a
great variety of speeds of mobile Internet connections and of pricing
plans for access. Visitors are more likely to be slowed down
or concerned with use of their resources when they’re on a mobile.
Additionally, the size of the screens can make many images difficult to
see and content harder to read. For these reasons, it’s very common to
see minimal use of images in mobile Web design.

Netflix in Mobile Web Design Trends For 2009

As
a growing number of mobile users move to smart phones with larger
screens and better connection speeds, more opportunity exists to use
images. However, because there is still a large percentage of users who
are not using these devices, many mobile websites still avoid images
when possible.

4. Sub-domains instead of .mobi or separate domains

When
the .mobi top-level domain (TLD) first became available, a lot of buzz
surrounded the news. While some websites use .mobi for mobile versions
of their websites, it is currently more common to see companies use a sub-domain
or a separate folder on their primary domain. There are multiple issues
a company must consider when making this decision, but one of the major
benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll
commonly see mobile versions of websites at such addresses as
mobile.example.com, m.example.com, example.com/mobile, example.com/m and
other ones along these lines. Some actual examples are m.twitter.com, mobile.washingtonpost.com and netflix.com/mobile/.
Of course, there are exceptions to this trend, but as you look at the
mobile versions of major websites, you will see more sub-domains than
.mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor.
Of course, all websites should be user-focused, but because most
websites are run commercially for business purposes, there are often
elements that aren’t necessarily important to visitors, such as banner
ads. While advertisements have largely become an accepted part of the
Internet, most mobile websites are ad-free. The content available on a
mobile website is typically of the highest priority to the average
mobile visitor, not the company, although in the end the company
benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion. Like most news websites, TheOnion.com does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

Onion2 in Mobile Web Design Trends For 2009

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website.
The only options here are for a product search and store locator (a
phone number is also listed to allow customers to place orders). The
logic here is that visitors who are accessing the website on a mobile
device are probably on the go and probably have something very specific
in mind. Maybe they’re looking for a store close to their current
location to buy a product. It’s less likely that a mobile visitor would
be interested in simply browsing the website, so the most important
options for this visitor are presented, with nothing else to get in the
way.

Bestbuy in Mobile Web Design Trends For 2009

Common Challenges in Designing for Mobiles

Of
course, Web design for mobile devices brings its own unique set of
challenges that designers must overcome to create a successful mobile
website. If you’ve attempted to design for mobiles, these were probably
some of your most significant challenges.

1. Variety of screen sizes

Although
Web designers are used to dealing with varying screen sizes and the
resulting issues, mobile design presents this challenge in a bit of a
different way than dealing with different-sized desktop monitors. Most
designers are comfortable with the challenges that arise from various
screen resolutions on desktop monitors, but if you haven’t worked with
mobile design before, it can be something yet more complicated that you
need to overcome.

Because mobile technology is always changing, screen sizes are changing,
too. Fortunately for designers, modern mobile devices typically have
bigger screens and higher resolutions than those of a few years ago, but
of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. The results of the study behind these articles show that 240 x 320
(a.k.a. QVGA) should be the standard for mobile development. Many newer
mobiles and smart phones have larger screens, but smaller ones are
largely a thing of the past.

The graph below shows the findings of
the report, which is close to a year old at this point. With the rise
in popularity of the iPhone and its competitors, the most recent numbers
most likely favor larger screens even more.

Graph in Mobile Web Design Trends For 2009

For more interesting details on the study and other helpful charts and graphs, please see both articles at Sender 11.

2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation
of dealing with a new aspect of design. If you haven’t considered
mobile browsers and visitors in your previous design work, it’s most
likely not something you feel comfortable doing without some research.
Because mobile browsers behave somewhat differently than desktop
browsers and because the environment of its users is not the same, the
designer needs to gain some understanding and familiarity. Through the
information and resources presented in this article, you can easily get
started with a general understanding of the mobile Web, if you don’t
already have experience.

3. Rapid change

Like any other
technology, rapid change is a constant. Of course, Web designers need to
stay on top of the industry in general, and the mobile Web is no
different. As technology and trends continue to change, the mobile Web
will evolve accordingly. The challenge of change isn’t really anything
new to designers; the mobile Web just presents another area in which
designers need to stay up to date.

4. Testing challenges

One
of the most significant challenges in designing for mobiles is the wide
variety of phones in use. While designing for desktops brings its own
testing challenges, with its various browsers and screen resolutions,
there are more dependable ways of testing these items at the moment. On
the mobile Web, however, many of your visitors will likely be accessing
your website in an environment that you were not specifically able to test.

There
are, of course, some things you can do so that a mobile website is
tested as well as possible. To start with, the simplicity of mobile
websites in a way makes the testing process easier because there is less
that can go wrong. With a careful design and some well-planned testing,
it’s possible to be fairly certain that a website will be displayed
properly and, more importantly, usable on the vast majority of mobile
devices.

At the end of this article, you’ll find links to a number
of helpful resources for testing, but we’d like to point out a few here
as well. First, the Web Developer Toolbar
has some very useful features for testing a website for mobile users.
Because CSS and images may not be enabled when a mobile visitor is on
your website, you can use the toolbar to disable both and see how the
website will appear. While this does not exactly replicate the
experience of visiting the website in a mobile browser, it can help
identify potential problems in the way content and navigation is
displayed.

Another helpful testing resource is the Opera browser.
In the Opera toolbar, go to “View” and select “Small Screen.” This will
display the website in a very narrow window, similar to what would be
used on a mobile device. Additionally, you can use the Opera WebDev Toolbar
to view an unstyled page by clicking on “Display.” By viewing the page
in the small screen with CSS turned off, you can get an idea of how
mobile visitors may experience the website. The screenshot below shows
the Smashing Magazine front page unstyled in the small window.

Smashing in Mobile Web Design Trends For 2009

5. Deciding on what is essential

If
websites are to contain only what is most essential, the website owner
or designer will have to determine accurately what content is most important.
This may seem pretty simple, but taking a website that’s loaded with
content, images and maybe even video, and weeding it down to just the
essentials can be quite a challenge. Another aspect to this issue that
must be considered is the status of the average mobile visitor.
What are they doing? Why are they accessing the website at that time?
What are they likely and unlikely to have any interest in? Keep in mind
that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now
that we’ve looked at some of the current trends and challenges in
designing for mobiles, let’s examine some specific issues that should be
considered by designers during the process.

1. Clean, semantic markup
The best thing you can do to lay a solid foundation
for a usable mobile website is to incorporate clean and semantic
markup. What you may be able to get away with on a traditional website
may cause significant problems on a mobile website. Clean markup will
help ensure that the browser is capable of properly displaying the
website, and it will help give visitors a pleasant experience, with no
unnecessary difficulties.

2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of
content and presentation. Mobile visitors are much more likely than
desktop visitors to see a website with images and CSS disabled. The most
important thing for these visitors is to be able to access the content
and links: presentation is secondary. A website that
uses clean, valid markup, with CSS to separate the presentation from the
content, is off to a great start as a mobile website.

3. Alt tags
Because it’s likely that some visitors will not be able to see images
on the website (or will choose to disable them), alt tags are extremely
important for usability purposes. Of course, alt tags should be used
anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields
Like alt tags, form field labels help make a website much more usable
for mobile visitors. Imagine trying to use a form without knowing what
is supposed to go where. Simple details like alt tags and form field
labels can make a big difference this way.

5. Use of headings
With inconsistent and often limited styling of text on mobile browsers,
headings become more significant. Mobile browsers are less likely to
style text exactly how you would like it to be, but h1, h2, h3 and other
such tags generally help make certain text stand out and build the
structure of the page from a visitor’s perspective.

6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats
for layout, it’s unlikely the website will look good on a small screen.
Usually the website will be more usable and look less awkward without
floats altogether and with content simply stacked up.

7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and
padding than your main website has for traditional visitors. Of course,
this depends partly on how much of a margin and padding your website
currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page.
This is helpful on mobile websites as well, but generally, mobile
navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or
laptop monitors, make sure the background and text colors provide
adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web,
by Brian Suda, that provides an excellent point of reference on the
subject. In the article, Brian breaks down the process of designing for
mobiles in seven understandable and digestible steps. The article is
useful enough to restate the main points here.

1. Don’t Mix Up Your Markup

For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones

We
must cater not only to different screen sizes and resolutions, but to
different shapes. From short and long rectangles to tall and skinny ones
to perfect squares, the mobile world contains a rich tapestry of
variation that almost makes you want to pull your hair out!

3. Target the Right Customers

Traditional
website customers are most likely sitting at a desk facing a large
monitor that has a decent resolution. Visitors who are browsing your
mobile website are unlikely to be in the same circumstances. They may be
waiting in line, riding on the train or bus, running to the departure
gate or lost in an unfamiliar town late at night and trying to get
somewhere.

4. Publish the Bare Minimum

While
the concept of having only one website, and simply styling it
differently depending on the medium the visitor is using, is popular
with many standardistas, a separate mobile website is required to
deliver an optimized experience for mobile users.

5. Choose a Great Domain Name

When
deciding on a domain name for a mobile website, the colleagues and
companies I’ve worked with have always used a sub-domain. Creating a
sub-domain is the easiest of the options to set up (you already own the
domain), it’s the cheapest option (there’s no need to register the
.mobi), and it means you avoid having to spend hours tweaking the
server (and potentially messing up normal traffic).

6. Validate Your Markup

Mobile
browsers are much less forgiving than desktop browsers. A browser
running on a mobile device generally doesn’t have the luxury of a 2 GHz
processor and 100 MB of disk space. Therefore, you must check, validate
and recheck your markup, time and time again.

7. Test, Test, TEST!

Testing
your website with a Web browser on a desktop computer can get you only
so far in terms of simulating the mobile experience. There are many
elements of mobile device usage that can’t be replicated accurately in
this way.

Brian’s article is an excellent starting
point for those who are new to designing for mobile devices, and it’s
also a great resource to have handy down the road when you want to check
your work to make sure you’re doing things the right way.

Mobile Gallery

After all this talk of mobile websites, let’s take a look at some screenshots of examples. Many of these screenshots are from Mobile Awesomeness,
a gallery of mobile websites. Those that are from Mobile Awesomeness
are linked to the relevant pages there, many of which contain additional
images.

New York Times

Nytimes3 in Mobile Web Design Trends For 2009

Twitter

Twitter3 in Mobile Web Design Trends For 2009

CNN

Cnn3 in Mobile Web Design Trends For 2009

popurls

Popurls3 in Mobile Web Design Trends For 2009

Bank of America

Boa3 in Mobile Web Design Trends For 2009

Wal-Mart

Walmart3 in Mobile Web Design Trends For 2009

LinkedIn

Linkedin3 in Mobile Web Design Trends For 2009

Digg

Digg3 in Mobile Web Design Trends For 2009

Washington Post

Washpost3 in Mobile Web Design Trends For 2009

Weather.com

Weather3 in Mobile Web Design Trends For 2009

MySpace

Myspace3 in Mobile Web Design Trends For 2009

Meebo

Meebo3 in Mobile Web Design Trends For 2009

Circuit City

Circuit3 in Mobile Web Design Trends For 2009

Flickr

Flickr3 in Mobile Web Design Trends For 2009

Google

Google3 in Mobile Web Design Trends For 2009

Fandango

Fandango3 in Mobile Web Design Trends For 2009

Food Network

Food3 in Mobile Web Design Trends For 2009

The Onion

Onion3 in Mobile Web Design Trends For 2009

BBC

Bbc3 in Mobile Web Design Trends For 2009

deviantART

Deviantart3 in Mobile Web Design Trends For 2009

MSN

Msn3 in Mobile Web Design Trends For 2009

Best Buy

Bestbuy3 in Mobile Web Design Trends For 2009

Testing Tools for Mobile Web Design

As
with any other type of Web design, testing is a big part of the
process. However, testing websites for mobile devices brings additional
challenges, and fortunately, there are some tools available that were
created especially for these purposes.

W3C mobileOK Checker

W3c in Mobile Web Design Trends For 2009

Ready.mobi

Ready in Mobile Web Design Trends For 2009

Emulator

Emulator in Mobile Web Design Trends For 2009

Openwave Phone Simulator

Openwave in Mobile Web Design Trends For 2009

Opera Mini Simulator

Operamini in Mobile Web Design Trends For 2009

iPhoney

Iphoney in Mobile Web Design Trends For 2009

Blackberry Simulators

Blackberry in Mobile Web Design Trends For 2009

BrowserCam

Browsercam in Mobile Web Design Trends For 2009

Related Resources and Articles

For
more information on mobile Web design, please see the articles listed
below. We’ve also listed some additional helpful resources.

References:

By Steven Snell
January 13th, 2009

http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

Categories
Learn

Social Proof online

by Dan Zarella

In a lot of my presentations and research, I’ve talked about social proof, and I’ve hypothesized that it has an effect on social and viral behavior online, but I had never actually proven it. So a few weeks ago, I began a series of experiments designed to test the assumption that the effects of social proof and social conformity can be exploited on the web.

In the first two experiments, I split tested ReTweet buttons with different ReTweet counts shown on blog posts. First I compared “0 Tweets” with “776 Tweets.” The results were exactly the opposite of what I expected. After 36 hours, the button showing no Tweets had been clicked more than double the times the other button had. The sample size and variation performance are statistically significant, and the results show a 96% confidence level.

While discussing these results with Alison, she suggested that they may have been due to a “first post” effect, where people want to be the first to share a piece of content. So I tested a button showing “15 Tweets” against one showing “776 Tweets.”

While the post I used for this test was more popular, the results of the experiment showed a far less significant difference between the two buttons. The “15 Tweets” button performed marginally better, but the low confidence value means there is probably no meaningful difference between the two buttons.

The results of the first two tests had me questioning whether or not social proof has the effect online I thought it did. My next step was to test the Feedburner subscriber count RSS button, which I believed was perhaps more likely to exhibit traditional social conformity effects.

I began by testing a button displaying “12 Subscribers” against one that displayed “62172 Subscribers.” The higher variation was clicked on a slight .13% more, and again this experiment’s confidence interval is too low to really be significant.

Finally, I decided to test the “first post” effect on the RSS button, by comparing a “0 Subscribers” button against the “62172 Subscribers” button. Again, the 62172 version did a little better, but failed to reach a statistically significant level.

In spite of the insignificant results I found in 3 of 4 tests, I believe my findings are interesting for a few reasons. First and perhaps most importantly, they represent a first step towards “contagiousness testing” which would allow marketers to apply split and multivariate testing methods to content virality.

An elongated test may reveal that higher showing a higher subscriber count on an RSS button, does lead to a small, but significant click-through increase.

These 4 experiments also suggest that there may be a powerful “first post” effect that marketers can leverage in certain situations. I plan to do more research into this in the future.

http://danzarrella.com/new-experiments-question-the-power-of-social-proof-on-the-web.html