The You Make The Website eBook, site and blog were launched in October 2011. The release was targeted at Australians and so was the eBook. After a solid 6+ months working on the site and the book – it’s time to make it global.

I’m not really using pen and paper… the power of images huh?!

Image credit: © Indigofish

Stock Free Images & Dreamstime Stock Photos

There’s a lot happening at the moment:

• Revision of the entire You Make The Website eBook.
• Enhancing the support system to help you faster.
• Streamlining the user interface of the blog for easier reading.
• Redesign the website, youmakethewebsite.com.au and launch of youmakethewebsite.com – the international version of the book and site.
• Rebranding the entire package… the site will no longer be called You Make The Website. What it will be called? Well that’s a surprise!

So while all this work is going on, there will be little-to-no updates on the blog. I’m saving up some real special posts for the new launch, and if you want to be the first to know about the launch, you can:

• Grab the blog’s RSS feed,
• Follow us on Twitter, Google+ or Facebook, or
• Sign-up for email alerts…

Don’t forget me!

Header categories in this article:

• Blogs
• Business & E-commerce
• Cafe & Coffee
• Digital Blogs
• Hotels & Tourism
• Magazine & News Style
• Products & Services
• Web Design & Development
• Random

A website or blog header is one of the most important areas of your website. In almost all cases it is displayed on every page (called a “global” element) and is inside the first viewable area on the screen when someone visits your site (called “above the fold” – a prime piece of screen real estate).

This huge collection showcases 99 of the latest website and blog headers to give you inspiration on how to design a great header and what content to use.

Each header has been expertly reviewed so you know it has a good layout (for a good user interface) and well chosen content (for good information architecture). These are the two most important elements of a header – consider these two points as you browse the headers below.

Banners are included to show you just how common it is for sites to have large leaderboard sized advertising in the header.

Note: View a large version of the header by clicking the screenshot below.

Blog Headers

The Art of Manliness

http://artofmanliness.com/

Event Manager Blog

http://www.eventmanagerblog.com/

fuzbiz

http://www.fubiz.net/

It’s Nice That

http://www.itsnicethat.com/

mental_floss

http://www.mentalfloss.com/

Oh Joy!

http://www.ohjoy.blogs.com/

Splitsider

http://splitsider.com/

PsyBlog

http://www.spring.org.uk/

Random Stuff

Random Stuff Blog Header

Style Observer

http://styleobserver.com/

That Video Game Blog

http://www.thatvideogameblog.com/

Today I Found Out

http://www.todayifoundout.com/

For Print Only

http://www.underconsideration.com/fpo/

Wall to Watch

http://www.walltowatch.com/

Young PrePro

http://www.youngprepro.com/

Business & E-commerce

Doghouse Media

http://www.dhmedia.com.au/

Ed Hardy Watches

http://www.edhardywatches.com.au/

Happy Cog

http://happycog.com/

Isle Creative

http://www.islecreative.com/

The Jacky Winter Group

http://jackywinter.com/

Jasmine De Foore

http://jasminedefoore.com/

Office Life

http://www.officelife.com.au/

Peter’s Body Shop

http://petersbodyshop.net/

Startup Nation – Home Page

http://www.startupnation.com/

Startup Nation – Section Header (Blue)

http://www.startupnation.com/

Startup Nation - Section Header (Yellow)

http://www.startupnation.com/

Test Tube

http://www.testtubeobjects.com.au/

Cafe & Coffee

1369 Coffee House

http://www.1369coffeehouse.com/

Bean Exchange

http://www.beanexchange.com/

Far Coast

http://www.farcoast.com/

Sweet Sallie’s

http://sweetsallies.com/

Jones Coffee Roasters

http://www.thebestcoffee.com/

Digital Blogs

1st Web Designer

http://www.1stwebdesigner.com/

24 Ways

http://24ways.org/

Adaptive Path

http://www.adaptivepath.com/

AdverBlog

http://www.adverblog.com/

Amnesia’s Blog

http://amnesiablog.wordpress.com/

Blog Success Journal

http://www.blogsuccessjournal.com/

BuzzFeed

http://www.buzzfeed.com/

By Bloggers

http://www.bybloggers.net/

Chris G

http://www.chrisg.com/

Colossal

http://www.thisiscolossal.com/

Colour Lovers

http://www.colourlovers.com/

Cool Hunting

http://www.coolhunting.com/

Creative Overflow

http://creativeoverflow.net/

Instant Shift

http://www.instantshift.com/

Make Use Of

http://www.makeuseof.com/

Search Engine Watch

http://searchenginewatch.com/

Sparring Mind

http://www.sparringmind.com/

Web Design Ledger

http://webdesignledger.com/

Hotels & Tourism

Atlantis “The Palm”

http://www.atlantisthepalm.com/

Moroccan Resort

http://www.breakfreemoroccan.com.au/

Promenade Apartments

http://www.promenadeapartments.com.au/

