“40 Examples of Brilliant Responsive Website Layouts” plus 1 more - Speckyboy Design Magazine Feed

40 Examples of Brilliant Responsive Website Layouts

Posted: 29 Feb 2012 12:23 AM PST

Responsive web design become a very popular trend in 2011. It’s likely something we’ll see continuing well into 2012 as designers are beginning to support a myriad of mobile devices. Building layouts for the web can be tough, but inspiration is a huge factor.

In this gallery I’ve collected 40+ amazing responsive website layouts. These designs are built to support a set of different resolutions and re-size accordingly. It’s tricky building this functionality in HTML5, even advanced web developers may not understand responsive design trends. But check out some of our examples below and you’ll pick up techniques very quickly. Additionally let us know your thoughts or questions in the post discussion area.

Fork CMS

Full View:

Mobile View:

SimpleBits

Full View:

Mobile View:

White Lotus Aromatics

Full View:

Mobile View:

1140px CSS Grid

Full View:

Mobile View:

Atlason

Full View:

Mobile View:

10K Apart

Full View:

Mobile View:

Cognition

Full View:

Mobile View:

Reverse Buro

Full View:

Mobile View:

Sunday Best

Full View:

Mobile View:

Dustin Senos

Full View:

Mobile View:

Clear Air Challenge

Full View:

Mobile View:

Owltastic

Full View:

Mobile View:

320 and up

Full View:

Mobile View:

Yaron Schoen

Full View:

Mobile View:

Build Guild

Full View:

Mobile View:

Do Lectures

Full View:

Mobile View:

Trent Walton

Full View:

Mobile View:

Food Sense

Full View:

Mobile View:

Sparkbox

Full View:

Mobile View:

ribot

Full View:

Mobile View:

Sweet Hat Club

Full View:

Mobile View:

A Different Design

Full View:

Mobile View:

Teixido

Full View:

Mobile View:

Sasquatch Music Festival

Full View:

Mobile View:

Electric Pulp

Full View:

Mobile View:

Stephen Caver

Full View:

Mobile View:

Social Marketer’s Summit

Full View:

Mobile View:

Sleepstreet

Full View:

Mobile View:

Porcupine

Full View:

Mobile View:

Interim

Full View:

Mobile View:

Tileables

Full View:

Mobile View:

CalebAcuity

Full View:

Mobile View:

Simon Collison

Full View:

Mobile View:

Spigot Design

Full View:

Mobile View:

Forefathers Group

Full View:

Mobile View:

Deren Keskin

Full View:

Mobile View:

Robot… Or Not?

Full View:

Mobile View:

Arrrcamp Conference

Full View:

Mobile View:

Thirst Studios

Full View:

Mobile View:

Visua Design

Full View:

Mobile View:

Made by Splendid

Full View:

Mobile View:

Five Simple Steps

Full View:

Mobile View:

Ryan O’Rourke

Full View:

Mobile View:

dConstruct 2011

Full View:

Mobile View:

Diablo Media

Full View:

Mobile View:

Asbury Agile Web Conference

Full View:

Mobile View:

You might also like…

15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
15 Responsive CSS Frameworks Worth Considering →
10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress →

Avoid Translation Mistakes When Designing for Foreign Markets

Posted: 28 Feb 2012 07:29 AM PST

The process of designing a website can present enough pitfalls at the best of times. A good site presents quality content that informs, engrosses and still delivers SEO, all served up in easily digestible, well ordered chunks. It should be clear and easily navigable, with graphics that catch the eye without overwhelming the brain.

Designing a website in your own native language can feel like juggling a dozen flaming clubs. When you factor in cross-cultural, multilingual issues, there are even more things to look out for…

Don’t Make a Translation Howler

