2010 November | BlogmyQuery

Archive for November, 2010

Nov/10

Desktop Wallpaper Calendar: December 2010

by Smashing Editorial under Feeds, Web Design

in Desktop Wallpaper Calendar: December 2010

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use a specific wallpaper for a longer period of time, it becomes harder to draw inspiration out of it. Thatâ€™s why we have decided to supply you with smashing wallpapers for over 12 months. To make them a little more distinctive than the usual crowd, weâ€™ve decided to embed calendars for the upcoming month. So if you happen to be searching for a specific day of the month, isnâ€™t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 40 free desktop wallpapers, created by designers across the globe for December 2010. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

all images can be clicked on and lead to the preview of the wallpaper;
you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

So what wallpapers have we received for December 2010?

December 2010 Wallpaper

“For December 2010, illustration of myself Wishing” Designed by Benoit Chartron from France.

preview
with calendar: 640Ã—480, 800Ã—480, 800Ã—600, 1024Ã—768, 1152Ã—864, 1280Ã—720, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1366Ã—768, 1400Ã—1050, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 1920Ã—1440, 2560Ã—1600

Christmas Stuff

“Some of the things that come to my mind when thinking of christmas..” Designed by Jaro Mlkvy from Slovakia.

preview
with calendar: 1024Ã—768, 1280Ã—800, 1680Ã—1050, 1920Ã—1200
without calendar: 1024Ã—768, 1280Ã—800, 1680Ã—1050, 1920Ã—1200

Starleaves

preview
with calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Spider web

preview
with calendar: 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Wicklow Winter

“Winter at the Sugar Loaf Mountain in County Wicklow Ireland.” Designed by Neil Bradshaw from Ireland.

preview
with calendar: 800Ã—600, 1024Ã—768, 1280Ã—800, 1280Ã—1024, 1336Ã—768, 1440Ã—900, 1600Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440, 2560Ã—1600
without calendar: 800Ã—600, 1024Ã—768, 1280Ã—800, 1280Ã—1024, 1336Ã—768, 1440Ã—900, 1600Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440, 2560Ã—1600

Fun in the Snow

“A girl and her friend, The Snowman, being silly in the first snow :)I love December. Happy Holidays, everyone!” Designed by Anca Varsandan from Romania.

preview
with calendar: 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1680Ã—1200, 1920Ã—1080, 1920Ã—1200
without calendar: 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1680Ã—1200, 1920Ã—1080, 1920Ã—1200

Peace

“Let’s give our children the greatest gift off all — PEACE! Happy Holidays to everyone.” Designed by Kim Carney from USA.

preview
with calendar: 1024Ã—768, 1024Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 2560Ã—1600
without calendar: 1024Ã—768, 1024Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 2560Ã—1600

Christmas Past

“Christmas old style.” Designed by Carmelo Ortuso from Australia.

preview
with calendar: 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Frosted Glass

“An illustration of someone who wiped a frosted window and is looking down on a town and lake below.” Designed by Shawn Rinkenbaugh from United States.

preview
with calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1680Ã—1050, 1920Ã—1200
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200

Cosy Retro

“Something warm and cosy for a cold December.” Designed by Ron Gilad from Israel.

preview
with calendar: 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1440Ã—1152, 1680Ã—1050, 1920Ã—1200
without calendar: 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1440Ã—1152, 1680Ã—1050, 1920Ã—1200

Burnout 2010

“The Year of the matches is quite over!” Designed by Hansjoerg Schneider from Switzerland.

preview
with calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—1024, 1400Ã—1050, 1440Ã—900, 1680Ã—1050, 1920Ã—1200, 1920Ã—1440
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—1024, 1400Ã—1050, 1440Ã—900, 1680Ã—1050, 1920Ã—1200, 1920Ã—1440

Fresh & White

“Have a break, get out of your Design studio and go breathing. What if we raced or a had snowball fight?” Designed by Maureen Chaffurin from France.

preview
with calendar: 1024Ã—768, 1152Ã—864, 1280Ã—800, 1280Ã—960, 1440Ã—900
without calendar: 1024Ã—768, 1152Ã—864, 1280Ã—800, 1280Ã—960, 1440Ã—900

