Why your website content shouldn’t be an elephant

You’ve spent months planning and talking about your new website.   Agencies have been interviewed and briefed, you’ve looked at designs and waited patiently for the build to finish…but one thing is missing.   Content.

Content is often the last thought but it should be one of your first. Writing what goes into your website at the beginning:

  • Helps you focus on the structure and aims of the site.   By thinking through what will go on the site, you are more likely to drop redundant sections and develop better ones.
  • Assists web designers in producing better more accurate designs.   What you have written informs and inspires them about your company.
  • Minimises development time – you will receive a test site that is 95% complete, leaving you free to concentrate on fixing bugs and making final tweaks, rather than feeling the pressure to produce hundreds of words.
  • Gives you a head start with SEO.   With your content written, you can start planning your SEO strategy and give your site the best possible launch.

Creating content can quickly become an elephant – weeks away from launch it is a small speck in the distance. Suddenly it’s large and looming. One of the biggest reasons people put it off is that they are unsure how to write engaging copy, and copy that will work for SEO. Good copy can reap big returns so it is worth taking the time to research how to do it properly. Check out our Top Ten Tips for Web Copy and the Short Guide to SEO from MintTwist and kick start your content today.

BBC to roll out new visual language!

The BBC’s website is today well established as arguably the most cutting edge, the most current and the friendliest to users. The website is much more than just a page rank of 9 and pages of english language! It is a website which not only hold top quality content, but carries with it the impeccable reputation the BBC has built up over decades of impartiality.

The BBC is a publicly owned organisation, which means that the BBC website belongs to the people. As a result there is tremendous affinity and popularity for the site.

Although if you were to look at the site in 1997 you might be a little disappointed as you can see below.

BBC homepage 1996

BBC homepage 1997

This was a basic offering with two sections to the site. Over time it has grown to encompass a great deal more. However due to the organic way in which the website evolved and the old structure of the business, with dozens of small design teams working independently of each other, the site had a fairly schizophrenic nature once you delved into its depths.

About 2 years ago, after printing out the site onto what has now become jokingly known as the ‘Wall of Shame’ the BBC decided to embark on an ambitious project, called Global Visual Language 2.0, with the aim of unifying the visual and interaction design of bbc.co.uk and the mobile website.

The Wall of Shame

The BBC created a new wider, centred page template to take advantage of wider screen resolutions and for the first time created an underlying grid. They rationalised the hundreds of different banner styles into a new global and local branding and navigation system.

The scores of different audio and video players were discontinued and they created a universal embedded media player. They also redesigned the homepage creating a visual style that began to ripple through the site and onto the mobile platform.

BBC HomepageThe BBC showed excellent mastery of ‘web 2.0’ which is an approach that has been adopted by many other businesses and organisations. However the BBC now believes it has served its purpose and it is time to move on.

They have set out to broaden their ambitions to create a design philosophy and world-class design standards that all designers across the business could adhere to. They want something distinctive and recognisable and they knew whatever was created needed to be truly cross-platform and that with simplified user journeys.

The BBC didn’t do it on all by themselves. Together with representatives from across the business, led by the project’s Creative Director, Ben Gammon, they formed a Global Design Working Group, and created a GVL Steering Group to help manage and direct the course of the project. The BBC also approached the industry to find a partner to co-create the styleguide: Neville Brody and his agency, Research Studios.

Over the last four months, they have spent countless hours and created countless iteration designs, components, mastheads, footers, polar maps, word documents, pdfs and grids… and this is all still a work in progress.

They are creating a design philosophy, or a set of values, to unite the user experience practitioners across the business and have settled on nine keywords which sum up what they’re about and what they’re trying to achieve:

Modern British
The BBC want to create a modern British design aesthetic, something vibrant and quirky that translates outside our national boundaries.

Current
It needs to feel current and reflect what’s happening in the UK right now, in real-time with links to the past – to a rich archive.

