400 Bad request

How can I learn how to build websites?

There are two approaches you can take to learning how to build websites.

1. Learn how to build websites
2. Learn how to build websites the right way, aka the Web Standardistas’ way

I built my first website over 10 years ago but it wasn’t until final year of my University degree course Interactive Multimedia Design (IMD) that I discovered how to build sites properly using well structured HTML and CSS. Before this I was using tables, unstructured markup and invalid HTML. Who do I have to thank for this? Chris Murphy and Nicklas Persson, two lecturers on the IMD course.

Now you don’t have to take a University course to be taught by these two world renowned mentors. They have branded themselves as the Standardistas and have put all their years of wisdom and knowledge on paper in the form of HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach.

This book will teach you how to build websites from scratch. Starting with the basics of semantic markup and how web pages work moving onto styling your first web page with CSS. It’s a one stop shop for putting together your first web site.

Who is it for?

• People who want to learn how to build websites
• Developers who need to brush up their front end markup skills
• Designers who are using outdated techniques e.g. tables, to build websites
• Professionals who want to earn the badge of a Web Standardista

Benefits of the Web Standardistas’ approach

• Separates content and presentation (easier to update layouts)
• Reduced markup (reducing page download times)
• Increased accessibility (for screen readers and other platforms)
• Cross browser compatibility
• Forward compatibility

Recommended

It’s an easily read book, clearly laid out with lots of code examples to help you get started. After reading this you’ll be able to build websites with your eyes closed.

• The Book
• Web Standardistas website
• @standardistas on Twitter

Overview

I was recently hired by Newsgroup Direct (NGD), a leading Usenet newsgroup service provider, to revamp their website, make it more modern and improve signups.

Here is their previous design.

Planning

The first thing that happens when I get an enquiry is I send the potential client a website planner. The website planner, a series of questions I have listed in a Word document, will gather requirements for the project.

The key objectives of the planner:

• Find out who the client is and what they do
• Who their target market/user is
• Who their competition is
• What deliverables they want from me
• Timeframe and budget

In a nutshell, NGD require a makeover with a modern & easy to use interface. I am responsible for the XHTML/CSS templates for the main pages (they already have a development team in place for the back-end programming & integration).

Research & Ideas

Current site

I start by going through the current website and list things that can be improved.

Various issues raised for NGD include non-semantic markup, no defensive design, markup was invalid, poor Google ranking for keywords, no signup enticement, overload of available sign up options and several usability issues.

NGD had over 40 packages to choose from, which can be too overwhelming for the average user.

Competitors sites

The next stage is to analyse competitor websites; what is good or bad about them. If I can take on board what is good and eliminate what is bad, then there’s a better chance of coming up with a successful solution.

Ideas

I suggest several improvements that can be made to the current site, showcase various features of other non-related sites that I feel can be integrated into the new site.

Several ideas I have for NGD:

• Clear instructions on how to use NGD and setup newsreaders for novice users
• New logo to reflect new branding
• Narrow down the packages (introduce a free package for trial)
• Clear call to actions
• Highlight the key features of NGD with a slide reel in the header

Logo

Depending on the project new branding may be necessary including logo, stationary, company image and the website.

To help with their new online branding, I recommended NGD have a new logo designed & I suggested a couple of professional logo designers I know or have worked with. They went with Graham Smith, a well respected and well known graphic designer from the UK.

Graham did a great job with the logo and this was the final outcome.

Information Architecture & Sitemap

I should mention here that at each stage I get feedback from the client and discuss it. It’s important to make sure they’re involved the whole way through the process.

For IA I jot down every section of the website on post-its and arrange them (on a wall or fridge) in order of importance. This is an great technique (that I was first introduced to by Front) that allows you to easily change and rearrange your order. In the end you will end up with various levels of importance, which will help with your sitemap and wireframes.

Once I settle on the IA I produce a sitemap. I usually produce the sitemap in Illustrator. The reason I use Illustrator is it allows me to move pages about (unlike using paper) and it also produces a professional outcome that I can pass onto the client, but there are various other tools you can use.

