Noupe

Mobile Web Design: Tips and Best Practices

2010-02-09T14:15:37Z

By Cameron Chapman

Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices.

For the most part you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. To work around the issues that mobile site design presents, and to get a result that is as user-friendly and useful as your standard site, some creative problem-solving skills are required.

You may want to check out the following related article as well:

Mobile Web Design Trends for 2009

Familiarize Yourself with the Hardware and Software Available

Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. To be able to decide which platform(s) you want to optimize your site for, it would be helpful to familiarize yourself with the different available options.

The most common operating systems in use are Windows Mobile, the iPhone platform, Palm OS, Mobile Linux, Symbian OS, the BlackBerry platform, and Android (which is poised to get a lot bigger thanks to a recent deal between Verizon and Google). There are other proprietary systems specific to particular phones, such as those found on some Verizon handsets and specific brands of phones. You can estimate, based on the type of audience your site targets, which OSs your users are most likely to be using. If your visitors are mostly business users, you’ll need to optimize your site for Windows Mobile and BlackBerry devices. If your users are younger, trendier, or more tech-savvy, you’ll want your site optimized for iPhones and Android devices. In any case, ensure your site is at least usable on the majority of mobile platforms.

StatCounter Global Stats – Top 8 Mobile OSs

Mobile browsers are another factor to consider. Some of the more common browsers include Safari for the iPhone, Android browser, Opera Mobile, WebOS browser (on Palm devices), BlackBerry browser, and Internet Explorer Mobile (on Windows Mobile devices). There are additional browsers in use on Nokia and on other phone brands. Some of these browsers are based on proprietary code, while others are built on WebKit (Android, Safari), Gecko (Fennec, a Mozilla browser) or other common platforms.

StatCounter Global Stats – Top 9 Mobile Browsers

Finally, you need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. Common resolutions for standard cell phones include 101×80 pixels (many Sony Ericsson phones), 128×128 pixels (some Samsung phones), and 120×160 pixels (many Motorola phones). For smartphones, there’s a lot more to work with. The iPhone has a 320×480 pixel screen; the HTC Touch Pro has a 480×640 pixel screen; the Palm Pre has a 320×480 pixel screen; the BlackBerry Storm has a 360×480 pixel screen; and the HTC Venus has a whopping 800×480 pixel screen. Many of these screens can comfortably display a standard website.

Simplify!

Your mobile site, in most cases, should be simpler than your standard site. The only exception to this is if your standard site is already very minimalist. Eliminating graphic elements from your site is usually an effective way to optimize its display on a mobile device. Look for ways to simplify both the design and functionality of your site. This might mean redoing your menus, eliminating images, breaking up text over multiple pages, or otherwise re-working your site’s layout and functionality.

Examples

A List Apart Mobile

The Onion

Amazon.com

Use Valid Markup

Considering the variety of potential operating systems and browsers from which people might be accessing your site, web standards become even more vital. Standard browsers are, for the most part, very forgiving of bad code, but with a mobile browser you often won’t get that kind of leeway. Make sure your code validates is as clean and minimalist as possible.

Give Users the Option of Visiting the Standard Site

Depending on what kind of device your visitors are using, they may want to just use your standard website. This is particularly true with a lot of the better smartphones and the iPhone, the latter of which does an excellent job of rendering standard websites without issue. Give your mobile visitors the option of visiting the standard site, even if it’s just through a link in the footer (where most of us are already predisposed to looking). You could additionally give them the option to come back to the mobile site without having to use their back button.

Examples

Geek Squad

Julian Andrade

Weather Underground

Use a Separate Mobile Theme

While optimizing your main site for mobile use sometimes makes sense, it’s often easier to use a separate mobile theme, which can be done on most CMSs by changing the CSS for mobile devices. A dedicated mobile theme means you can really take into account how your visitors will see your site, and optimize it specifically for them. Some sites have one design optimized for regular mobile devices and another for iPhone users.

Examples

Gamespot

Marmalade on Toast

Watchmen

Limit Scrolling to One Direction

It’s really annoying to have to scroll in multiple directions on a web page when using a standard browser. That doesn’t change when you’re visiting from a mobile device; in fact, it’s worse. It’s very easy to accidentally scroll the wrong way (horizontally instead of vertically or vice versa) when using a touchscreen phone. If your site only scrolls one way, you eliminate the potential for such a hassle.

Examples

Disney

Taltopia

Mogreet

Don’t Use Pop-Ups or Open New Windows