Authentic
Need to sound authentic and relevant, warm and human.

Compelling
The BBC engages the audiences with compelling storytelling with voice ranges from serious and authoritative through to witty and entertaining.

Distinctive
Standing out from the crowd, the BBC is bold and dramatic.

Pioneering
They pioneer design innovations that surprise and delight.

Joined-up
All services and platforms as one connected but deliver experiences that are sensitive to their context of use.

Universal
The services are open and accessible with simple, useful and intuitive interfaces.

Best
The BBC’s ambition is to be the best digital media brand in the world.

In doing this work they have begun to distil the essence of a new visual style. Taking inspiration from many sources to try and achieve “an underlying grid system that was flexible enough to enable many unique design variations whilst still feeling coherent and considered.”

The new grid is based on 31 sixteen pixel columns with two left hand columns that can be split into four, and one wider right hand column.

A key feature of the new GVL is a much more dramatic use of typography. As well as Gill Sans they have introduced big bold type in Helvetica or Arial and restricted variations in size so that we have much greater consistency across the site.

Below and on the left is an example of it all pulled together on a new story page, and examples of typography styling in promo drawers. It is focused on signposting and articulation; you can see the time stamping treatment and signposting for live content.

The BBC wanted to create something that is flexible enough to allow all the brands their full expression whilst uniting them into a coherent user experience.They also wanted to strip out any superfluous decoration and allow the content and imagery to shine through which we find exciting and refreshing

The final push is to finalise the masthead and footer. They are also looking at mobile, IPTV and social elements on the page (social bookmarking, share functionality, comments, ratings, reviews etc).

As to when exactly this will go live, it is hard to say. There will need to be a significant test phase because maintaining their status as a very reliable site is very important. But considering they are in the latter stages of the build it could be as soon as this summer, but we may have to wait until the winter. Whatever the case maybe we are looking forward to its arrival.

MintTwist – Web Design in London, UK – refreshing the web

Making your website work for you

Times have changed. The information age is fully upon us.  Customers now have the ability to instantly compare prices, services, and products, and shop 24 hours a day, 7 days a week 365 days a year. Not to mention the ability carry around a high-speed wireless connection to the entire world in their pocket or purse!

Although the computer revolution that started thirty years ago is still not mature, the novelty has worn off. The Internet is a part of everyday life for nearly everyone, from tiny children to grey-haired grannies. The dust from the upheaval of the last thirty years is settling and everyone can see the competitive landscape more clearly.

Regardless of what the techies or web gurus say, as a small business your website probably isn’t going to bring you vast hoards of customers from around the world, let you compete with the “big boys” in your industry, or make you rich.

It’s just not true.

What your website can and should do, however, is be a powerful tool to attract your hottest local prospects and activate your existing customers.

More and more customers are going to go on-line to get your telephone number, see if you’re open on Sunday, find out if you carry a brand of products they are looking for, see what’s new at the store this month, or get directions to your store.

Many of your hottest prospects are comparison shopping on-line before they decide which store to visit in person. They are “checking you out” and if what they find on-line doesn’t match up to your competitor’s you could be out of the running.

For example, let’s say I wanted to buy a new mountain bike. One of the things I’d probably do is search on-line for local for bike shops. I’d browse around on their sites (just like I might if I was actually in their stores) to see what bikes they had to offer, check out how knowledgeable they were, how professional they seemed, what kind of post-sale service they provided.

Just based on that web experience alone I might make a decision about where I was going to buy my bike. At the minimum, I would rule out any places that looked like they couldn’t give me a good buying experience.

This scenario takes place thousands, maybe millions, of times a day in your selling area for a huge variety of goods and services. That’s why every single store should have website with a minimum of 3-7 pages about their business and possibly many more.

This type of website is basically an e-brochure. It’s the high-tech version of the print brochure you give to promote your business to customers. It’s also becoming the high-tech version of your yellow pages ad.