Sad Waters

“Based on the song Sad Waters, by Nick Cave and the Bad Seeds and Ophelia’s myth. Photography by the author, made in Cantabria the first morning of 2010.” Designed by David Fernandez Rementeria from Spain.

preview
with calendar: 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1680Ã—1200, 1920Ã—1200, 1920Ã—1440, 2560Ã—1440
without calendar: 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 2560Ã—1440

New Santa … New Gifts

“A year’s collection of happiness, wrapped inside a small gift.” Designed by Narendar . N from India.

preview
with calendar: 320Ã—480, 800Ã—600, 1024Ã—768, 1152Ã—864, 1440Ã—900, 1600Ã—1200, 1680Ã—1200, 1920Ã—1080, 2560Ã—1440
without calendar: 320Ã—480, 800Ã—600, 1024Ã—768, 1152Ã—864, 1440Ã—900, 1600Ã—1200, 1680Ã—1200, 1920Ã—1080, 2560Ã—1440

Holly Light

“Warm lights sourrounding our Chritmas Festivities are like a warm touch, a hug from our beloved.” Designed by Ester Liquori from Italy.

preview
with calendar: 800Ã—600, 1024Ã—768, 1280Ã—960, 1440Ã—900, 1600Ã—1200, 1680Ã—1050
without calendar: 800Ã—600, 1024Ã—768, 1280Ã—960, 1440Ã—900, 1600Ã—1200, 1680Ã—1050

Christmas Icons

preview
with calendar: 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Cosy Socks

"One of my favourite months of the year is December. The whole month feels festive and I love the reds and green’s we have everywhere. So to celebrate the beginning of December, here are a pair of cosy red christmasy socks! I have spent all of November creating the design based on the photograph and making it in red for the theme of Christmas. Have a great December everyone! " Designed by Sasha Bell from England, UK.

preview
with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600
without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600

Snowy December

preview
with calendar: 1024Ã—640, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 2560Ã—1600
without calendar: 1024Ã—640, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 2560Ã—1600

Happy New Year

"December is time for Christmas rush, presents and greetings letters! We wish you and your friends all the best and Father Frost (russian Santa Claus) will take care of the rest." Designed by cheloveche.ru from Russia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Fallen Icon Mozart

“This month of December is flooded with commercial apsects of the Christmas Holiday(Thanks Coca Cola) I want to pay homage to a fallen young icon Mozart.” Designed by Jeremiah Selengia from Tanzania.

preview
with calendar: 800Ã—480, 1280Ã—720, 1440Ã—900, 1920Ã—1080, 2560Ã—1440
without calendar: 800Ã—480, 1280Ã—720, 1440Ã—900, 1920Ã—1080, 2560Ã—1440

Snowy Love

preview
with calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440
without calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440

Waiting for Christmas

“I wish you a merry Christmas!!” Designed by yellowbook from South Korea.

preview
with calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200
without calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200

Winter Atmosphere

"I like these cold, gray winter days. Days like these let you savor a bad mood." Designed by Jaro Mlkvy from Slovakia.

preview
with calendar: 1024×768, 1280×800, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1680×1050, 1920×1200

Snow White

"The falling snow, wrapped up warm in colourful wintery gloves. Have a wonderful winter everyone!" Designed by Olivia Bell from England, UK.

preview
with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600
without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600

Inspiring Well

“Celebrating the new coming year.” Designed by Peter Yee from Malaysia.

preview
with calendar: 320Ã—480, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1680Ã—1050

Flower Bokeh

preview
with calendar: 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200, 2560Ã—1440
without calendar: 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200, 2560Ã—1440

The Greatest Gift of All

“Today Christmas is all about buying presents, but actually the most important thing is to have someone to share the Christmas time with. That’s what this wallpaper is all about. The two birds – Milo and Pipita – are a wallpaper series and usually they argue about things men and women argue about. ;)” Designed by Nicole Bauer from Germany.