QT Gold Coast

http://www.qtgoldcoast.com.au/

The Shores

http://www.shoresresort.com/

Visit Gold Coast

http://www.visitgoldcoast.com/

Zenith

http://www.zenithapartments.com.au/

Magazine & News Style

Booooooom

http://www.booooooom.com/

British Journal of Photography

http://www.bjp-online.com/

Bloomberg Businessweek

http://www.businessweek.com/

Design Boom

http://www.designboom.com/

Web Designer Mag

http://www.webdesignermag.co.uk/

Design Milk

http://design-milk.com/

For My Hour

http://formyhour.com/

Grist

http://grist.org/

Inc.

http://www.inc.com/

mocoloco

http://mocoloco.com/

Australian Popular Science

http://popsci.com.au/

R29

http://www.refinery29.com/

Smosh

http://www.smosh.com/

Specky Boy

http://speckyboy.com/

TED

http://www.ted.com/

The Cable

http://thecable.foreignpolicy.com/

 The Future Buzz

http://thefuturebuzz.com/

Think Progress – Home

http://thinkprogress.org/

Think Progress – Section Header

http://thinkprogress.org/

UX Magazine

http://uxmag.com/

http://www.weheart.co.uk/

Products & Services

Graph Paper Press

The header here sits both horizontally and vertically. The cog-looking logo on the left and links below it are part of the global navigation, as well as the top horizontal gray bar. http://graphpaperpress.com/

KISSmetrics

http://www.kissmetrics.com/

MailChimp – Section Header (Blue)

http://mailchimp.com/

MailChimp – Section Header (Orange)

http://mailchimp.com/

Shopify

Shopify’s header is a “sticky header”, staying at the top of the page when scrolling down. http://www.shopify.com/

ThemeForest

http://themeforest.net/

Unbounce

http://unbounce.com/

Web Design & Development

Automattic

http://automattic.com/

Happy Cog - “Mega” Menu Expanded

http://cognition.happycog.com/

Happy Cog

http://cognition.happycog.com/

CSS-Tricks

http://css-tricks.com/

CSS3.info

http://www.css3.info/

Measuring Usability

http://www.measuringusability.com/

User Focus

http://www.userfocus.co.uk/

Web Design From Scratch

http://www.webdesignfromscratch.com/

WordPress.Org

http://wordpress.org/

Random

Angove St Festival

http://angovefestival.com.au/

Kimo’s HDR Photography

http://captainkimo.com/

Danny Choo’s “Culture Japan”

http://www.dannychoo.com/

Elsa Mora’s Blog

http://elsita.typepad.com/

Official London 2012 Olympic Games

http://www.london2012.com/

Tips For Making Your Own Header

You don’t need to be a pro designer to make your own effective header. Seen in many of the above headers, consider the following when creating your own website or blog header:

• Logo is positioned on the top left of the page.
• Taglines or supporting copy are included if the logo text doesn’t explain the purpose (e.g. Mental Floss in the blog headers section doesn’t tell you what the site is about, but the tagline “Where knowledge junkies get their fix” clears it all up!). This helps to reinforce your offering.
• About and Contact Us page links are in the main navigation.
• Subscribe and follow (RSS, Email, Twitter, Facebook).
• Many blog headers include category links as the main form of navigation.
• Search box included (larger sites only, or blogs with lots of posts).
• Most prominent calls to action are included in a notification style area (e.g. Chris G and Colour Lovers in the digital blogs section).
• Logo and navigation area are usually contrasting in colour to the main body of the page.

Want to learn more about good design for web? Get your head around IA, ID, UX, UI, Usability: Making Sense of Digital Design Jargon.

Did you know that you can use simple PHP to easily selective display content on the home page using WordPress.

Responsive WordPress themes make all this possible, for any budget. Take a look at the 50+ premium and free WordPress themes below and make your website wet-dreams come true!

Responsive WordPress Themes (Premium)

For years I only used free WordPress themes – I’d find one that is a close fit to my needs and then customise it for days… weeks… After working with some clients using premium WordPress themes, I quickly realised that these themes have a huge amount of functionality already built in and the $20 – $40 spent on theme is well worth the time saved.

So let’s start the collection of responsive WordPress themes with the premium ones.

Active

Live Preview | Details & Buy

5 star rated responsive WordPress theme packed full of features like HTML5 music player, unique/unlimited galleries, unbranded admin interface and more.

Amazing Studio

Live Preview | Details & Buy

New theme with a clean design and simple options allowing for easy customisation.

Apex

Live Preview | Details & Buy

A popular 5 star rated theme with a great admin panel including a dynamic Google Web Font loader with access to 400+ fonts. Very feature rich… take a look, too much to mention here!

Bangkok Press

Live Preview | Details & Buy

News and editorial style theme that is well coded for SEO and allows almost unlimited customisation through a colour picker, 6 footer loayouts, 10+ blog styles, a drag and drop page builder and loads more.

