How to design and
build a website

WE SHARE THE TRUTH ABOUT HOW TO DO IT RIGHT!

If someone gave you all the parts and tools to build a car, do you think you could do it … and make the finished result as good as a car assembly line?

Some online build your own website companies imply the exact same idea about building a site. Phases like “it’s quick and easy -  just drop your content in, drag and drop where you want and hey presto a beautiful website” They make it all look so simple, quick and easy. IT'S NOT!

You can guess where we’re going here … sure, you can cobble together a website once you have read all the help files, watched a dozen videos and made a few mistakes, but all those  things will take time and the finished result is likely to look less than professional and perform badly with search engines.  'Nice try, but ok', you say, 'it was cheap and it’ll do for now'. Many of our clients come from that background when they finally realise their business is suffering.

We believe in saving you the frustration, disappointment and embarrassment of a poor website by offering an ‘assisted build’ that teaches you how to prepare resources and content. How to deliver it in a well planned and structured way so that we can assemble your vision with skill, expertise and fineness. The result will be professional, effective and you will be happy.

How to design and
build a website

We want your website to look great and function efficiently. Because we're nice people, we're going to give away some essential secrets to how to design and build a website. We have to work with each one of these issues every day with clients, so we know how important it is to get all these points in place. Miss any of these steps out and you can break a website's effectiveness! We're not joking here ... if you follow our tips below, your website will be on the super-highway to success, both in design and functionality. If you get these wrong, your website will just not be as good as the others. Read carefully, study the diagrams and plan creatively!

Designing and building a website requires at least 2 essential skills. Great communication and careful planning. You need to tell us clearly and we need to know unambiguously. Put those two together and we already have a great team!
- KNOW what you want and ...
- TELL us what you want ...
the rest is up to us, so you can sit back and see the results!

We're going to help you do your part by letting you into some secrets to designing and building a website, regardless of whether we're meeting personally in our office, or communicating from any place in the world. Get these right and it will work either way.

1

Using the right length of text areas

Web design is NOT like print design. In a book or magazine, you work with a fixed canvas dimension. The height and width of the available page always remains a constant. Web browsers, screen sizes, screen resolutions, mobile phones, tablets and orientation all change the way a web page will look. And this is often more than a minor change in layout.

Your web page will not only look different on different screens and devices, but because of the mobile responsive requirements, the layouts will also change, usually stacking blocks and elements one under another. Line breaks may appear in different places and text areas will become deeper in length or wider, according to how the screen size adjusts the flow of content. If your texts need to be long and detailed, choose a design that accommodates longer text areas. This usually works best when text areas are not side on against images. Remember, texts will flow into longer vertical blocks on small screen sizes, images remain in the same proportions.

When you look at any demo, take a close look at how many words occupy any block of text. Imagine what would happen if you added more words, or less? Will it make some adjacent block unbalanced, push up or down a block element, or just look wrong because things are out of line?

Getting the right word count is essential in good design. Not only because of the way it can effect the layout, but also because your visitors usually want the skinny, to-the-point version of what you want to say. We call this skill 'good copywriting'. It's not as easy as it looks to get the right word count. If your text is too long, you have to cut it down, while maintaining the message and meaning. If it's too short, you have to expand message and meaning without superfluous wordiness. Blocks of text need to be balanced for design but appropriate for content.  At the same time, you have to be thinking about SEO and maintaining engagement of the reader. We have been doing this for many years and know how hard it can be. If you're going to provide successful texts for your web sites, your text copy must be prepared carefully with all attention to these skills.

Take a look at the before after images below

ACTION POINTS
  • Assess design for suitability
  • Choose your design
  • Prepare texts for each area
  • Proof read and refine texts
  • Check word counts
  • Do you have a call to action?
GOOD DESIGN BAD DESIGN

2

Images - landscape/ portrait and colours

Imagery can make or break a site. Good photographs that have been carefully selected for size, details and correct orientation are essential to make your website come alive, both visually and to set the tone and ambiance of your message. Too many photographs that come across our desk from clients are taken with a smartphone of poor quality and wrong orientation. We have even had artists send us 'portrait' photos and asked us to place then in a horizontal location on the page. "Can't you just make it fit?"  NO, not without cropping and usually destroying the aspect ratio completely! When you see a photo or image in a landscape mode, please don't even think of substituting this for your own PORTRAIT image! Or vice versa ... And please send your very best photos in the largest size possible. We can't enlarge photos to fit and we can't improve fuzzy, badly formed images. Well, yes we can sometimes, but you'll have to pay us for time and expertise for Photoshop post processing.

Get professional images. If your images are not good enough, consider getting a professional photographer to do a session for you. We work closely with a photographer and clients that use this kind of service always get a better image presentation on their websites. If you are selling products or wanting a business brochure website, it's essential to illustrate your graphic areas with high quality images

Use a stock image supplier. We use stock suppliers of images like shutterstock.com and istock.com. If a client can't or won't provide quality images, we have to source elsewhere. Also look at free images on sites like Unsplash