Depending on the particular platform, popups and new windows can interfere with the browsing experience, so don’t use them. If you absolutely need something to open in a new window, make sure you alert your mobile visitors that it will do so.

Minimize the Use of Images

Use only the images you need to get your message across. A logo is fine, as are most icons. Images that are integral to the content on your site are also fine. But eliminate images that serve no purpose other than to look pretty. They generally won’t look pretty on a mobile device anyway, so why bother? And sometimes they just make your site look worse, or cause strange scrolling or layout issues if the resolution is other than what you were expecting.

Examples

Radio Paradise

Raleigh Information

Topix

Optimize Your Navigation

Many mobile devices have touchscreen interfaces, so try to design with that in mind. That means making the clickable area around your links a little greater, making buttons larger, and putting more space between links. Trying to click on tiny, barely-visible links is a real pain, and having to zoom in every time you want to click on something doesn’t make it much better. To improve these navigation issues, many sites use a completely separate mobile navigation design, optimized for touchscreens or non-mouse input devices.

Examples

American Modern Insurance

1M Creative

Daily Horoscope

Don’t Rely on Flash or JavaScript

Not all phones and mobile devices support Flash or JavaScript. Even if they do, there’s no guarantee it will be the most recent version. And forget about Flash if your visitors are using an iPhone. Make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS. Otherwise, you risk a large portion of your visitors being unable to access important content.

Include as Much Content from Your Standard Site as is Practical

How many times have you gone to a favorite website from your phone and then realized you can’t get to the part you wanted to visit? It happens all the time. Include as much of the original site content as possible on your mobile site. In addition to making it available, make sure the navigation route to get to it also remains relatively unchanged.

Examples

The Dieline

Yahoo! Mobile

Volkswagon

Make Sure Redirects Work Properly

Don’t just send mobile users to your home page. There’s nothing more annoying than clicking a link, either in search engine results or from another website, and having it redirect to the homepage if you’re on a mobile device. If your site automatically detects whether a visitor is coming from a mobile browser, make sure it’s set up to send that visitor to the link they were trying to visit, otherwise they’re likely to leave and never come back.

Further Resources

Designing for the Mobile Web
An article from Sitepoint with tips on creating better mobile websites.
Best Practices for the Mobile Web
A great rundown of technical best practices from 456 Berea Street.
Mobile Web Design: Tips & Techniques
An excellent resource for designing mobile websites.
10 Tips to Create a More Usable Web
While not specific to mobile web design, this post from Webdesigner Depot has plenty of appropriate tips.
Eight Tips to Keep Your Mobile Website Readers Happy
A quick rundown of some usability tips for mobile web design.

60 Excellent Gadget Photoshop and Illustrator Tutorials

2010-02-08T12:52:34Z

Designing your own (or redesigning existing) gadgets such as MP3 Players, Game Consoles and Computers is an incredible way to improve your general skills in Adobe Photoshop and Illustrator (or any other design-related software package for that matter). You’re bound to pick up new skills every time, even if you’re considered an expert.

The following round-up of tutorials consists of 60 great gadget tutorials. There is a selection of Photoshop and Illustrator tutorials so you can learn new tricks in two of the most used pieces of graphic software the world has ever seen.

There are hours and hours worth of tutorials to read through, from creating your own custom MP3 player to redesigning the legendary Apple iPods, and designing retro game cartridges to photo-realistic high-definition LCD televisions — this post has it all!

Audio Device Tutorials

The following audio related tutorials consist of MP3 players and iPods, CD players, speakers, headphones and wires. A large selection of the tutorials use gradient overlays to create realistic lighting and shadowed areas – this is definitely a compilation of tutorials you should spend some free time reading if you want to improve your skills using the various gradient tools that Photoshop and Illustrator have to offer.

How to Create a Zen Mosiac MP3 Player (Photoshop)

Designing a Black Zune 2 (Photoshop)

Make an iPod Classic (Photoshop)

Create a 3D MP3 Player (Photoshop)

Creating a Custom MP3 Player (Photoshop)

Create a Detailed Audio Player (Photoshop)

Create a Realistic Video iPod Nano (Photoshop)

Design an MP3 Player (Photoshop)

Create an iPod Shuffle (Photoshop)

Create a Zune in Photoshop (Photoshop)

Design a Vintage Radio Icon in Photoshop (Photoshop)

Create an Audio Receiver Illustration (Photoshop)

Create an MP3 Player Interface (Photoshop)