Buddies

Live Preview | Details & Buy

Minimal BuddyPress ready theme to create your own online community. Touting great support and a fully widgetized homepage, this is a great looking theme.

Century

Live Preview | Details & Buy

Unique theme with interesting options like text/images/video gallery and a music player.

Construct

Live Preview | Details & Buy

5 star blog/portfolio theme with sliders, unlimited colour options as well as theme updates and support.

CookingPress

Live Preview | Details & Buy

A theme for foodies and one of the first with Google Recipe Views to stand out on the search results page. Includes a recipe creator and advanced search by ingredients.

Darwin

Live Preview | Details & Buy

Multi-purpose theme with clean design that comes with video documentation and great blog options.

Exposure

Live Preview | Details & Buy

Photography theme with social integration and full screen images. Includes Google Web Font support, unlimited slideshows and a nice Tumblog style blog.

Gala

Live Preview | Details & Buy

Very popular 5 star theme suited to business/agency websites with plenty of customisation to make a unique site. Great support and ongoing theme updates make this an easy choice.

Gratitude

Live Preview | Details & Buy

Another 5 star rated theme – the first responsive BuddyPress theme on Themeforest. Create your own online community, viewable on devices as small as a smartphone and as big as a 27″ screen!

Human

Live Preview | Details & Buy

New HTML5 & CSS3 responsive WordPress theme by an elite-author. This is a minimalist theme suited to many different types of sites.

Jigsaw

Live Preview | Details & Buy

A highly rated theme with touch gesture support. Looks great, has loads of skins and colour options.

Magnet

Live Preview | Details & Buy

Another multi-purpose theme with lots of blog and portfolio options. Lots of other features including good support makes this a good theme.

Markup Business

Live Preview | Details & Buy

5 star rated multi-purpose (best for business) responsive WordPress theme with a custom “Order Request” system. It is also WooCommerce ready.

Mosaico

Live Preview | Details & Buy

A highly rated unique and responsive magazine WordPress theme. Unlimited colour schemes with a colour picker and plenty of widgets.

Orchid

Live Preview | Details & Buy

Portfolio style theme with 3 colour schemes with lots of social link options.

Plumet

Live Preview | Details & Buy

Unique portfolio theme with a clean layout and custom backgrounds per page to really show off your work.

Prometheus

Live Preview | Details & Buy

Well suited to business sites, this clean responsive WordPress theme is full of features. Includes unlimited colour customisation, SEO optimised and forum ready.

Responser

Live Preview | Details & Buy

5 star rated responsive portfolio WordPress theme that displays your work brilliantly on any sized screen. Supports image and video portfolios and built on standards compliant HTML5 & CSS3.

Ruskin

Live Preview | Details & Buy

Multi-purpose theme that is very clean and has good SEO. Supports Google Fonts and is forum ready.

Sapientia

Live Preview | Details & Buy

5 star rated minimal portfolio responsive WordPress theme.

Sentence

Live Preview | Details & Buy

Highly rated responsive WordPress theme by an elite author. This blog and portfolio theme has 15 pre-defined skins with plenty of font and colour options to make your site unique. Good use of SEO and a big support forum.

Simpler

Live Preview | Details & Buy

Blog/portfolio style site with an easy-to-use admin including slider manager, contact form manager, Google Web Fonts integration and unlimited options for colours and backgrounds.

Slate

Live Preview | Details & Buy

5 star theme by an elite author with mobile swipe support, scalable galleries and plenty more theme options.

Sodales

Live Preview | Details & Buy

Another great 5 star theme by an elite author built on valid HTML5 with too many options to mention here!

Storefront Echo

Live Preview | Details & Buy

Responsive eCommerce WordPress theme that works perfectly with a wide range of plugins and services like WP e-Commerce, BuddyPress and more. Comes with great support from a full-time team.

Styx

Live Preview | Details & Buy

Multi-purpose theme from an elite author with built in SEO plugin and site speed optimised code. Lots of options, shortcodes, templates and more.

Website

Live Preview | Details & Buy

5 star rated theme with a light and dark theme and unlimited colour variations. Responsive (and unlimited) sliders, range of post formats, social media integration and more make this a feature packed theme.

White Noise

Live Preview | Details & Buy

5 star rated theme with unlimited colour schemes, a smart announement bar, video capable portfolio and lots more!

WP Pro Real Estate 3

Live Preview | Details & Buy

The 3rd version of this real estate theme is the only responsive real estate theme on Themeforest. A handy child theme creator is a great feature and many happy buyers have sent in some great reviews.

Responsive WordPress Themes (Free)

Good solution for a basic personal blog or website, although less feature packed (and with no support) when compared to the premium themes, there are a few good free responsive WordPress themes around.

Ascetica

Live Preview & Download

Balita

Live Preview | Download

BonPress

Live Preview & Download

I’m currently using BonPress on my personal blog – it’s easy to setup, has a nice simple layout and is a good choice for personal blogs.