So is it worth the cost of a website just to have an electronic brochure? Absolutely. How much would you pay for a magical print brochure that just showed up whenever your customer was wondering about your store or thinking about buying what you sell? Remember, websites don’t have to be expensive to be good.

30 Examples of Attractive Navigation

Web designers always have to strike a balance between usability and visual appeal when designing a website. Without this balance, a website might be nice to look at or difficult to navigate. Or, it might be easy to navigate, but not easy on the eyes. With this in mind, balancing attractive navigation with usability does not need to be overly difficult. To help you generate new ideas and inspiration for user navigation, here are 30 great examples of attractive and usable navigation.

See the full article from www.webdesignerwall.com here:

May 25

Tagged in: Comments:Add

30 Examples of Attractive Nav

advertisement

Guest Post by Joel Reyes

Web designers always have to strike a balance between usability and visual appeal when designing a website. Without this balance, a website might be nice to look at or difficult to navigate. Or, it might be easy to navigate, but not easy on the eyes. With this in mind, balancing attractive navigation with usability does not need to be overly difficult. To help you generate new ideas and inspiration for user navigation, here are 30 great examples of attractive and usable navigation.

Typographica

This site features the simplicity of an attrractive menu that empowers users with undeniably easy to follow navigation. If you hover over the headline under the logo you will see that the word “Type” remains highlighted, and as you begin to hover over the rest of the words you’ll be able to clearly select the corresponding area you’d like to visit.

Screenshot

Atebits

Links are in the form of icons that feature a neat effect that allows the icons to light up as you hover over them. It’s simple, subtle, attractive, yet effective.

Screenshot

Contrast.ie

The navigation on Contrast.ie displays a unique approach to creative styled menus. All of the buttons are placed in a comment shaped figure and pop out as you hover over them.

Screenshot

Search Inside Video

The navigation on this site clearly directs you in the form of an arrow as you hover over them with your mouse. Effective navigation leaves behind complex design. Seems as though this site made use of this suggestion.

Screenshot

Leihu

This site takes creative navigation to the sky. If you look to the left and mouseover the guy you will see a smile appear, if you mouseover the icons and images you’ll instantly see a description next to the mouse’s pointer as well.

Screenshot

Forty

Forty uses a creative, image-based user navigation. The arrows “guide” the users attention to the buttons and invites the user to click on them.

Screenshot

Healogix

Healogix asks the four most important questions of itself with large text that draws the users attention. When, what, why and who? Can all be answered one click away from the homepage.

Screenshot

Ideas on Ideas

There is only one main link to the home page, but the idea is both creative and usable. The link is prominent and it “speaks” to the user. Users, in general, enjoy web pages that they can interact with.

Screenshot

Sarah Longnecker

The navigation of this website is simple and easy to use. The banners behind the selected page make the navigation easily identifiable from the rest of the page.

Screenshot

Made By Elephant

Made by Elephant features large and easy to use navigation. The blue text also adds a nice contrast to the heavier red and black.

Screenshot

Work at Play

As you begin to click through the menu of this site, you’ll be able to notice that the position of the background and color of the entire site quickly change.

Screenshot

Clear Left

The menu on this site resembles that of a post it note as you mouseover the links. Then entire layout of the site is based on this concept.

Screenshot

Pattern Tap

As soon as you enter the site you’re greeted by a green arrow that feeds you information about every section as you scroll through the site. This makes it easer for users to interact with the site.

Screenshot

Unstoppable Robot Ninja

The navigation is as bold as the name of this website. Furthermore, it also enhances the design tremendously.

Screenshot

Red Nose Day

The main navigation links fit in well with the playful theme of the website, while maintaining usability and prominence.

Screenshot

Polar Gold

This text-based navigation features a colorful and playful look while maintaining usability without the use of Javascript, but Flash instead.

Screenshot

Webpage FX Blog

A unique and interesting take on navigation. The links to the home page and blog are featured in a sentence across the header of the page. It does not violate usability principles, it is easy to read and highly effective.

