Web Burble   How_To_Build_A_Website

 

How To Create A WordPress Website

speed up outlook

go tour thailand


web design

Keep the methods consistent and have a checklist to ensure you keep to a standard to ensure a high level of quality and not get lost in having to re-do tasks. This is especially true if you have several people involved in the creative process.

 


Research

Search the Internet for websites that are in the same category as the site you want to create and make a list of ideas and design types on how you want your website to interact with visitors.

 


Design

It is critical to keep visitors engaged by creating an effective design. In particular you will need to plan your color scheme, layout, fonts, quality images, navigation, speed and quality content with correct spelling and grammar.

Templates are intrinsically linked to how you want your website to look. Design your website first and then begin the creation process.

 

Basic Considerations in Design

  • Keep it simple and elegant to impress - "love at first sight"

  • What typography to use - typefaces need to be easy to read, usually no more than two or three for the entire website, large and smaller font size, tested in each browser that it looks good. You can choose from a huge array of Google Fonts that is suitable to download and install into your PC and link to your website pages.

  • Consider what to include - redesigned logo, menu system, live chat, blogs, community forums, online shopping, contact form, newsletter e-mails, advertising, calendars and events, search function, document downloads, gallery of images and videos, booking reservation system.

  • And what not to include - slow flash content that may look good but are slow to load and can also be just annoying, music and unwanted voice-overs, pop-ups trying to engage the user but invariably interrupt and annoy the visitor.

  • Navigation is critical to keep visitors interested and engaged. Not just menus, but breadcrumb links if pages drill down more than two levels, Previous and Next buttons, To Top button for each page and category lists of article types.

  • Create internal links between pages for items on one page that have extra informational content on other pages.

  • What color scheme to use for your website. See the list of links below for tools and examples.

 


Layout Plan

Depending on what your website is all about will influence how the layout should look like and navigate.

Below are some typical layouts for web pages.

 

Stacked

 
LOGO

 
MENU

 

CONTENT


 
BLOG POSTS

 FOOTER

 

Classical

LOGO



MENU




CONTENT






BLOG POSTS
FOOTER

 

Boxes

 LOGO
BLOG LINK SOCIAL LINKS SEARCH



CONTENT



 
CONTENT


CONTENT

 

Grid

 LOGO
 
 BLOG LINK SOCIAL LINKS SEARCH




CONTENT



 
IMAGE

 
IMAGE
 
IMAGE
 
IMAGE

 
IMAGE
 
IMAGE

 

Single Graphic

 LOGO
 
 BLOG LINK SOCIAL LINKS SEARCH




LARGE INFO GRAPHIC OR IMAGE




 

Fixed Sidebar

LOGO


MENU ITEM
MENU ITEM
MENU ITEM

 HEADER
   
 

CONTENT


 


IMAGE




 


IMAGE






 
IMAGE
 CONTACT DETAILS  SITE MAP  BLOG LINK

 

Gallery

 LOGO AND MENU

IMAGE


IMAGE

IMAGE

IMAGE


IMAGE

IMAGE

IMAGE


IMAGE

IMAGE

IMAGE


IMAGE

IMAGE

IMAGE


IMAGE

IMAGE

 

Complex Grids

 LOGO
 
 
 MENU
 
 
CONTENT AND IMAGE

 
CONTENT AND IMAGE

 
CONTENT AND IMAGE

 
 
CONTENT

 
CONTENT
 






IMAGE
 
CONTENT

 
CONTENT
 
CONTENT

 
CONTENT
 
CONTENT

 
CONTENT
 FOOTER

 


Objectives

Design the website for visitors and potential clients, not for you or for impressing the CEO.

 


Content

Articles in Categories, Blogs, Forums for encouraging discussions, eCommerce shop front, contact form, emailed newsletter subscription, Calendar for upcoming events, RSS feeds such as news events pulled from news websites, a Google search function (use a paid subscription to Google so as not to have adverts),  staff directory or sales contact numbers (dont use email directly as this will be "scraped" by spam bots), social media links from facebook, twitter etc.

 

Do not write content in document writers such as MS Word and style the words as it will produce very bad code which will cause issues when using it within a web page. Styling comes later which will use Cascading Style Sheets (CSS) where the classes will give the text and other content its color, alignment, size, font, shadowing and much more if required. Your CMS will have an editor to create articles for your website and this would be the easy option. Using a good WYSIWYG editor you can use the CSS styles for the text and images etc.,  and see what it actually looks like as you create content.

 