Cakifo

Live Preview | Download

DailyPost

Live Preview | Download

Flexible

Live Preview | Download

Foghorn

Live Preview | Download

Leon

Live Preview | Download

Origin

Live Preview | Download

PressWork

Live Preview | Download

Respo

Live Preview & Download

Response

Live Preview & Download

Responsive

Live Preview & Download

Scherzo

Live Preview | Download

Shotoku

Live Preview | Download

simpleX

Live Preview | Download

Skeleton

Live Preview & Download

Yoko

Live Preview | Download

Do You Need A Responsive Theme?

It seems that over the last year or two, “responsive” has become a bit of a buzzword – and rightly so, tablets and smartphones are well entrenched and internet speeds on these devices are often the same as a normal broadband connection.

A common trend though, is that websites are actually getting fatter – their filesize is getting bigger. The code and calls needed to make a responsive theme can also decrease the page load speed of your website.

Before jumping in and buying/downloading a responsive theme, do a bit of research. If you have an existing website, look at your website analytics and see what the stats are for users viewing your site on mobile devices and small screen sizes.

Before buying/downloading a WordPress theme, make sure to check that it meets your needs. This 11 point comprehensive WordPress theme selection checklist will help to ensure you find the right theme.

Have I Missed Something?

If you know of a responsive WordPress theme that isn’t listed here, leave a comment and let me know. If it’s of good enough standards, I’ll add it to this post.

Photography

@fontbureau – Reinforcing their brand with unique background photography.

@ilovetypography – I put this one under photography, because I’m guessing it’s a scan.

@itsaSmallWerld – Some mates from Melbourne running an awesome blog.

@kissysellout – Green grass is London electronic music producer Kissy Sell Out’s simple background.

@paulocoelho – I love his books and the background really shows how many people he influences.

@WorldHistory101 – Space photography!

Brand

@FrommersTravel – Although I’m not a fan of the double logo, this is nice and simple.

@jhouseparty – Great radio station in Australia.

@mashsocialmedia – I live their new look, it’s halfway between Facebook and Twitter.

@Microsoft – Showing product offerings with icons.

@techreview – Simple colours showing off the logo.

@TravlandLeisure – The brand uses social media well and their background puts you in holiday mode.

Digital Design

@djshadow – That’s what is might look like inside the ShadowSphere.

@FontFont – All about fonts.

@goSupermodel – Digital illustration for a girl brand.

@MyFonts – You might notice… picked up a few font profiles here…

@nokia – 3D effect is a nice change from the usual background designs.

@Number10gov – A nice profile from the UK Prime Minister, couldn’t say the same about the Aussie PM…

@UndercoverUX – Very cool and unique background, taking inspiration from the Survival Handbook series.

@webfontawards – Simple background design to create a great colour scheme.

Plain & Simple

@Font_ID – Keeping it clear cut.

@FontShop – You don’t see many yellow backgrounds…

@FontSquirrel – Simple and usable.

@HuffingtonPost – One colour backgrounds focuses the attention on the tweets.

@InspirationRoom – Makes you feel like your in a design studio’s fancy meeting room.

@longnow – Simple shapes in the background can add a little depth to plain backgrounds.

@typekit – The goal can be about being unique, or constant use of brand colours.

@uxintensive – An intense and strong background colour works with complementary colours.

What’s Coming Up On Twitter?

You’ll notice in the above profiles, that the Huffington Post’s and UK Prime Minister’s Twitter profiles have a header image underneath their profile information. This is a part of “enhanced profile pages” and while the extra options are only available to a select few, Twitter has said the options will be “rolled out more broadly in the coming weeks and months”.

Check Me Out On Twitter!

Get useful links and new post notifications through @MakingWebsites. Follow us now!

I’ve listed in this article some of the best things you can do to enhance the SEO of your WordPress site. Having worked with WordPress since 2006, I’ve found that these 5 tips can have a big impact on your site’s ranking and traffic stats.

All the things below are quick to do, and with most SEO work, you’ll see hard-proof (through website analytics, increased referrals from search engines or a higher page rank) over time that these 5 actions were well worth doing…

1. Decrease the Number (and increase the value) of Internal Links

With all the handy widgets and shortcodes available to us in WordPress, it is easy to get carried away. A common mistake is a poorly used tag cloud. Rarely is it used to any decent effect – usually it clutters a page and makes it looks busy. Even worse, it drains your page of precious link juice (effecting the page ranking).

Here’s what you can do today: Login to your analytics (e.g. Google Analytics) and see how your tag pages are fairing in terms of page views and bounce rates. If the numbers are poor – which means people aren’t clicking on your tag cloud links, and if they are, they are leaving the tag page – remove the tag cloud from your site.

If the numbers of good – i.e. people are effectively using your tag cloud for navigation – then keep your tag cloud, but add rel=”nofollow” in the <a> tag for each link. This will stop the tag pages from getting any link juice they don’t deserve.