Screenshot

Opera Ma-gé

The main navigation is easy to find, and the green underline creates uniformity between the navigation and the rest of the page.

Screenshot

Owltastic

Owltastic is a perfect example of good user experience. Every element of the main navigation animates when the user hovers the mouse over it. Like other examples on this list, the navigation is also prominent and easy to locate.

Screenshot

Guillaume Pacheco

Like Owltastic, this website interacts with the user as they mouse over different elements of the page. The site is well laid out and easy to navigate.

Screenshot

Full Cream Milk

Full Cream Milk uses a distinct text-based navigation, as you roll over the links, a portion of the top of the page is highlighted. This is a great example of navigation that is pleasing to both users and search engines.

Screenshot

Arca Lui Noe Hotel

This site features user navigation that is both beautiful and easy to use. It is very stylish and adds to the overall design of the page.

Screenshot

Sushi & Robots

Sushi and Robots uses elegant Typography to create a beautiful and attractive navigation that stands out.

Screenshot

Sharify

Sharify features a monochromatic user navigation that is pleasing to the eye, and usable because of the contrast between the white text and the sky blue background.

Screenshot

Stephen Caver

Here, the navigation is essentially the first content you see on the home page. It is “clean” and easy to use. Moreover, the use of whitespace in the navigation is excellent.

Screenshot

Thought and Theory

This site takes a minimalist approach to navigation, and it simply works. It does not take anything away from the page or distract the user.

Screenshot

Slightly More

Again, the high contrast black and white adds to the usability of the site. The javascript rollovers are light blue tabs that add interactivity and aesthetic value.

Screenshot

Ulster Grocer

The navigation makes use of bright colors, easy accessibility and unity with the blue background of the main content of the page.

Screenshot

Adaptd

The Adaptd site features creative, easy to follow, and beautiful navigation. The aspect of this navigation that stands out the most is located in the section where the portfolio resides. When you place the mouseover these buttons the words become transparent blend in with the sites background.

Screenshot

Sac Jazz Festival 2009

This site has navigation that the user does not even have to search for. In addition, the vibrant color of the navigation adds even more color to the page. The elements of this design blend together seamlessly.

Screenshot

Delicious Stumbleupon Digg

30 Untypical WordPress Sites Microsoft Event & Free Giveaways

Comments

Pages: 8 7 6 5 4 3 2 1 » Show All

There are 79 comments (+Add)

  • 79 Jessie Matanky http://jessiematanky.com
    July 28th, 2009 at 11:09 am

    I really liked these- these sites seem to be up on all the blogs & web design sites for all sorts of different stuff. They should be proud.

  • 78 chris
    July 20th, 2009 at 8:22 pm

    Be sure and check out the page source for the Slightly More site, includes some ascii art and text! Very shocking and funny.

  • 77 Nashville Web Design Guy http://www.nashvilleinteractive.com
    July 15th, 2009 at 2:31 pm

    Very diverse range of styles and functionality on the list. Very nice compilation. I tend to lean toward linear navigation if it can fit at all into a project. I like to lead people through the experience. It’s not always feasible of course but a nice change for users and it allows you to gauge interest pretty easily via analytics.

  • 76 London web design http://www.totallydesignlondon.co.uk
    July 11th, 2009 at 12:57 pm

    Yeah this is well nice!

  • 75 egypt web design http://www.egyptwebdesign.com
    July 7th, 2009 at 6:43 am

    great article thanks for share with us, really great list.

  • 74 yapidekor http://yapidekor.blogspot.com/
    July 6th, 2009 at 1:51 pm

    Thank you my friend …

  • 73 matrax http://multimanyak.com/matrax
    July 3rd, 2009 at 2:17 pm

    Your site and your content to a really great hand healthy;)

  • 72 Bernard Teske http://www.bernardteske.de
    July 1st, 2009 at 7:46 am

    In this webside, http://www.druckundrepro.de you can use the navigation in the left side or use the cursor like a “hand-tool”. Think this is also an interesting way :-)

  • 71 Rob http://robstathem.com
    June 25th, 2009 at 10:24 pm

    @ Joe…I don’t think your rude behavior is appreciated by anyone in this forum. I would automatically delete your outcast behavior, and so should the designer of this website.

    There’s no need for your attitude. Take it somewhere else!!!

  • 70 Rob http://robstathem.com
    June 25th, 2009 at 10:21 pm

    Fantastic!! Thanks for posting these examples of awesome navigation! I’ll admit, it can be real exciting adding different design touches to the navigation!

    I tend to design the navigation based on the style of my website. For elegant designs, I tend to use subdued text for links or maybe a subtle roll-over. The hotel website listed above is definitely an elegant type of roll-over!

    I think it’s probably important to note that when doing roll-overs, image based roll-overs should be done with CSS instead of JavaScript. The JavaScript is a bit clunky and CSS just makes it a little cleaner. Just my personal opinion!

    :) Rob