Do not use in-line styling unless necessary. This is where you can style each individual content item using the formatting selectors within the editor for such things as font color, size, boldness, underline, alignment, etc. The issue is when you want to change all your content to have a different font or size or color etc., you will need to edit every single formatted item in every page to change the style.

The HTML code in the webpage will look like the example below for every single paragraph on every single page if you use this method. The web page size increases dramatically which will also have the effect of slowing the load-time for visitors.

<p style="color: blue; font-size: 24px;">

 

You need to keep the style and the content separate. Always use CSS which is a separate file to store the classes for styling content. An example could be  template.css  as the main cascading style sheet. Apply the style types (classes) to the content. Modifying the style of the entire article and all pages can be easily done by changing the style class in the CSS file once. This affects all content in the entire website if you want it to look different and makes the design process easy and quick.

This example is the code within a CSS file that effects all text in paragraphs for the entire website. All <p> tags in the web pages will use the new color. Paragraphs are common in all HTML and is a pre-defined tag that can be overridden as the example shows below. Only the color will be overwritten from the default style that the web browser will allocate, or any previous paragraph class definition in a CSS file(s). Ensure any override of an style type within a class is defined in a CSS file after any previous defined style. For example, if the color of text in a paragraph is loaded from a CSS file after your CSS file then you lose that color change. This is why CSS is a "cascading" type of style sheet. Normally basic styling is loaded by the CMS and then any subsequent style sheet files are loaded into the web pages afterwards.

The example below (with comment) will only overwrite the color of the text in a paragraph. Any previous existing paragraph styling such as the text size or font will NOT be lost.

 /*All paragraph text color to Dark Grey*/
p{
    color:#555555;
}

 

You can also create classes for styling that will only work within a predefined HTML tag such as paragraphs.

The code within the CSS template file.
p.firstpara{ color: blue; }
p.secondpara{ color: red; }

Using the class within the HTML web page.
<p class="firstpara">Example paragraph using the p.firstpara class </p>
<p class="secondpara">Example paragraph using the p.secondpara class</p>

 

You can also create your own distinct class for styling anything that accepts that type of styling as valid.

The code within the CSS template file.
.makegreen{
   color: green;
}

Using the class within the HTML web page.
<h1 class="makegreen" >Example header using the .makegreen class</h1>

<p class="makegreen">Example paragraph using the .makegreen class</p>

 

Your CMS will normally have a section where you can edit the CSS files of the currently used template. The WYSIWYG editor for creating content will then normally list the new class you have created and list it in a styles drop down box. Simply highlight the area in the content such as a paragraph and select the desired class. If your editor does not pick up the class then it is not linked to the CSS file and you will need to edit the HTML code manually, but normally your editor has a configuration section to load the current template CSS.

 

Purchase images from stock photo websites for general graphics and images and hire a photographer for specific company images, do not take photos yourself or just some-one who has nice camera.

 

Social Media

Create accounts in facebook, twitter, pinterest but ensure you have the right person with a savvy skill set for this type of work, and the time to manage content properly. Devise a plan on how to use this type of media and ensure everything goes through an approval process to ensure things don't go viral for the wrong reason.

 


eCommerce

If you are going to sell products or services in a serious way, then don't do it on the cheap with some free add-on app to your website. Sales are built on Reputation and Trust.

 


Metadata

Plan how you will include page titles, meta titles, h1,h2,h3 etc header tags, meta descriptions on pages and images. Using your CMS you will be able to create metadata for browsers when you create your menus, articles, categories etc.

 


Quality Assurance

  • Usability testing with non-technical people.

  • Spelling and grammar checked by a competent person using a spelling and grammar check software. The editor you are using within the CMS should have a spell checker toggle button.

  • All internal and external links on pages work as expected.

  • Test in all the various browsers such as Mozilla Firefox, Internet Explorer, MS Edge, Safari, Chrome, and not just the current versions but also the previous version.

  • Test in PC screens, tablets and mobile phones in both horizontal and vertical display.

  • Page loading times are within a few seconds.

 


© 2018 WebBurble.Com. All Rights Reserved.