preview
with calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1200, 2560Ã—1440
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—960, 1280Ã—1024, 1440Ã—900, 1600Ã—1200, 1680Ã—1050, 1920Ã—1200, 2560Ã—1440

Angel

“All writers and reader of the fabulous Smashing Magazine feliz navidad y propero aâ€“o nuevo!” Designed by Fresh&Eazy, Steffen Schmitt from Spain.

preview
with calendar: 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 2560Ã—1440
without calendar: 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 2560Ã—1440

Christmas Eve

“Wishing you a merry christmas” Designed by Ray Templates from India.

preview
with calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200
without calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1200

Khaos

“Photography + Light Painting, a simple way to make design.” Designed by Jose Tenorio from Costa Rica.

preview
with calendar: 320Ã—480, 800Ã—600, 1024Ã—768, 1280Ã—960, 1600Ã—1200, 1920Ã—1200
without calendar: 320Ã—480, 800Ã—600, 1024Ã—768, 1280Ã—960, 1600Ã—1200, 1920Ã—1200

Frozen

“White and blue – like a December with a lot of snow and a blue, sunny sky. Hopefully!” Designed by Lotum from Germany.

preview
with calendar: 320Ã—480, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1200
without calendar: 320Ã—480, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1200

December Dream

preview
with calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 1024Ã—768, 1280Ã—800, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Winter Wonderland

"The design was inspired by the Christmas story with charming characters that bring joy and magic in this festive occasion." Designed by Joâ€¹o Lima Jr. from Brazil.

preview
with calendar: 1024×768, 2560×1440
without calendar: 1024×768, 2560×1440

Waiting for a Winter

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Learn to Recycle

"We should care more about our planet." Designed by Adam Laki from Hungary.

preview
with calendar: 1024×1024, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200
without calendar: 1024×1024, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200

Casual Catwalk

preview
with calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440
without calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440

West Christmas

"In west, Santa Claus uses a .44" Designed by Blackjack.

preview
with calendar: 1152×864, 1280×800, 1440×900, 1680×1050, 1920×1080
without calendar: 1152×864, 1280×800, 1440×900, 1680×1050, 1920×1080

Snowy Ladybug

preview
with calendar: 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200

Happy Festivus

“Seinfeld in 1997 proposed a holiday, Festivus, for the rest of us. This desktop wallpaper reminds us of the non consumeristic nature of Festivus, sit back enjoy a drink and join Kramer, Frank Costanza, Jerry and Elaine in the airing of Grievances and challenge one another to feats of strength after dinner.” Designed by Jenny Heath from USA.

preview
with calendar: 320Ã—480, 1024Ã—768, 1280Ã—800, 1280Ã—1024, 1680Ã—1050, 1920Ã—1200
without calendar: 320Ã—480, 1024Ã—768, 1280Ã—800, 1280Ã—1024, 1680Ã—1050, 1920Ã—1200

Smashing Snowman

“He’s a smashing snowman, isn’t he?” Designed by Megan Burleson from USA.

preview
with calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440
without calendar: 320Ã—480, 1024Ã—768, 1024Ã—1024, 1280Ã—800, 1280Ã—1024, 1440Ã—900, 1680Ã—1050, 1920Ã—1080, 1920Ã—1200, 2560Ã—1440

Join in next month!

Please notice that we respect the ideas and motivation behind artistsâ€™ work which is why weâ€™ve given artists full freedom to explore their creativity and express emotions and experience through their works. And this is also why the themes of the wallpapers werenâ€™t anyhow influenced by us, but designed from scratch by the artists themselves.

Thanks to all designers for participation. Join in next month!

Whatâ€™s your favorite?

Whatâ€™s your favourite theme or wallpaper for this month? Please let us know in the comments! And have a smashing December, folks!

(ik) (vf) (sl)

kranthi Leave a Comment more...

Nov/10

Mobile Development Toolkit

by Cameron Chapman under Feeds, Web Design