Pages: 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

Name (required)

Mail (required)

Website

Comment Guidelines

Live Comment Preview

Back to top

// W3Counter Web Stats <p><a href=”http://www.w3counter.com&#8221; mce_href=”http://www.w3counter.com”><img src=”http://www.w3counter.com/tracker.php?id=5996&#8243; style=”border: 0; display:none” alt=”W3Counter Web Stats” /></a></p>

// //

Step by Step guide on uploading a website via FTP

One thing web designers can never avoid is having to use FTP software to upload a website; there is practically no other way to get a website onto the hosting server short of going to the actual server and uploading it physically with a USB stick.

How to Upload

In this step by step guide we will be covering how to upload a website via an FTP Client and what checks to do to ensure that the website is fully uploaded and there were no errors in uploading, the FTP software we will be using in this guide is “Filezilla”, it is a basic FTP software with all the functions you would expect from standard FTP software.

Step one

The first thing anyone can do before uploading is getting software to upload unless of course you already have some. Dreamweaver does come with its own FTP software inbuilt but it tends to be unreliable, slow and quite irritating with its constant messages asking if it should upload dependant files, though this is good to remind web designers not to forget to upload other files it can get slightly annoying. But if you already have FTP software you can just skip down to step two.

One good alternative to the Dreamweaver FTP client is “Filezilla”; it is reliable, fast and best of all free! They have 2 versions, Client and server but we won’t go into that in this guide.

The client version is the one you want so the first thing to do is to download it and install it.

Step two

Assuming you have already installed your FTP software there are two important things that you must have before you upload anything anywhere, and those things are:

1. FTP Hostname

a. This is usually something like yourdomane.com or ftp.yourdomain.com

2. FTP Account (username and password)

a. This is an absolute must comprising of a Username & Password, you need to have an FTP account set up before you can access the server, this is usually set up in the control panel where all the other settings are done to do with the hosting, so if you don’t have any of these details just log on to the control panel of your hosting account and get the details, the FTP details section should be easily spotted once you are in the control panel.

Now that you are armed with the information you need all you need to do is start up the FTP client and the first things you will notice are the log in boxesand the directory displays and an empty box.

So what do I do know? Some of you may have already logged in – but for those who like to follow instructions to the letter; now what you have to do is input your details in to the equivalent boxes and you should see some activity which is the FTP client making a connection with the server and attempting a connection with the credentials you punched in if successful you should see the directory that your account has been set to see on when you log in and could have some folders called www or htdocs open up htdocs or if it doesn’t exist then www, it could also be that you account is set to load inside the correct folder anyway so it may be completely empty if that’s the case you can just upload to the current directory.

Step 3

Now that you have logged in and if needed went to the correct directory you are ready to upload a website and it’s as simple as dragging and dropping the files and/or folders to the server directory you can either manually go to the folder on your computer and drag and drop or use the local directory shown below to browse to your files.