Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


Web Design Tips & Advice from A to Z

Posted on

Web Design Tips - A

This is a guest article from Natalie Schnotz*. Enjoy her web design tips.


Avoid flashy multimedia. Flashy graphics and multimedia may look nice, but they can make it hard for your visitors to get the information they want from your site, especially when viewing from a non Flash compatible device.

Browser compatibility. Make sure you check your page on Internet Explorer, Firefox, Opera, Chrome and Safari & their different versions. These five web browsers make up about 95% of the world’s browsers. So, test your site out on each of them.

Clean layout. Don’t fill your page up with ‘stuff’. White space is good – it enhances the look of your site. Try to keep your content as the focus of your site. Use fonts that will be available on all computers so your page doesn’t end up looking messy.

Design for all screen resolutions. If you design stretch layouts that can fit any screen resolution, you can ensure all your visitors see a visually appealing and professional site. A site that is easy to use and appealing to the eye will encourage your visitors to stay longer.

Exclamation points! Typing millions of exclamation points doesn’t make your statement any more important than if you use just one!!!!!!! See, I told you.

Frames. Don’t use frames. While frames make it easy to have the same header or menu appear throughout the site, the address bar doesn’t change when you go from page to page – making it impossible for someone to link to a specific page.

Grammar and spell checker. Sure, people who are not good spellers will never notice you spelled calender (spelled calendar) wrong but literate people will notice. Try your best to fix up your spelling & grammar.

Hotlinking. Any pictures or music that you link to should be hosted on your own server. Don’t hotlink to other site images – it’s typically considered theft of bandwidth and you could be violating a copyright.

Identity. Ensure your site has a brand identity that reflects your brand values. Try to avoid cliche stock imagery.

Just keep swimming. (Yes, that’s a Finding Nemo reference.) Don’t give up. Sometimes your ideas won’t work, but just keep swimming. Today people tend to quit or give up too easily. With a little hard work, you’ll find most of your ideas are actually possible.

Web Design Tips - K

Keep learning. Stay up to date with news by reading design blogs or try learning a new web language. There is no reason to stop learning about web design just because you’re page is up and running with decent traffic.

Load time. Make sure that your load time is low. In our fast-paced world, we don’t like to wait. I want to see your web page and I want to see it NOW. Try minimizing graphics, flash and scripts as they increase your file size. Also, make sure to optimize your code and delete any unwanted tags or unused scripts.

Minimize clicking. Put as few clicks between your visitor and your information as possible. The more you force your visitors to click around your site, the more you are telling them to go away.

Navigation. Site navigation plays a huge role in determining how long visitors stay and explore your site. If you have an easy to use navigation system, you’ll keep your visitors around longer.

Organisation. The way you organise your content, is as important as what your page looks like, so spend some time on it. If your readers can’t find what they are looking for, they’ll just go look someplace else.

Page length. While you want to make sure you put a lot of information on each page, don’t go too far by putting too much information. If you are posting really long articles, try chunking them into separate pages with six or seven screenfuls to each page.

Quit stealing content. Don’t copy and paste text from another website without asking the site owner for permission. Search engines know if you are copying content and they don’t like it – they’ll lower your page rank without asking any questions. See SEO tips.

Readable text. Make sure your text is big enough to read. I know, you’re probably thinking ‘thank you captain obvious.’ Well, I hate to state the obvious, but I am amazed at the number of sites I go to that I have to squint to read. Please, don’t punish me for actually wanting to read your content.

Scalability. Make sure that your design and coding are scalable. Technology is changing rapidly, screens are getting larger (and smaller too), making it hard to test your site on all screens and platforms. Making a scalable site is crucial with the way technology is constantly changing.

Text lines. Learn a lesson from the newspapers. The reason why newspapers print articles in columns is because it makes the lines short and easy to read. So, as a general rule of thumb, no line of text should be more than about 600 pixels wide.

Use contrasting colors. It’s hard to read dark text on a dark background and light text on a light background. I know this tip is obvious, but remember that some color combinations just don’t work.

Valuable content. Give your visitors a reason to stick around. Provide them with valuable content. They’ll be happy and keep checking out your site.

Windows. It’s a good idea to pop up brand new windows for external links – that way your reader can continue reading your content and look at the other site. However, if you are directing them to another page on your site, use internal links. Opening links in new windows means that after five clicks within your site, your reader has six windows open cluttering their screen.

Editor’s note: This has has been debated before and I personally prefer having all windows open in the same browser.

eXplain what you’re linking to. Don’t just put a link in the middle of your article for no reason. Take a second to tell your readers why you think they should click the link. By telling them what you are linking to, you are giving them a chance to decide if they really want that extra information.

You don’t need permission to link. There is no reason for you to contact the site owner asking if you can link to their site. The reason their page is online is because they want to share it. So, if you want to link to a site… just do it.

Z - Z is a letter that Americans use in such words as ‘specializing’ and ‘criticize’ however you should be aware that other countries spell these words with an ‘s’. Brush up on your spelling differences, so you’re not later criticised.

Web Design Tips - Z