Mobile web design has been around for quite a while. Unfortunately, a lot of mobile design guidelines are out of date and focus on low-resolution, non-touchscreen phones. Despite their popularity, there isn’t a whole lot of information out there for designing websites for the new generation of smartphones (iPhone, Android devices, BlackBerry touchscreens, etc.) â€” these devices are growing more and more popular in Europe and North America.

Below are some fantastic resources for designing not just mobile websites, but smartphone-friendly sites. We’ve covered everything from basics to tutorials to usability. If there are other resources you’ve found useful, please share them in the comments.

Development Basics

The articles below give a great introduction to designing for mobile devices, plus more in-depth information. There are both basic, theory-driven articles as well as more technical tutorials.

Designing a Mobile Stylesheet for Your Website
This article from Speckyboy Design Magazine goes in-depth into what you need to consider when creating your mobile site design. It covers everything from allowing for fluctuations in your layouts to hiding awkwardly-proportioned content for your mobile visitors.

In Depth: How to Make Your Website Mobile Compatible
This article dives into the specifics of mobile site development, including topics like device detection and testing.

Website Design for Smartphones – Part 1
This 3 part series from Savvytalk covers all the basics for creating a site optimized for smartphones; also why you’d want to develop for smartphones and how to actually do so.

Tutorial: Making Your WordPress Blog Android and iPhone Friendly
This tutorial gives in-depth instructions on how to make your WP blog show up properly on iPhones and Android devices, without using plug-ins.

How to Write Web Pages for the iPhone and Other Wireless Devices
This page from About.com talks about the basics of designing sites for smartphones like the iPhone. It’s a good primer for what you need to consider before you actually start designing.

Effective Design for Multiple Screen Sizes
This article from MobiForge talks about some things to keep in mind when designing mobile websites for multiple devices, with multiple screen resolutions. Considering that smartphone screen sizes can range anywhere from a couple hundred pixels square up to the iPhone’s new retina display; it’s a big concern for designers.

How To: Make Your Mobile Websites Act More Like Native Apps
This Mashable article offers a number of tools for making your mobile website act more like a native application on mobile devices.

Styling Submit Buttons for Mobile Safari
Here’s a brief tutorial from Think Vitamin about how to style your buttons so they appear correctly in Mobile Safari, including code.

Tutorial: Optimizing Your Website for Mobile Devices
This tutorial shows you how to create a smartphone version of your website that’s based on the regular version. It re-uses elements from the original design to create a site that reinforces your branding and create a unique mobile experience that doesn’t look like just another mobile template.

10 Tips for New iPhone Developers
This article gives in-depth information about creating web apps for the iPhone that work like native apps.

Create a Slick iPhone/Mobile Interface from any RSS Feed
This tutorial from CSS-Tricks shows you how to use your site’s RSS feed to create a slick smartphone interface. The end result is highly usable and has extra flair that’s often missing from mobile sites.

How to Make Your Portfolio iPhone Compatible
This tutorial gives complete instructions for how to make an existing portfolio site work on the iPhone. It even includes instructions for creating a webclip icon, so if users make your site a webclip, it won’t just use a generic screenshot as the icon.

Create an iPhone Optimised Website Using jQTouch
Here’s a complete tutorial for creating a smartphone-optimized website using jQuery’s Mobile library. Full code is included.

iPhone Microsites – Tutorials
This site offers a ton of tutorials for creating iPhone optimized and targeted microsites. Tutorials include how to target content specifically to iPhone visitors, tips for using inline images and also how to create a touch-based sliding UI.

Build an iPhone-Optimized Website with iUI
This tutorial from Webmonkey teaches you how to optimize your website for iPhone visitors using Joe Hewitt’s iUI.

Mobile Web Design: Best Practices
This article from Six Revisions is a great primer for what you need to know when designing for mobile devices. It covers everything from the complications that arise due to different delivery methods to the specifics of structure and code for your mobile site.

Web Apps are Becoming the New Legacy Apps
This article talks about the problems many web apps face in regards to being used on smartphones, and what app creators need to do to be more smartphone-friendly.

8 Ways to Make Your Website Mobile Friendly
Design Reviver discusses a variety of ways to make your existing website more friendly to mobile devices. It includes tips about fluid layouts, centered content, short pages, and more.