Sometimes, it’s best not to follow. Use the nofollow paramater wisely.

You can use a plugin to add the nofollow attribute automatically, or edit some simple code:

• Download the plugin.
• Edit the code in your theme.

2. The Heading 1 Tag Is Being Used Correctly

Many themes seem to be getting better at this. Most themes which call themselves “SEO Friendly WordPress Themes” will be well coded for good usage of the heading tag.

You want to make sure that the heading 1 (<h1>) tag is being used correctly. The main thing to remember is that each page should have only 1 unique <h1> tag.

On the home page, your site name or tagline (which ever is your target in terms of keywords) should be in the <h1> tag. You can use this code to display something only on the home page to achieve this.

No, not that kind of H1…

On blog posts and articles, the <h1> tag should contain the carefully keyword targeted title of your post. The same goes for pages.

Here’s what you can do today: Go to your home page, view the source and search for the h1 tag – see what is inside. Then go to a blog post or static page and do the same. If things are out of order, you have to go into the code of your theme and fix it yourself.

If you’re hunting for a new theme, this is a good thing to look out for.

3. Review Content and Cross Promote

Knowing how to use categories in WordPress is good for organisation. Using tags with posts can allow for more precise relationships resulting in enhanced usability.

Help out your own site with cross post/page links.

More powerful than these two is context relevant interlinking of posts. Basically, it’s what I’ve done in the previous paragraph (linking “how to use categories in WordPress” to a post I wrote a few months ago – the same goes for “using tags with posts”).

This works only if the link is relevant to the topic of your content.

Internal linking not only helps increase keyword ranking (as you have full power over anchor text and where the links point to), it also helps increase the “pages per visit” stat in your site’s analytics – and you want your audience reading more than 1.4 pages every visit.

Here’s what you can do today: Review past posts looking for opportunities to cross promote.

First, browse through a list of all your posts so you have a vision of the full range of published posts. Then work through every post, skimming or re-reading each and considering how you can either link the current text to another article, or perhaps create a sentence/paragraph to add a relevant link.

This is a good process and can be finished in a couple of hours if you have 50 posts or less. If you have a lot of posts, instead of working through all of them – login to your site’s analytics and choose the top 25/50 posts, working through them to add internal links.

From this point on, when you are writing new content – think of opportunites to link to previous relevant posts.

4. Try Online SEO Software

Get professional insights and unlock the SEO secrets to success and use a free trial of the world’s best SEO software.

I used the 30 day free trial about a year ago, and opted out before I started being charged. Those 30 days of using their software had such a huge impact – especially with targeting keywords. You get access to SEO reporting, tools for keyword difficulty ranking and link building opportunities, professional training and expert support.

This will have a huge impact on your SEO.

Here’s what you can do today: Sign up for the free 30 day trial and play with the SEO tools. First thing to check out – the On-Page Keyword Optimization tool, which will give you some great insights into keyword ranking.

5. Increase Page Speed

Themes with features like photo galleries, sliders, social media widgets, etc, can have a high page weight. You don’t want your visitors waiting (or waiting and then quickly leaving), so spend some time today speeding up your page load times.

Here’s what you can do today: Install the WP Total Cache WordPress plugin and tweak the settings to speed up the page load of your website.

Before you install the plugin, install a page speed analyser into your browser. For Google Chrome I use Developer Tools’ Page Speed Add-On. Then, follow this guide on how to setup the plugin.

The plugin caches and compresses different types of files in your site. At times, this can break the functionality or the layout. My tip for working with this plugin is to activate one option at a time – then refresh your site to see if everything is working fine.

More tips to increase page speed:

• Replace buttons that are images with CSS: CSS3 can make nice rounded borders, shadows and gradients that lighten page weight.
• Get rid of unnecessary external files: Many themes have features like shadow boxes, photo galleries, any number of widgets and more. These usually load a Javascript file, some of which can be very big (50kb +). Find the files you dont need and remove the references to them.
• Clean up your CSS file: Just like the above, if your theme has a photo gallery that you will never use, it will also have specific CSS styles. Go through your CSS file (make sure you back it up first!) and remove anything you don’t need.
• Hardcode over plugins: If you are code-capable, instead of using plugins, look to replicate what you can with code. For example – recent posts, popular posts, sitemaps.

Conclusion

Working through the above 5 tips could take a couple of hours. The great thing about these is that they not only have a SEO benefit, but also increase your site’s usability.

1. Increase the value of your pages and declutter your site layout, by removing unecessary links.
2. Ensure each page and post is ranked for their own unique keywords and content by ensuring correct usage of the H1 tag.
3. Give value to your site’s visitors with relevant links and see your page views grow.
4. See what the industry pros use for the best SEO possible and give a free 30 day trial of the best SEO software a go.
5. Keep visitors from leaving your site early and give them a better browsing experience, by making your site’s pages load faster.

Final Tip…