Create an MP3 Player Illustration (Photoshop)

Create a Skin for MP3 Player Zune (Photoshop)

Creating a CD Player (Photoshop)

How to Create a Stylish Pair of Headphones (Photoshop)

How to Make a Bangin’ Woofer Embedded in Wood (Photoshop)

Design a Vector Audio Speaker (Illustrator)

How to Create Stereo Headphone Plugs (Illustrator)

Create an Old TDK Cassette Tape (Illustrator)

Mobile Phone Tutorials

If learning how to create incredibly detailed buttons is something you want to do, the following tutorials are for you. In almost every tutorial listed below you’ll learn how to use fine strokes to add depth and detail to your gadgets, as well as using plenty of blending modes to add a realistic look to your two-dimensional models.

How to Create a Realistic iPhone (Photoshop)

Create a Nokia 5300 Cell Phone (Photoshop)

Designing a Loox Pocket PC (Photoshop)

Draw a Realistic Cell Phone (Photoshop)

Create a Mobile Phone Styled like the HTC Touch Diamond (Photoshop)

Design an Apple iPhone Mobile (Photoshop)

Create a Sony Ericsson W800 (Photoshop)

Create a Strawberry Mobile Phone (Photoshop)

Create a Realistic Blackberry Style Mobile Phone (Photoshop)

Design a Nokia 5800 XpressMusic (Photoshop)

Draw a Realistic Transparent and Neon Phone (Photoshop)

Create an iPhone from Scratch (Photoshop)

Design a Sleek Nature Themed Phone Advert (Photoshop)

Create a Sidekick LX Styled Vector Illustration (Illustrator)

Create an iPhone Style Vector Phone Illustration (Illustrator)

Gaming Device Tutorials

Due to the many various shapes and sizes in the following collection of tutorials, the only thing that really connects them is the fact that they are all some kind of gaming device, whether they be a gaming console system, a gamepad/controller or even a retro game cartridge. There are hundreds of tips you can pick up in these tutorials, and they are especially good if you are looking to improve your three-dimensional and composition skills.

How to Create a Realistic Game Boy (Photoshop)

Create a Sony Playstation 3 (Photoshop)

Create a Playstation Portable (Photoshop)

How to Draw a Microsoft Xbox 360 (Photoshop)

Design a Nintendo DS Lite (Photoshop)

Designing a Wii Mote Controller (Photoshop)

Create a Super Retro Game Cartridge Design (Photoshop)

How to Create a Super Retro Style Game Controller (Photoshop)

Design a Stylish Retro Game Boy Poster (Photoshop)

Camera Tutorials

Although this category is fairly small compared to the others there is still a lot to learn. Design a Canon digital camera and learn how to create a life-like chrome effect in Photoshop, or brush up on your three-dimensional and gradient skills in Illustrator.

Designing a Canon Digital Camera (Photoshop)

Create An Aperture Style Camera Lens (Illustrator)

Create a Detailed Camera with Photo Icon (Illustrator)

Computers, Monitors and TV Tutorials

If using transformation tools is something you want to be able to place in your skill list, these are some tutorials you should most definitely follow through. You’ll be using several tools to rotate, stretch, warp and distort simple shapes to produce the right composition and shapes to produce models of computers, monitors and televisions – from modern high definition LCD televisions to retro televisions and various editions of Apple Macs.

Create a Slick Black iMac (Photoshop)

LG LCD Monitor Icon (Photoshop)

Creating a MacBook from Scratch (Photoshop)

Make a Realistic LCD HDTV from Scratch (Photoshop)

How to Create a Photorealistic iMac and Magic Mouse (Illustrator)

How to Create a Colorful Retro Style TV (Illustrator)

How to Design the Apple iPad (Photoshop)

Computer Hardware Tutorials

Like in previous sections such as the mobile phone tutorials and computer, monitors and TV tutorials, you’ll be using a handful of techniques in the following category such as transformation tools and gradient tools. Follow these step by step guides to improve your all-round general skills such as making two-dimensional designs appear three-dimensional using only Photoshop or Illustrator, and adding incredible realistic detail using fine strokes and shadows.

Design a Shiny Photorealistic Apple Remote (Photoshop)

Create a USB Stick (Photoshop)

Create a PC USB Mouse (Photoshop)

Learn to Draw a Realistic Bamboo Fun Graphics Tablet (Photoshop)

How to Create a Vector Wacom Tablet (Illustrator)