Rethinking the Mobile Web
Here’s a brilliant slideshow from UX Magazine that talks about how to approach mobile web design so that it’s accessible on the largest number of devices (not just iPhones or Android phones).

Usability

Usability on smartphones is vital. Usability on the full version of your website might not necessarily translate to good smartphone usability. The articles below can help you fill in the gaps.

Usability Tips for Smartphone Websites
Here’s a brief article that covers usability considerations specific to smartphone website design. It talks about things that aren’t considerations with traditional web design, like leveraging native device capabilities.

Mobile Usability
This article from Jakob Nielsen talks about mobile usability, why it stinks, and how designers and developers can start to make it better. It includes data from real-world studies to back up the claims it makes.

7 Usability Guidelines for Websites on Mobile Devices
This article covers seven basic usability guidelines you should keep in mind when developing mobile sites, based on real user research. Covered are things like not repeating navigation on every page and using mobile-friendly page layouts. It’s aimed at general mobile development, but the principles also apply specifically to smartphones.

5 Can’t-Miss Usability Tips for Mobile Website Designs
Here’s another post with some great specific tips on mobile site usability, though this one definitely focuses more on smartphones.

A Three Step Guide to Usability on the Mobile Web
This article includes not only steps for improving usability, but also a download link to a PDF best-practices guide for mobile development.

Mobile Usability Testing
Here’s a slideshow that gives an overview of what goes into usability testing for mobile sites.

Development Kits

When creating mockups, it’s sometimes helpful to see your design as it might actually appear on a smartphone screen. The GUI kits and other tools here will help with that.

Perfect Multi-Column CSS Liquid Layouts – iPhone Compatible
This site provides a number of CSS-based liquid layouts that work with the iPhone’s browser. They use no JavaScript, no CSS hacks, and no images.

iPhone Application Sketch Template v1.3
This printable iPhone template is great for wireframing mobile sites, and includes a grid for accuracy.

RIM BlackBerry PSD
Here’s a free BlackBerry UI template kit PSD file. It has 135 layers included for all aspects of the BlackBerry UI.

Palm Pre GUI PSD
Here’s a PSD file with a variety of Palm Pre UI elements, free from Teehan+Lax.

iPhone 4 GUI PSD (Retina Display)
Now that the iPhone 4 has a higher-resolution retina display, it’s important to use GUI templates that reflect the higher resolution.

Android GUI PSD Vector Kit
Here’s a free Android vector GUI kit with resizeable elements for creating mockups in any size you need.

Testing

You’ll need to test your mobile site to make sure it’s going to appear as you intended. Here are a couple tools to help:

W3C mobileOK Checker
It’s important that your mobile website is W3C compliant, as it makes it more likely to display across a variety of devices and less likely to break as technologies change (just like it is for regular websites).

iPhoney
iPhoney is a free iPhone simulator from Market Circle. It uses Safari and offers pixel-accurate rendering of web pages. The only downside: it still uses the 320 x 480 pixel canvas, rather than the new retina display size.

10 Awesome Design Examples

What would a roundup of awesome smartphone design tools and resources be without some examples to help inspire your own designs? The designs below are all exceptionally well-done and show just how a smartphone-optimized site should look.

Forever 21
Forever 21, a clothing retailer for young women, do a great job of optimizing their site for mobile viewing. Their navigation is simplified, they put promotions on top but don’t fill the entire screen with them, and include a store locator.

Bloomingdale’s
Clothing retailer Bloomingdale’s places their store locator link prominently on the mobile home page.

Tijuana Flats
Tijuana Flats has obviously what mobile visitors are most likely to want to see: the menu and the restaurant locator, and they place links to each front and center.

Babcock Partners
This is a very polished and professional mobile design, with a simplified navigation and strong visual elements.

Plank
Web design firm Plank has a great mobile site that emphasizes what they do and is very usable.

1 Trick Pony
1 Trick Pony removes navigation on sub-pages on their mobile site, instead opting for a simple “Back” button. It’s a great way to unclutter your design but only works well for sites that don’t have deep navigation.