Don't take images from other sites. Tempting though it is, to search on Bing and Google for that ideal picture, many images are subject to owner copyright and you run the risk of infringement.

Take a look at the before after images below

ACTION POINTS
  • Study your design
  • choose your colour pallete
  • Select images to match locations
  • Make sure they are high quality
  • Do you need a photographer?
  • Have you considered stock images?
GOOD DESIGN BAD DESIGN

3

Colours, artwork and logo

Designing a website requires a skilled eye for creating an overall balanced look. Your text and images supply information and data to the reader, but the way you present them conveys style, ambiance and an abstract sense of who you are. Your website is essentially a 'marketing exercise'. At the beginning of a project, you must decide on how you want your reader, visitors or buyers to perceive your identity. How do you come across? Colourful, untamed, adventurous? Cool, sophisticated, established? Professional, business-like, understated? You can think of terms like this that may describe HOW you want to be perceived.  Your website is a shop window to all that you are as an online presence. When you populate that 'shop window' you are displaying your brand in the best way possible.

Choose a colour pallete for your website that fits and compliments your brand and content. If you are a start-up business, you'll need to consider all these elements from the beginning. This maybe a good thing, as it gives you the chance to really evaluate and define your identity as an individual or business in the public arena.

Colours for print, colours for web. They are NOT the same ! It may come as a surprise, but your 'favourite in-between green and blue' colour is almost guaranteed to look different on every screen it's viewed on. Pantone colours are suitable for print, but rarely convert to reliable renditions on web browsers. If you are a company that already provides printed material in any form, then be prepared for a possible less-than-perfect translation of your colours and branding to a website. We'll match closely your pantone and RGB values, but the difference between print and screen renditions may be evident.

Artwork. Along with photo images, artwork may comprise of icons, flourishes, background watermarks, abstract elements, banners and title backgrounds. The same design rules apply to these as for images and photographs as well as the rendition of colours. We often utilise artwork to compliment and embellish a design, but not to take over and become a distraction to the main content, be that imagery or text. The use of accent colours is a powerful way to 'lift' the overall design and draw attention in a subtle way to important elements such as menu colours, links, secondary header titles and textural emphasis. The rule of thumb is 'More is Less'

Logo Design. If you already have a logo or insignia that you use as part of your identity and branding, we advise using this as the main logo for your website. This may well direct the use of other colours and artwork so that they support and echo the visual of your logo branding. Again, we advise to keep the relationship between embellishment and actual content very low key, so as to keep focus on the primary objective of your website. We offer professional logo design if you are starting from scratch, or it maybe that your existing logo needs adjusting to fit neatly into the web page design. Either way, we are here to help and represent your brand excellently.

If you are providing us with a logo for website use, in most cases we need a high resolution image in transparent .png format, AI, or photoshop .PSD

Take a look at the before after images below
See if you can spot why the first image works better

ACTION POINTS
  • Do you have a logo?
  • Do you need us to design a logo?
  • Does your logo suit your design?
  • Does your artwork compliment your logo
  • Are your colours complimentary?
GOOD DESIGN BAD DESIGN

4

Choosing a domain name and purchase

Every website needs a domain name. It's the equivalent of a name plate that you put on your front door so that the postman can find you from an address. Domain names are always unique and usually point to one specific website. However a domain name also has a suffix, or TLD. Top-level domain (TLD) refers to the last segment of a domain name, or the part that follows immediately after the "dot" symbol. TLDs are mainly classified into two categories: generic TLDs and country-specific TLDs. Examples of some of the popular TLDs include .co.uk, .com, .org, .net,  .biz.

Certain TLDs are reserved for institutions such as  .gov, and .edu. Also worth noting that a domain like zonepole.com is not the same as zonepole.co.uk. That last segment makes them different and one might go to a totally different site. Why does this matter? Let's say you are starting a business making garden washing line poles and you call it a 'zonepole'. You want a domain that matches your product ... usually a good idea. So you go to your registrar and search for zonepole and see that that zonepole.co.uk is available. Great, you buy it to connect to your new website. Your site is built and launched and a while later you wander why you are getting weird contact forms and spam about 'pole dancing'! You search google for zonepole and see a site zonepole.com, advertising naked pole dancing! Yes, some people will search for your product and not readily make the right clickthrough ... and... possibly never search for you again.

Moral of that story ... check all the versions of the domain you might want to buy. Make sure there is no dubious site using a different TLD with the same name as you AND beware of buying a domain name with the same name but a different TLD to a direct competitor.  If that competitor has trademarked, registered, or patented the name or product,  you may end up in a legal conflict of interest.