Design a Colorful USB Flash Stick with Tattoo Style Decals (Illustrator)

How to Draw a USB Flash Drive (Illustrator)

10 Things Clients Look For In a Design Portfolio

2010-02-06T14:17:39Z

By Thursday Bram

There’s no formula for a perfect portfolio. There’s no format that’s guaranteed to land you clients, as long as you follow it. However, there are certain questions that a prospective client has in mind when he’s looking for a web designer. If your portfolio can supply the answers a client wants, you can improve your portfolio’s ability to convince a client and land a new project.

Your portfolio may not be the only way that your clients find you, but it’s likely that most of your clients have at least seen it at some point. In many cases, your portfolio is the first impression you get to make. It is crucial to have a portfolio that is both eye-catching and informative.

1. A Date

While few people will ask just what year you completed a particular project in, a date can be a subtle indicator that answers a lot of questions that a client may have:

How up to date are your skills?
How often do you design websites that are worth adding to your clients?
How long have you really been designing websites?

These aren’t necessarily questions that a prospective client will come out and ask, yet, answering them correctly can make you a client’s first choice. To do so requires choosing sites to include in your samples from your entire career, with a little extra emphasis on more recent sites.

If your portfolio is mostly older pieces, it can be easy to assume that you don’t have much recent experience with web design — which can be a major concern for a client who needs an up-to-date website. In contrast, newer pieces show that you know current web standards and have a good understanding of the technology that a modern website is built on. However, if you’re just starting out, your portfolio will be heavily weighted towards more recent websites. That won’t disqualify you for most projects, but it does make having high quality pieces even more important.

2. Live Websites

When a client sees a website in your portfolio, there’s a good chance that he’ll try to find it online even if you don’t link to it. The ability to click around and see how smoothly the website actually works can be a deciding factor in whether a client wants to work with you. It’s worthwhile to provide the link if you can; unless you’re linking to sites you’ve created for other website designers, you probably don’t need to worry about sending your clients off your website. If they like what they see, they’ll be back.

Providing samples that are live may be difficult in some cases: your portfolio may include some student work or websites you designed as an experiment. A past client may have even had another redesign done since you put together his website. Such situations can be unavoidable, but anything you can do to ensure at least the first few websites in your portfolio are live will help.

3. Tools

Some clients have a toolbox that they rely on for online interactions: perhaps AWeber for for mailing lists or WordPress for blogging. Not seeing a site integrating those tools isn’t a dealbreaker for most clients, but seeing a great design that incorporates the forms and other tools that a client knows he wants may put your name at the top of the list. Unfortunately, there’s no way to predict which tools every prospective client is going to want to see. The best you can do is include a variety of different tools you’ve had the opportunity to work with.

For many web designers, including a description of the tools used in each site is an option when creating your portfolio. Depending on the design of your own portfolio, that description could be a full paragraph or a few phrases. Either way, just mentioning what you incorporated can help your clients understand that you’re comfortable with a variety of tools.

4. Niche

If you’re known for designing websites for a certain niche, your clients are more likely to be members of that niche. That means that they want to see work in your portfolio that applies to them — something that they can point to and say ‘I want that, but in blue.’ While there are both benefits and drawbacks to creating websites for just one niche is that it simplifies how you choose which examples of your past work you include in your portfolio.

Of course, many web designers are generalists. If that’s your situation, making a point of offering some variety in your portfolio is good: you might want to include a website focused on selling a product, a blog and a couple of other options so that prospective clients can see just how well-rounded you are. It’s a marketing decision, no matter which way you go.

5. Style

Many clients start the website development process with a certain style in mind. They’ve likely seen a few websites online that have a general appearance that they’d like to follow. While a client may not be able describe the style they want, he’s likely to look for similar samples in web design portfolios. If you have a variety of styles, you have a better chance of matching the aesthetic a potential client is looking for.

Alternatively, if you have developed a personal style, you can win over more of the clients that are hoping to create similar sites. You won’t get clients looking for other styles, but you also won’t have to match a variety of different styles. Deciding between these two approaches — and therefore the site designs you should include in your portfolio — comes down to a question of the type of sites you want to work on in the future.

6. Specific Skills

Are you particularly good at developing a front end? Can you write PHP in half the time it takes other web developers? A prospective client will want to know your skill set to make sure you’re the best fit for his project. Offering a clear way to tell what techniques and technologies you used in each of your website designs can make sure a client gets what he’s looking for, especially since it’s not always easy to tell just where you’ve personally excelled in a particular design.