…that you can start, but won’t finish, today.

Get links! One of the best things you can do over time for steady growth.

Link building: You’ll get more traffic and rank higher in search engines with every extra (quality) link you have. Set yourself a goal (e.g. 2 links per day) and spend a few minutes every day building links – submit to reputable directories, update your Facebook/Twitter/LinkedIn/Google+ page with your URL, etc (there’s so much to link building… a topic for another post).

By the way – the online SEO software mentioned above has some amazing tools to find link opportunities.

Get your free sample now!

A huge amount of work went into the super improved version 1.1, which you can now get a free taste of. Available in the free sample is the entire table of contents as well as the first 4 chapters of the the first part of the eBook.

If you’re thinking of buying the eBook and you want to get a feel for what is inside the cover, then this is for you.

There is one catch – you get access to download the free sample after signing up for You Make The Website’s email newsletter. The newsletter is sent infrequently (I hate getting daily useless emails too) and when it does come, is full of the best tips and articles from around the net.

Access your free eBook sample now!

In this article:

• Code snippet: display something only on (or on every page except) the home page.
• How to customise the code for precise targetting of content.
• How to use this code for a better user experience.

There are many cases where it makes sense to either show something only on the home page or show something on all pages excluding the home page. This short article will show you how to do both, using simple PHP conditional tags in a WordPress website.

For example, on my Japan travel blog (a WordPress site), I wanted to show a list of recent posts on every page except the home page – it doesn’t make sense to have a list of recent posts on a home page of a blog, which is already displaying the same content.

WordPress site sidebar – Home page v. Blog post.

So we use this little snippet of code – a PHP conditional tag – to select to show something on the home page or not. If you want to mimic this sidebar display, find the sidebar.php file and add the code below.

Display [insert contents here] Only On The Home Page

<?php if ( is_front_page() ) { ?>

… insert contents/code here…

<?php } ?>

This snippet of code is simply saying: if the current page is the front page (i.e. home page) then show everything inside the PHP tags.

Display [insert contents here] On Every Page Excluding The Home Page

<?php if ( !is_front_page() ) { ?>

… insert contents/code here…

<?php } ?>

The ! makes this statement a negative, so putting it before is_front_page is saying “if the page is not the front page, display everything inside this code”.

Customisation for Targetted Communication

You can adapt this code for other uses. For example, you might want to serve up a relevant link only on a certain category or tag page. All you have to do is change is_front_page and then specify the category or tag.

Replace is_front_page with the following to customise:

• is_single() – single posts (not pages or the front page).
• is_page() – pages (excluding posts and the front page).
• is_category() – category pages.
• is_tag() – tag pages.

See the WordPress codex page on Conditional Tags for further customisation.

How To Apply This Code For Great User Experience

As mentioned above and in a previous post about user experience and information architecture, giving your visitors the most relevant content – at the right place and at the right time – will make for a satisfying experience for your users. It can also, among other things, lower your bounce rate and increase average pages viewed per visit.

Think about each content type and each different view. For example, on a typical site you’ll have a home page, blog main page, blog post page, category/tag pages and other static pages (contact/about page). Here are some examples where you should selectively display certain parts of content:

• About Page: you don’t need to display your “about us” snippet in your sidebar.
• Contact page: you don’t need to display that mini contact form in your sidebar/footer.
• Sign Up to Email Newsletter: you don’t need to display the mini subscribe form anywhere else but in the main content area.
• Follow Us (social links): on a dedicated page about following/liking, etc, you don’t need to have the sidebar/footer badges/boxes/links to your social profiles.

Considering what the user is seeing on any one page, what options are available to them, and where you want them to go will result in a better user experience.

Selectively display pieces of content, experiment with the alterations, and monitor your bounce rate and pages viewed per visit stats.

Learning from your mistakes is the best way to learn, so learn from my mistakes and have an easier time building websites!

This post is a retrospect of the lessons I learnt from working in digital teams planning, creating and marketing websites. Thinking back before that, before any real formal training, if someone told me about these 10 things below I would have saved a lot of time and made far better websites.

1. Spend More Time Planning

Don’t know where the finish line is?  Well then you’re going to be running around for a while trying to find it…

The amount of time spent on planning a website is far less than the time wasted on going around in circles while you forever tweak the website. Planning gives you a clear picture of what the outcome will be, which helps you make better decisions.

It also makes for a consistent and coherent website. When you’ve planned everything in a thoughtful manner, the big picture is considered and everything fits. When working without a plan, sites become very piece-meal, messy and often buggy.

Read: How to Plan a Website.

2. Set Realistic Expectations

You have a finite amount of time, energy and money to get the website built with results you want – aim high, but be reasonable.

• Do you really need a member database with login functionality and profile management on your website?
• Are you able to acheive 50,000 visits in the first month – if yes, how do you feasibly get those numbers and what do you do with this traffic?
• Can you really make $10,000 from your website every month – how do you get revenue, what’s your marketing strategy and how do you convert visitors?