Automatic translation programs such as Google Translate and Yahoo! Babel Fish can be incredibly useful tools but they can be prone to contextual mistakes, especially when it comes to slang, colloquialisms, abbreviations and other linguistic variations. Native speaking translators will help you to preserve meaning and nuance to your translated content. They can also help spot any unfortunate connotations that your brand and product names might have within a particular market and prevent you from joining the long list of companies who’ve dropped a cross-cultural clanger…

• Swedish furniture giants IKEA named a new desk ‘FARTFULL.’

• Germany was not entirely receptive of Irish Mist whiskey liqueur, Clairol’s mist stick curling iron or the Rolls Royce Silver Mist model. This isn’t surprising when you consider that ‘mist’ is German for ‘manure’.

• Swedish company Locum thought it would be sweet to send out Christmas cards with the ‘o’ in their name replaced by a heart. The result was unfortunate to say the least:

• Japanese company Matsushita Electric (now Panasonic) were all set to promote their new PC with the slogan ‘Touch Woody – the Internet pecker!’ A handy American visitor was able to point out the connotations and the entire campaign was shelved.

• Pepsi’s ‘Come alive with the Pepsi Generation’ slogan reportedly turned into ‘Pepsi brings your ancestors back from the grave’ when translated into Chinese. Now that’s some powerful stuff.

Your URL should grab the attention – not split the sides

There are some brand and business names that sound fine when spoken aloud. They might look good emblazoned across headed note paper or standing proud above the door of your company’s headquarters. When crammed into a URL, however, that lack of spaces between words can make a world of difference between what you intended the site to be called and what people actually read.

It’s easy enough to be caught out when operating in your own language. Pen Island might well be the perfect purveyor of pens but their www.penisland.net URL suggests something entirely different.

Similarly, www.whorepresents.com does not provide gifts for ladies of negotiable affection but is in fact a resource for entertainment journalists looking to find out who represents various celebs.

When you’re dealing with translations and multilingual and/or foreign language websites, it gets even trickier. Holland’s Hit Festival becomes www.hollandshitfestival.nl while Finnish recipe site www.apetit.fi would do well to internationalize their spelling if they were aiming for an international audience that was more interested in recipes than primate boobs. And then there’s www.lesbocages.com. Surprisingly enough this doesn’t supply coops for same-sex couples but is actually the site of a French tree surgeon (‘les bocages‘ being French for ‘the grove’.)

Disappointingly, UK-based energy company Powergen say they never even had an Italian division, meaning the oft-quoted powergenitalia.com domain is another myth but the point still stands that you should take extra care when naming your website in a foreign language. Write it without gaps, as it will appear, and bring in a native speaker to check for unforeseen connotations. If they collapse in hysterics, consider a new name.

Take extra care with keywords

Even if you use a translation program for sections of your content, you should never rely on straight ‘dictionary’ translations for your keywords. Colloquialisms, abbreviations and other variations may all give better results and a little local knowledge may help you brainstorm these alternative words and terms.

In France for example, where the high-speed train was developed, a common term for the bullet train is the acronym TGV (‘Train à Grande Vitesse’ or, literally, ‘high speed train’). A literal translation of the term ‘bullet train’, for example, would yield little more than a nonsense phrase. In neighbouring Belgium, meanwhile, bullet trains are often referred to as the ‘Thalys,’ referring to the major operator running these trains on the line connecting Brussels to Paris.

Think about your imagery

Different colors can have different connotations in different cultures. In the western world, white is often linked with marriage and purity while in China it’s the color of death and mourning. This doesn’t mean that certain colors should be taboo but your color scheme can certainly have a bearing on the tone you’re attempting to convey.

Similarly, you should be wary of any images you use. The ‘thumbs up’ sign stands for ‘good’ or ‘okay’ in a lot of cultures but in much of the Middle East, parts of West Africa and parts of South America, it’s an obscene gesture.

A lot of care is needed when designing a website for foreign markets. Otherwise you could end up a laughing stock or cause genuine offense – neither of which is particularly good for your corporate image.

Mittwoch, 29. Februar 2012