Wolfram Alpha
Wolfram Alpha’s mobile site is a simplified version of their full site, with the search bar right up top.

Alex Buga
Alex Buga has done a fantastic job of echoing their full site while optimizing it for a mobile browser window. Keeping the same graphic style and using elements of the full design works exceptionally well and reinforces brand identity.

Simon & Schuster
Simon & Schuster probably has one of the more complex mobile site designs listed here, yet they still keep it very usable. Featured content is prominently displayed, as are options for finding other content.

Google Finance
Google Finance maintains a very uncluttered, almost minimalist layout that makes information most likely to be of interest to users easily accessible.

Conclusion

Smartphone design is growing more important on what seems like a daily basis. As more and more people switch to smartphones or upgrade to more powerful versions, smartphone optimization for websites is going to be vital to the success of any website or web-based business.
(ik)

Web Design Leave a Comment more...

Nov/10

The Accessibility of WAI-ARIA

by nospam@example.com under Feeds, Web Design

Web developers interested in accessibility issues often look to WAI-ARIA to bridge the accessibility gap created by ubiquitous scripting and make web applications more accessible to blind and visually impaired users. But can we recommend WAI-ARIA without reservation? Are there times when appropriate semantic HTML elements are preferable to custom widgets?

kranthi Leave a Comment more...

Nov/10

ARIA and Progressive Enhancement

by nospam@example.com under Feeds, Web Design

For seven years, progressive enhancement has been how we build sustainable, interoperable, and accessible web solutions. Now that the release of ARIA is approaching, letâ€™s see how ARIA fits within progressive enhancement strategy. Can we use ARIA in a way that respects progressive enhancement? Can we use ARIA in ways that ensure we have a working solution at every level?

kranthi Leave a Comment more...

Nov/10

U-Turn

by SimpleBits under Feeds, Web Design

I’ve packed up and moved things back to WordPress. As much as I’ve come to love Tumblr, using it as a primary way of hosting your business isn’t a rock solid option right now. Rate limits and downtimes have been on the rise in recent months, and it got to the point where reverting back to owning my own data and setup made more sense.

Luckily, I’ve always had a WordPress installation happily running back on my own server, which was still managing the 10 years of archives that have been sitting around here collecting dust. Reworking the WP templates to handle different post types (links, quotes, photos, etc.) wasn’t all that difficult when running if/else conditionals using categories (I’d been doing this prior to the switch over to Tumblr).

Sill a fair amount to clean up, particularly in the portfolio, but I’ll be posting from WP from now on. That means you’ll want to grab the new (old?) RSS feed here.

I’ll likely still use the Bitstream account here to post random bits that don’t fit on the main blog.

kranthi Leave a Comment more...

« Older Entries

BlogmyQuery – BMQ

Archive for November, 2010

Desktop Wallpaper Calendar: December 2010

December 2010 Wallpaper

Christmas Stuff

Starleaves

Spider web

Wicklow Winter

Fun in the Snow

Peace

Christmas Past

Frosted Glass

Cosy Retro

Burnout 2010

Fresh & White

Sad Waters

New Santa … New Gifts

Holly Light

Christmas Icons

Cosy Socks

Snowy December

Happy New Year

Fallen Icon Mozart

Snowy Love

Waiting for Christmas

Winter Atmosphere

Snow White

Inspiring Well

Flower Bokeh

The Greatest Gift of All

Angel

Christmas Eve

Khaos

Frozen

December Dream

Winter Wonderland

Waiting for a Winter

Learn to Recycle

Casual Catwalk

West Christmas

Snowy Ladybug

Happy Festivus

Smashing Snowman

Join in next month!

Whatâ€™s your favorite?

Mobile Development Toolkit

Development Basics

Usability

Development Kits

Testing

10 Awesome Design Examples

Conclusion

The Accessibility of WAI-ARIA

ARIA and Progressive Enhancement

U-Turn

Categories

Recent Posts

Archives

Pages

Meta

Contributors

Links

Recent Posts

Archives

Tags