Plan for long term growth and create strategies to achieve it. Don’t expect huge numbers in the first few months – build a solid foundation and work on steady monthly increases.

The planning phase helps you set these expectations. You look at all the ideas and then narrow them down to a few that you can actual make happen.

Be realistic and optimistic about what is possible.

Being realistic should also mean being optimistic. The point is to aim high, but be reasonable about it!

3. Aim For Fast Loading Pages

Internet connection speeds are getting faster, but that doesn’t me you can make your website fatter.

Use less (or smaller) images. With CSS3 now able to make rounded, shadowed and gradient buttons, as well as rounded tabs and more, it’s amazing to discover that the average size of web pages is going up – not down.

Our brains are stimulated and working at high speeds when browsing the net. Make sure your site is served up quickly to quench this stimulation.

The file size of each page has an impact on your SEO (Page Speed score) and the user’s experience. Data from big websites like Amazon show us, that slowing down the page load by even a few split seconds results in more people leaving your page before it loads.

4. Agile Development

Protype, test, refine.

Agile Development is a model for managing development (e.g. programming projects). When working with WordPress themes (or any general site development), develop in agile mode.

Agile is a well known project management methodology for professional developers. You can easily learn from this model.

The agile method of running projects is quite indepth, but for solo or small team efforts in building websites, you can take away these 3 basic steps:

• Prototype – all the core bits of functionality (forms, feeds, sliders, widgets) are doing what they should. They aren’t necessarily formatted (i.e. designed) perfectly – but they work.
• Test – methodically check each piece of functionality and take notes of what needs fixing.
• Refine – finalise testing by fixing everything and complete the refinement by polishing off the formatting.

This is a good basic model because the tough part of most projects is often getting the functional pieces to work. If you try to force these into some HTML and CSS you generally take longer to get things perfect.

5. Ask Lots of Questions Before Buying a WordPress Theme

Some premium WordPress theme developers make hundreds of thousands of dollars every year. Get your money’s worth when buying from them.

The details page of a premium WordPress theme will tell you about all its fantastic custom features, like “SEO ready WordPress theme” or “9 fancy sliders”. When considering buying a premium WordPress theme, ask lots of questions of the developer and make sure it can handle what you want to do.

Read:

• Choose a WordPress Theme: Comprehensive 11 Point Checklist
• Premium WordPress Theme Marketplace

6. Don’t Keep Running Past the Finish Line

Browsing the net everyday, we are bombarded with inspiration and ideas… maybe I’ll add that cool thing to my site!

You could tweak forever – make a clear finish line and when you reach it, don’t keep running. This tip has its roots in tip number 1 – plan more.

While it is important to have a great looking and functioning website, you need a defined milestone when you say “OK the site is finished – now I’ll spend my time building links/blogging/getting email subscribers (whatever will make your site a success)”.

That being said, you’ll need to redesign or make a new website one day. I suffer from the “I want to add that cool thing to my website” affliction on a daily basis. There are a few ways I keep track of these ideas:

• Take a screenshot and add a note about what you like and how you can use it.
• Bookmark the page in a dedicated bookmark folder (e.g. inspiration/future website redesign).
• Add it to a tickler or calendar to remind yourself of it later.
• Add it to a “project support” folder/document (I’m a big fan of the Getting Things Done method… readers of this book will know what I’m talking about here).

Everything is at hand to inspire your next project. Then when the next website comes along, so does the chance for increased awesomeness!

7. Words Matter

A great design will get noticed, great website copy will get the user involved.

WORDS MATTER! Make them powerful.

While you may have a keen interest, or are experienced at making websites, chances are you’re not a seasoned copywriter. The actual content on the page matters more than anything else on your site, so by having powerful marketing copy and concise body content, you’ll have a more effective website.

This has been one of my biggest lessons learnt – I tend to write too many words – but over time I have been reading and practicing how to write better headlines, body content and marketing copy. The practice has paid off – but there is always room for improvement!

8. Social Success is Hard Work

When you go in as an unknown, you need to build trust and reach out before you can get loads of friends.

To be a winner in social networks, it takes time and involvement. You need to be a member of that community, talking to other users, engaging with their content, unselfishly sharing their content and more…

The key at the beginning is to not spread yourself thin – you don’t have to be on every social network all the time.

The strategy I take is focus on one social network at a time. Build an engaged follower base on that social network before launching the next one. When you do launch subsequent profiles on other social networks, you’ve got an existing follower base to help spread the word (and many will join you!).

Read:

• Twitter Basics: Become a Master With These Easy To Follow Tips
• Google+ Page Profile Design – Free Template

9. You (Don’t Get Others to) Test Enough

You either don’t test enough, or when you do, you don’t involve others enough.

Testing is important.

Actually, testing is very important…

If you follow the agile approach (tip 4 above) then you’ve done a good job throughout the process of building your site to ensure that everything is working. A dedicated testing phase at the end should be a more complete view of the entire site, including the user experience.