Wireframes

I start by sketching wireframes and then move onto Illustrator to produce more professional looking wireframes that I can pass onto the client and depending on the project I could produce 1, 2 or 3 wireframes.

For NGD I only produced 1 that was the homepage as this is the most important page while I kept the other pages (pricing, info pages etc.) as paper sketches.

Mockups

Once the client is happy with the wireframes it is time to open Photoshop and start with a fresh canvas. The good thing about this process is that I now have a wireframe to build the design over.

Some key things to keep in mind here:

• Branding – tying in with the overall brand, colours, mood
• Target audience – NGD’s audience are 20-35yr old males so it has to appeal to them
• Grid – keeping the elements structured and to a grid system is important
• Development – bare in mind this has to be produced in CSS so don’t make anything too complicated and keep graphics minimal

Homepage mockup

Implementation

All good to go, the front end development process starts and I produce templates for:

• Homepage
• About Us
• Pricing
• Sign Up

I also produce a template that has various other styled elements that the NGD developers can use if need be, which includes tables, forms, buttons, alerts etc.

Completion

The project is complete and the templates are then passed onto the client (in this case NGD’s development team to integrate into the framework).

After launch I will still monitor the analytics and make suggestions on how to improve the site and conversion rate. It’s hard (or impossible) to get it perfect first time, there are always things you can learn from how the users use the site and make improvements based on this.

What’s your process involve?

Insights are always interesting and useful. Even if you’re not a web designer, it’s good to hear how projects develop.

Keeping an eye out for your career’s future is important for everyone.
However, for web designers, looking forward may be even more important than for many other professions. Many web designers are freelancers, or work for more than one company at a given time. Jobs can be short or long term contracts, so looking for the next job is often not too far out into your future.

What A Career Blog Can Do For You

In today’s business world, networking, whether online or in person, is an important part of keeping your career fresh and keeping an eye out for the next job. Career blogs are just one of the ways web designers and other freelance professionals can keep abreast of who’s hiring,
what’s hot in the industry and which skills they should be adding to their portfolio.

Following you’ll find five career blogs that are essential reading for web designers. They’ll provide insight on how to keep your career fresh, as well as give you important tips on finding your next job and marketing your skills appropriately.

1. Krop

This is an all around good site for web designers. Their blog is very informative, providing information about some of the most important sites on the web, including how they’re created. They also offer articles on job hunting and staying marketable. In addition, Krop offers a large database of available jobs, so it’s a great place to search for your next gig.

2. Smashing Magazine

Smashing has one of the largest design related blogs on the web, so you’ll find lots of useful information on their site. They also offer tutorials on lots of design programs. Their job database is quite large and is segmented into full time and freelance positions, making it easy to find exactly what you’re looking for.

3. AIGA

AIGA is the professional association for designers, and is one organization all designers should join. Their website has a great job bank, along with plenty of other resources for designers. Their “Voice” section is a great interactive blog that explores all aspects of design and encourages reader feedback. When job hunting, keep in mind that many large companies advertise first and foremost through AIGA.

4. AG Design

This site, known as All Graphic Design, offers lots of articles and advice for graphic designers, including a great design gallery. Their blog is a great resource for finding graphic design jobs and for keeping your skills sharp. In addition, there’s a design forum for addressing all sorts of questions and issues facing graphic designers.

5. A Digital Dreamer

One of the best sites for graphic designers, Digital Dreamer offers general information for all sorts of graphic designers, as well as some specialized categories, suited to specific types of designers, such as video game designers or animators. The career articles are particularly good for beginning designers who are still in the early stages of their career.

These sites are certain to be helpful to graphic designers in any stage of their career. Keeping up with these sites and reading their blogs regularly is sure to help any graphic designer keep abreast of all the changes and job opportunities in the graphic design field.

About the author

Mary Ward is a freelance author and writes about design job topics, such as how to choose a web design school, artist career tips, and more.

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

Bright Kite

From The Couch