Your domain name MUST be your legal entity. This means buy it yourself, under your name, from your registrar and don't allow any unauthorised person to gain access to it. We have heard horror stories from clients that have come to us for help because their previous web provider did everything for them including purchasing a domain name on their behalf and now refuses to release the ownership.  Legally, whoever registers the domain name is the legal holder and owner. The way we manage domain names is we recommend you use our preferred registrar - LCN.com There is no hard sell with them, setting up is easy and you will always deal with a straightforward system. Ideally you buy your domain for as long as you can afford, as this gives better confidence and authority in search engine ranking (we'll talk more on this later) and if you believe your domain will represent a potentially high flying business, buy as many TLD version as you can afford. Why? See the above story to understand what could go wrong!

How we handle the domain connection. Because YOU are the legal owner of the domain, we can't connect your website to it without access to the domain control panel. We have to have access once in order to make this happen. We ask that you provide the domain control panel login once only when the site is ready for connection and then change the login password to something strong and different to the one we used to gain access. Now we both know that the domain access is again back in your sole control and no-one else has access, including us.

Choosing a domain name. This is a personal choice, but your domain name can have a considerable impact on your ability to be found in search engines. One factor that influences search engine position is the relationship between your target markets most common search terms and the content of your website. If that content and its keywords are also part of your domain name, this builds a strong correlation that your website is highly relevant to your target market search terms. If many searchers click to visit your site and spend time on it, this sends a message of confidence to the search engine that says it was a good choice for our clients (i.e. people who are searching) and we'll move their search position up higher in results. So now you may see why a taxi service in Mossborough who buys a domain name called MossboroughTaxis will do well when people search for 'Taxis service in Mossborough' and probably not do well if the owner of the taxi service, Joe Smith decides to use a domain 'JoeSmith' UNLESS ... he already has a well known and established reputation because of his name as a taxi service, in which case 'JoeSmithTaxis' might be better. Yes, you have to get into the heads of your target market, understand their needs and how they might search for them.

ACTION POINTS
  • Do you have a domain name?
  • Do you have access to the registrar login?
  • Do you need help getting the best name?
  • Do you know how to register a domain?
  • Do you understand why we need to login once?
  • Do you know how domains can affect SEO?

5

Choosing an email and contact details

We recommend that you use an email linked to your domain, something like info@mydomain.co.uk the 'info' part can be anything you want, but keep it short and easy to remember. If you use our recommended registrar, LCN.com you will get one free email for each domain you purchase. More mail boxes can be added when you buy your domain, or added later. You can also add extra space to your email box as part of an addon package. This email can be used to send and receive emails in your ordinary browser, or connected to an app, or work through an email client like MS outlook express. We will configure one email address for you at your registrar, but you will have to connect it to your local work stations, such as your computer, notebook or portable device. If you need any assistance, LCN have a very good helpline.

We recommend that you do not publish your email online anywhere, as this is an open invitation to spam. Instead we will install a contact form on your website that seamlessly sends all contact inquiries to any email address you want, not just the one connected to your domain. However, we recommend sending to the domain email, because if you respond to an inquiry, the recipient should recognise your website domain name in the email header and not treat it as unknown spam.

You may wish to include your business address and a map if appropriate. Please let us know at the beginning of the build.

 

 

ACTION POINTS
  • Do you already have an email address?
  • Is it part of your existing domain name?
  • Do you want to add your contact address?
  • Do you need an embedded location map?
  • Do you need other contact details shown?

6

Social Media

Social media is here to stay. Love it or hate it, we can't avoid its reach and influence in our lives. If you already have social media accounts, we can easily link to these with the usual buttons, to encourage engagement with your website and promote greater reach across both mediums. You will need to supply us with your social media addresses for all that you want to link to. This usually includes, Facebook, Twitter, Pinterest, Instagram and LinkedIn.

 

 

ACTION POINTS
  • Do you have social media channels?
  • Do you need to start new channels?
  • Can you supply us addresses for media?
  • Do you need to show videos on website?

7

Planning your website build

Building a website is not a trivial task. If it represents an important extension of your marketing profile, it deserves time, planning and commitment to prepare for launch on the world wide web. If it's going to succeed in attracting visitors, sales, enquiries, and finding your target market, it will require an ongoing campaign of online marketing and update activity.  There is no option 'B' for success, unless you simply want static web presence and a place to send your friends and contacts to find our more about you.

When we build your website, we book time so that we can commit to your project in a well managed and respectful way, to deliver a timely result, with quality and attention to detail. We hope you will do the same for us and deliver us content and resources that have been well planned and structured to fit the design. Your beginning point should be to define your absolute purpose for the website, what you want it to achieve, how it should look, what information and features it should provide and how you want people to perceive your identity. Who are you building the website for? is it a a brochure site, blog, or business portfolio? is it a sales site, does it need to bring an income for you to live on?

These are important questions because the website we build together is your representation of who you are on the world wide web ... the biggest showroom and market place in the world! We want it to work is the best possible way for you and engage in an ongoing commitment to keep it updated, performing to your expectations and excelling in its purpose, whatever that may be.

ACTION POINTS
  • Do you have time to engage this project?
  • Have you prepared all your resources?
  • Do you know your reason for this project?
  • Have you the skills to create all resources?
  • Do you need to consult with us?
  • Do you understand the value of web presence?