Offering a brief description along with each website you include in your portfolio is the easiest approach, especially if you’re already planning on including information like the date and tools used. The following information may be a good fit:

The ways you’ve used your skills to speed up production
The ways your skills make a website stand out
The technologies you’re particularly proficient with

7. Context

More than a few portfolios are just a series of images. If you can provide some context to your prospective customers, it’s easier to convince them that you’re offering the right web design services for them. That can mean something as simple as adding a short description about the sites you’ve included in your portfolio.

Here are a couple of questions that can be used to create a short paragraph about any site in your portfolio:

What was the client’s goal for the new site?
Where there any special challenges (custom technology, small budget, etc.) in this project?
How was this project received?

8. Responses

For many prospective clients, having an idea of how your work was received by past clients can be a particularly useful factor in choosing whether you’re the best designer for their job. While describing the client’s reaction to a project you’ve included in your portfolio helps, a little more information comes in handy if you have it. A testimonial, for instance, can be very effective, especially when you can pair it with the design that elicited that reaction.

Another useful way to demonstrate reactions to your design is to include any awards a new design won or any press it received. The press can be easier to find: depending on your client and how recently the project was completed, you may be able to find some comments on the new design that you can link to. Don’t overlook blogs or even company newsletters — such reviews are more likely to come from someone who actually has to use the site. You can even help to create some of that press yourself by taking steps like submitting your work for awards or at one of the numerous critique sites out there.

9. A Well-Designed Portfolio

In a way, your portfolio is just as much an example of your abilities as a web designer as the work it showcases. A client doesn’t necessarily expect Flash and fancy designs in a portfolio, but he will expect to see at least an attractive layout that shows off your work to an advantage. After all, the time a web designer will put into winning over a new client often has a direct relationship to the amount of time he’ll put into that client’s projects.

Don’t forget the technical details when creating your portfolio, either. Both little details, like making sure every link works, and big details, like having your own domain name, may seem like they wouldn’t matter much to a prospective client, but their absence can do a lot to put your name at the bottom of the list.

10. Your Best Work

When a client looks at your portfolio, he’s likely thinking two things: First, the website designs you’re showcasing are your best work. Second, he’ll get work on that level when he works with you. The two ideas may seem to contradict each other, but, in the end, every client wants your highest level of work. That means careful selection is in order to ensure that you can both impress a prospective client and you can live up to the promises your portfolio makes.

It’s not always possible to put your best work in your portfolio, unfortunately. A website design may be under an NDA or a client may simply ask you not to use a particular project in your portfolio. But even if you have to go out and create a new website of your own or take on a charity project, it’s important to have excellent work in your portfolio.

About the author

Thursday Bram is a full-time freelancer who has been working on her own for more than seven years. She writes about the business side of freelancing and maintains her own website at ThursdayBram.com.

Free Saint Valentine’s Day Icon Set

2010-02-06T14:48:45Z

Today we are glad to release Valentine’s Icon Set, a set with 10 free icons in resolutions 32×32px, 48×48px, 128×128px and 150×150px in formats .ico, .png and .icns. This set was designed by Iconsmaster and released especially for Noupe and its readers. The set was created from scratch using Adobe Fireworks — the .png-sources are available for free download as well.

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

preview
download the set (.zip, 0.8 Mb)

Behind the design

As always, here are some insights from the designer herself:

The cheerful icons from the set can be used either by Windows or Mac users to decorate their desktops or web pages, during Saint Valentine’s Day or at any other time, when they feel love in their hearts. Anyone can use our icons in *.ico or *.icns format to replace standard desktop or other application icons. Also we released icons in png file format, so they can be used like a decoration on personal web pages or like presents in social networks. The Icons Set is free for download and commercial and non-commercial use, without any restrictions. Consists of 10 custom-made icons in resolutions 32×32,48×48,128×128 and 150×150 .png.

Thank you very much! We appreciate your efforts.

55 Conceptual Examples of Surreal Artworks

2010-02-05T14:43:58Z

By Aquil Akhter

Surreal Art is getting so much attention because it lets an artist freely express his creativity, feelings and the way he thinks. It is the medium of art in which you can showcase your talent and creativity in the most meaningful and the most intangible way. This is the main reason why Surreal Art is getting so popular these days. We have compiled a list of some inspirational Surreal artwork for you. Hope you’ll like this collection. Just drop us a line here and tell us which one you like most.