DesignM.ag

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

Check out this inspirational list of typographic based designs that I’ve put together.

1. Pallian Creative

2. Legistyles

3. Ben Lind

4. Made by Cool

5. Lorem Ipsum

6. Typechart

7. Elysium Burns

8. Crowley Webb

9. Alpha Multimedia

10. Astheria

11. The Typographic Desk Reference

12. Giant Creative

13. I Love Typography

14. FL2

15. Futon Media

Further reading

• 15 inspiring typography based blog designs
• 20 websites with beautiful typography

Any good ones I missed?

Check out this list of 20 websites using these effects plus a few helpful tutorials.

1. 45royale

2. Skylar Anderson

3. Dale Anthony

4. Elite by Design

5. Fernando Sergio

6. Dorian Castro

7. 365 Days of Astronomy

8. Studio 7 Designs

9. Exceptional

10. Abduzeedo

11. Oakes Design

12. Brian Wilkins

13. Kitfolio

14. Rawkes

15. Evan Eckard

16. You Love Us

17. RJ Designz

18. Revyver Labs

19. Mail Chimp

20. Tennessee Winter

Tutorials

• Make an Aurora Borealis Design in Illustrator
• Awesome up your design with A.B.
• Really cool Eclipse Effect in Photoshop
• Making a realistic star field

Further Reading

• 25 websites with lighting effects

This post looks at how to create your own sunbursts, using existing Photoshop shapes and brushes and I’ve showcased 15 beautiful websites that include the sunburst effect in some shape or form.

Sunburst Photoshop tutorial and resources

Sunburst/sun ray tutorial

Thanks to Iceflow Studios for the video tutorial.

Photoshop sunburst brushes

Photoshop sunburst shapes

Showcase of beautiful websites using the sunburst effect

1. No Milk Today

2. That Indie Dude

3. SMS Parking

4. Yo Vivo en Vigo

5. i Menestrelli di Graelion

6. Ciclismo Urbano

7. The Relevant Elephant

8. Future of Web Design New York

9. Jared Campbell

10. Kindle

11. Morgan Hayes

12. SR28

13. Phizz

14. Glass Hills

15. Poll Daddy

Any thoughts on the sunburst trend? Do you like it, hate it, use it?

I’ve took a look at the reasons behind validation and checked out 25 of the web’s most popular websites to see if they bother validating their code.

What is validation?

Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking…W3C

Why validate, what are the benefits?

1. Non uniform browser correction

Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn’t and you end up with a broken layout.

2. Rendering time

If your code is valid the browser has to do less thinking as it doesn’t have to correct any code, therefore the page will render faster.

3. Future proofing

You never know what’s around the corner in regards to technology but the chances are that if you have valid (X)HTML, you’re ensuring that your website will work with future technologies.

4. Google prefers valid code

Shaun Anderson conducted an interesting validation test; Does Google like valid code?.

This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.

5. Accessibility

A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.

6. Self satisfaction

If feels good when you run a validation check on your site and you see the green bar appear :)

What are the common validation errors and how to fix them?

a. Ampersands

This always catches me out. Ampersands must be written ‘&‘ and not just ‘&’. This is true for writing urls too.

<a href="http://images.google.com/imghp?hl=en&amp;tab=wi">

b. Quotations

Element property values must be put within quotes.

<body bgcolor="#ffffff">

c. Closing tags

All elements must be closed off, even image tags if you’re using a XHTML DTD.

<img src="image.jpg" alt="Image" />

d. Doctypes

Your page must have a valid Document Type Definition (DTD) at the top of the page, and take note that it is case sensitive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e. Nesting elements incorrectly

Elements must be opened and closed in order.

<p><strong><em>Paragraph</em></strong></p>

Do the web’s biggest sites validate?

So do all the big and popular websites out there validate? Below I’ve put together a selection of some of the most popular websites and ordered them from best(valid) to worst.

BBC

Wikipedia

Apple

Facebook

Number 10

Digg

Yahoo

Twitter

Times Online