*Natalie Schnotz is a recent graphic design graduate and an avid writer. When she’s not on her computer designing, you can find her reading fantasy books, crafting and cooking with her chef husband.

Have you got any further web design tips to add?

Photo Credits: Shutterstock

SUBSCRIBE: RSS, Email, Twitter, Facebook



Related Premium Imagery


39 JUST™ Creative Comments

  • Andrea Reply

    Nice! I like the creative approach (A-Z). :)

  • Marcin Reply

    Nice list. However I felt like reading tips from 10 years ago. Testing website in Netscape Navigator? That browser is completely dead, nobody is currently using it. You forgot to add Google Chrome, 3rd most popular browser.
    Also frames are dead. No self respecting designer would use them.

  • Stephen Reply

    You’d be surprised how many people use old browsers, most people using windows xp don’t take the time to expand beyond the version of internet explorer that comes with it. The same with framesets, I can recall at least 4 people at my school who use framesets still. It’s just something that’s simple for them.

  • Jacob Cass Reply

    Marcin,
    I agree about Navigator, it’s hardly used so I’ve removed it and added Chrome. As for the frames, it’s surprising that people still use them so I still think it’s a valid tip for the rookie web designers. Thanks for your comments.

  • frontendesign Reply

    Hi Natalie, Thumbs up for your approach in summarising all this. I really enjoyed and learned a lot. :)
    Thanks

  • raybak Reply

    Thats a nice way to share web design basics, looks like a proper guideline .

  • Pui Sittivliai Reply

    I know that many of these tips are the basic of how to manage a website, but for me they are very important. I am sure these tips will be useful for many people (including me). Thanks for sharing Jacob!

  • Harold Reply

    Awesome! All the A-Z points make complete sense. I’m a recent design graduate and looking for graduate jobs or paid internships to kick start my career. Any advise would be welcomed.
    I shall check back again!

    But thanks for sharing! :)

  • cory thompson Reply

    Very good guideline sometimes we forget these things and get stuck.

    thanks for sharing.

  • Eddie Reply

    Thanks for these great tips Natalie. The Minimize clicking tip is a very important one as you should not have more than 3 clicks to find a page within your site.

  • Berenice Weber Reply

    great article! loved the format… and YES i agree that some users still surf the web with Explorer 6 (the most horrible yet most popular browser ever!) if all users used Firefox of Chrome then our jobs would be easier, huh?

    thanks for all the tips, even if they seem somehow obvious, while you are designing and trying to fit content sometimes is hard to keep all the concepts fresh and clear

    this can be totally used as a check-list for good practices on websites

    AND can be used to show other members of your company what should be done or not while designing your website

    really helpful! thank you!

  • Luke Reply

    Hey Mate,

    Another great article. It’s great timing because over the past two weeks I’ve picked up 6 new website design and development jobs. I already knew most of this stuff, but it’s great to have a list to check over to ensure I haven’t fallen into any traps!

    Cheers,
    Luke.

  • Tara Hale Reply

    Great list! Here’s a couple from me:

    P: Pay a professional. There are so many great, professional web designers out there, use them! Paying someone who knows what they’re doing, who does it every day for a living, is going to get you much better results than attempting to fumble your way around trying to do it yourself. Your time is worth money and by the time you’ve hacked your way through to produce a ‘satisfactory’ outcome, you could’ve paid someone who knows what they’re doing to produce some thing fantastic in half the time.

    L: Listen to their advice!

    T: THINK long and hard about what you want to appear on your site. Only choose only the best things – not everything – you’ve done.

    M: Market research: Before you launch your site, get a few friends, family members or colleagues to have a look through (without any intro or guidance from you so it’s as if they’re a person who’s just come across your site randomly) and give you their opinions on how easy/hard it was to navigate, to find stuff etc. I found that very useful.

    You’re site is important, spend the money on it! It’s like the old Sailor Jerry saying “Cheap work ain’t good, Good work ain’t cheap”. Amen to that!

  • Tara Hale Reply

    I meant ‘Your site is important’…should’ve spell checked!! LOL!

  • Per Reply

    Haha.. this is fun!! This must have taken you ages!! I like the way you sidestepped X and Z… :D

  • Deepetch Reply

    Wonderful advice there….

    @JCD ” Avoid flashy multimedia” this is wrong advice i think, its also a old story there, using flash medias in correct way will increase clients understanding.Because we all know movies and flash things will stay in mind rather then text, Even Google has coded their bot to read the flash text object now.

    ” so use flash object where ever you want and try to add up url and text, this will help BOT to follow the link”

    Concentrate more on:

    Browser compatibility
    Page length
    load time.

    Try to give maximum amount of information in your home page, because most people don’t have enough time to go through all the page..

    @JCD thats good work from you..Happy designing and Keep rocking.

  • Baltech Reply

    Thanks for all the tips, even if they seem somehow obvious, while you are designing and trying to fit content. All tips are very useful for us.

  • Dejan Reply

    Many useful information. I think some of the advices tell about the current trends, like ‘Clean layout’ and ‘White space is good’ advice. Major websites on the Internet today practice it, YouTube, Google.. it puts in focus their functionality and services.

    There may come the time when ‘keep it simple’ minimalist design can appear to look monotonous and the trend can shift to adding more decorations, features.. to enrich design.

  • Web Design Dan Reply

    Hi Jacob,

    Great list looks like Tara has added a few more which are also relevant. On IE 6 it looks like even microsoft are trying to kill off now, we need to get everyone to join the ie 6 countdown site to help it along! Its at ie6countdown.com

  • JennLaz Reply

    Just a couple of things I wanted to touch on..

    @Marcin – I recently took over for a designer on a freelance job (who actually called himself a developer) who used frames on almost every page of a website. The company was on the 10th page of Google for their company name because their website had no content!

    @Deepetch – I agree with the post, I hate when an entire site is animated. And if you’re worried about load times, why not use jquery instead of flash when you can?

    @Jacob/Natalie – About using Common Fonts – What about now that there’s @font-face? I’ve used it on my site and I love it! (Although I did use Font Squirrel’s Generator so that it would work in all browsers.

  • Luuk van Egeraat Reply

    J – Jquery for all javascript-related code, it’s great for cross-browsing experience and it keeps up to date really well (and ofc, easy to learn).

    N – Notepad++. Ye Dreamweaver might be cool, but if you are a really code-orientated guy, notepad++ gives more options. (I recommend the FTP plugin for it, so you can edit pages straight from your website, meaning: if you click Ctrl-S, your website is updated).
    Frontpage users: You entered a realm of death. gtfo. :)

    P – PNG, stop using JPEG and GIF. PNG is high quality, easy for the browser to interpret (no profile etc) and it can have 0% opacity, meaning: no more 90 degree angles.

    H – HTML5, go look up what will be possible in the future :)

    A – Advertisement. Trow it away, Adblocker plugin for browsers has/will kill your adds. Finally.

    C – Chunks of text. avoid them in most cases. When designing a website, don’t just put a 800×500 block for “text input”. (this is more about the text placement then amount of text / long pages, like mentioned in the article)

    S – Sleep after you wrote this :) (advise to myself!)

  • lvacs Reply

    I am a beginner and this article helps. Great list! Thanks!

  • Tommy Reply

    Great work Natalie – most of which we should all know, but nice to be reminded. May just print this and put it on the office wall somewhere!

    Couldn’t agree more on the New windows front.

    And thank you Dan – going straight over there to sign up now!

  • Faraz Reply

    Very resourceful article,one point that the writer made is we dont need to ask the website owner that whether we can link to their page or not is not necessary at all ,this clears a little clash in my mind so thankx for that.

  • Alyss Reply

    Y is no longer true in the US.
    The federal government is now pulling web pages and throwing people in jail for hyperlinking to other webpages.
    Be careful what you link to – if the website has a link to another website, and that other website contains ANY copyrighted material that is not owned by the host, your website, you, and that website and its owner can go to federal prison for 5 years (and pay fines)

  • Techno Lab Reply

    Although we are familiar with most of the advices on web design, it’s always good to learn something new.
    Nice list.

  • Website Design Kansas City Reply

    Nice article with tips for all levels of designer. And, I can’t think of any instance where anyone has been prosecuted for linking to another website.

  • i2space Reply

    At maximum of the site, flash is not preferred but in critical or viewable situations for god looking every one will use flash, but before prefer to give ROBOT.txt file in order to avoid the google crawlers to crawl it.

    And coming to frames its quite tough in IE(internet explorer. So go through the frames thoroughly

  • Hosting Best Reply

    Keeping content original is probably one of the best points you make, search engines are really picking up on that nowadays.

    Another point is to use DIVs rather than tables in designing your layout. Good article though

  • Website Design Reply

    very detailed information and thanks for such a awesome tips regarding website design aspects….

  • Morgan and Me Creative Reply

    Haha…Tara made a good point.

    P – hire a Professional.

    Hiring web professionals is one of the best ways to avoid more of the mistakes mentioned in this post. Professionals will use the latest web standards, screen ratio and etc. Not saying that student work is bad but in a field of professional work, experience is key to the user experience.

  • mando a distancia Reply

    Great article…i am working on a new website myself with a friend of mine and because she is just starting with webdesign sometimes it is hard for me to explain things to her.

    Your points are very clear and think she will understand it much better now.

    Thank you.

  • Barry Reply

    I think it should be mentioned that there really is no need for a visitor counter on a website these days! So many people think that they should add one! Dont do it!

  • Marina Reply

    Nice tips and fun approach! I’m bookmarking this.
    PS: I’m with you on the exclamation mark point – I hate it when people over-use it!!!!!

  • William Reply

    I learn lot of thank you for posting this

  • Samantarizil Reply

    These are very important for Web Design

  • Creative Website Design Reply

    You have really elaborated efficiently and your work seems very professional. I was really in need of this valuable knowledge and tips.

  • Web Designer Reply

    Great list of tips. Thanks for sharing!

  • GradSu Reply

    Loving this post, thanks for the info!

  • NO TRACKBACKS


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).

x