Get others to use and test the site before telling the world about what you’ve made. Show a few people, but one word of advice… don’t react to everything they say. You’re testing with a small sample here. Carefully evaluate the feedback and only change what is necessary.

Read: How To Make Your Website Professional. The Testing Phase.

10. Collaborate

Do what you’re good at, and use others (or use their work) for the stuff you’re no good at.

Don’t try and do it all yourself. Even for small websites, if your aim is to have it look professional and achieve professional results – get the pro’s to help you or you can use their work.

How do you use their work? Stock assets – such as stock logos, premium WordPress themes and stock icons, photos or illustrations – are industry standard assets which will give your website the professional touch.

Take these 10 tips onboard for your next website project and see how much smoother the process is!

Like what you just read? Get the monthly-ish email newsletter with subscribe-exclusive tips and ideas.

eBook: Learn More & Buy Now

Brand Spankin’ New Cover!

Version 1.1 is a significant update to the original version (v1.0 was released in October 2011).

• Changed name from You Make The Website to Plan, Create, Promote, Maintain… Your Own Website.
• Major update to the design including page layouts, section introductions, icons and a new cover.
• ’1.1.1. A good & popular Internet browser’ was updated to include instructions for Google Chrome which has recently increased in popularity.
• ’1.2. The 20 minute digital “business” plan’ has been updated, making it easier to define your goals.
• Moved the entire ‘Planning your site’ section into ‘Part 1: Plan’ for a better project flow.
• General updates to reflect the release of WordPress 3.3.
• Major expansion of the ‘Maintain’ section, with step-by-step instruction on how to backup and optimise your website.

Get a professional website, save time and money by doing it yourself. You can do it with our eBook: Plan, Make, Promote & Maintain… Your Own Website!

eBook: Learn More & Buy Now

It’s faster and safer to run WordPress on Mac (or any platform!) locally when developing sites.

So follow the steps below (video screencast included) to create a local WordPress Mac install in just 5 minutes.

1 – Download and Install MAMP

MAMP is a free program that creates a server environment for your local WordPress Mac install. It mimics a remote host with an Apache Server and MySQL Server.

Download MAMP from http://mamp.info/en/downloads/index.html.

Install the program as usual and use MAMP (a 14 day trial of MAMP PRO is also include with the download).

The video below is a screencast of the steps that follow. You can either watch the video, read the steps below… or both!

2 – Launch MAMP

Open Finder and in the MAMP folder launch the MAMP application.

If you launch MAMP and the two green status lights are on… you’re good to go. You may have to wait for both to connect, anymore than 1 minute and you may have issues.

When both the Apache and MySQL Servers are connected, the start page will automatically open. If it doesn’t automatically open, just click the Open start page button on the MAMP application screen (see screenshot above).

The start page contains useful details and access links for working locally.

You’ll need to use the details under MySQL later when configuring WordPress.

3 - Create a Database for WordPress

From the start page, click on the phpMyAdmin link under MySQL (I suggest opening in a new tab as you’ll need these details later).

From the phpMyAdmin home page, create a new database. Enter a name for the database, check the two drop-down boxes are the same as in the screenshot below, then click Create.

You can name the database anything you like, just make it easy to remember.

4 – Download WordPress Files

Download the lastest WordPress core files and extract them into the htdocs folder inside the MAMP application folder. Imagine htdocs is the root or public_html folder on a live remote server.

In this example the WordPress files have been extracted to the root folder. If you like, you can setup sub-folders inside htdocs for multiple WordPress websites. If you want multiple sites, remember you need to create a new database for each site.

The htdocs folder is the local equivalent of the remote public_html folder.

5 – Update MySQL Base Configuration Settings

• Rename wp-config-sample.php to wp-config.php.
• Open wp-config.php in a text editor.
• Update the database name (replace database_name_here next to DB_NAME with the name of the database you created in step 3).
• Update the username (replace username_here next to DB_USER with the User name on the MAMP Start Page. By default this is root).
• Update the password (replace password_here next to DB_PASSWORD with the Password on the MAMP Start Page. The default is root).
• Save the file.

Here’s the edited wp-config.php file – there is only 3 things to change.

6 – Install WordPress

This is the final step to your local WordPress Mac install.

In a browser window go to http://localhost:8888/wp-admin/install.php. The http://localhost:8888/ is equal to Applications/MAMP/htdocs. If you have put your WordPress files in a sub-folder inside the htdocs folder then add that into the address (e.g. http://localhost:8888/SubFolder/wp-admin/install.php).

Simply fill in the details (Site Title, Username, Password, Email), click the Install WordPress button and you’re done!

You can then login to the WordPress admin and start working away just like you were online.

Next we’ll take a look at how to take a copy of a live WordPress site on a remote host and create a local copy of it on your Mac. Sign up for very infrequent email alerts to find out when that post is published.