Google

YouTube

Barack Obama

Microsoft

eBay

What about the design community?

Looking at some of the biggest sites (and authors) in the design and technology community.

A List Apart

Smashing Magazine

Web Standardistas

Zeldman

Future of Web Design

Use It

37 Signals

Simple Bits

Freelance Switch

Slashdot

TechCrunch

Conclusion

I think it’s worthwhile validating your websites and it’s good practice. From looking at the sites above however (which are all great sites and designs), it’s obvious that not having a validated website is not the end of the world.

If you’re like me though you’ll sleep better at night knowing your website validates.

Does your site validate?

It was very hard work trying to track down valid websites for this post so it would be great to see some examples. Use the W3C Validator to check your site then submit your link and comments below.

It would also be good to hear your points about validation and if you think it’s worthwhile.

Further Reading

• W3C
• W3C Validator
• XHTML-CSS Validator
• Google SEO test
• Web Developer Toolbar for Firefox

Sponsored link: LusterForever.com – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.

These restrictions limit our creativity boundaries so if you want to make an impression with your Twitter profile it all comes down to the background.

I’ve compiled a list of Twitter profiles who have impressive creative backgrounds, which I feel stand out above the rest. Feel free to share any you’ve come across and you can also follow me on Twitter.

Textures

1. @builtbybuffalo

2. @gabediaz

3. @designbyfront

4. @elliotjaystocks

Logos

5. @bittbox

6. @benek

7. @3drockz

8. @studio3k

9. @zohoinvoice

Photographs

10. @bookchiq

11. @ceidotorg

12. @chorrell

13. @nonlinear

Twitter Bird

14. @justtweetit

15. @darkmotion

Illustrations

16. @elitistsnob

17. @imajes

18. @flarup

19. @simplebits

20. @pixellent

Sky

21. @mayhemstudios

22. @divvoted

23. @collis

24. @rogieking

Colourful

25. @rsg

26. @abduzeedo

27. @bartelme

Patterns

28. @jophillips

29. @randaclay

30. @leelowe

Further reading

Some useful links for more Twitter inspiration. Check out Another 15 Beautiful Twitter Themes by Gopal. I came across it while writing this post, there’s a few duplicates but still worth a look.

• Twitter background guidelines
• Twitter status design
• 20+ Twitter bird designs
• 12 beautiful Twitter themes

Any more?

Suggest any Twitter profiles I haven’t mentioned below and feel free to follow me if you like.

However, as I browse the web today I’m finding more and more inspirational and creative websites from females across the globe. Just because there are more men involved in the web community doesn’t mean that the best stuff comes from us. There’s a certain elegance, beauty and tone that the female touch can add to a design.

I’ve compiled a list of 25 26 female web designers who I believe are hot at web design and whose designs are an inspiration to the whole of the web design community.

1. Larissa Meek

@larissameek

2. Veerle Pieters

@vpieters

3. Lea Alcantara

@lealea

4. Jackie Ellse

@designspace

5. Jan Cavan

@mj12982

6. Bel Koo

7. Shirley Ann

8. Mourylise Heymer Marreiros

9. Rina(Honey Design)

10. Sarah Parmenter

@sarahparmenter

11. Emma Taylor

@emtaylor

12. Cindy Li

@cindyli

13. Gisele Jaquenod

@giselejaquenod

14. Grace Smith

@gracesmith

15. Melissa Hie

16. Caty Ng

17. Natalie Jost

18. Inayaili de Leon

@yaili

19. Kassy

@kassy4

20. Eva-Lotta Lamm

@evalottchen

21. Estibaliz Landa

22. Sabrina Dent

@sabrinadent

23. Ali Felski

@felskia

24. Tanya Merone

25. Jen Germann

@germanny

26. Meagan Fisher

@meaganfisher

Who have I missed?

I’ve only shortlisted 25 26 designers above so obviously there are a lot more out there. Feel free to mention yourself or someone else below in the comments.

Sponsored link: Print custom bookmark online at PsPrint.com.