Web Design, Digital Marketing, Lead Generation and Hosting Tips

Web development: A technical guide for non-technical people

Newedge Posted on 1 November 2016 by Newedge
Category: Technical Guides

Are you bamboozled by the onslaught of technical terminology required to understand website design and development? One of our core ambitions at Newedge has always been to talk with clients at a technical level that they are happy, comfortable and confident with.

In this guide we are going to walk through some of the commonly used terminology to help you make sense out of it all. Instead of A-Z we have taken the approach of a content managed web project from start to finish.


In the beginning

Site Hierarchy

A site hierarchy will map out the structure of a website, what pages it has and each pages functionality requirements. For example a case study page will have an image, title, description and testimonial with links to related case studies.

Page Templates

Not to be confused with pre-made or purchased stock templates, page templates are in fact templates for different page layouts, for example a different page template is required for a meet the team page when compared to a case study page. We describe all the different page templates required for the website and then use wireframes to layout the page.

Wireframes

Wireframes plan a individual web page's layout. They are cost effective, quick to do and allow you to play with layout before you even think about design, content, typography and images.



Mockup

From the wireframes a graphical mock up of the websites look and feel is produced. This will add colour, typography (font styles) and imagery to the wireframes to give you a real sense of what the final website will look like.  

Cut up

After producing the graphic design, which can be thought of as a flat image, each individual element needs “cutting out”, i.e. every button, image, slider, menu and text needs cutting from the flat image and putting into the websites code base and structure. We cut the website up and put it into a grid system.

Grid systems

Bootstrap framework is a 12 column grid system, meaning you can change a websites layout by altering the number of columns a certain element sites within. Some examples are below:

 

Responsive web design (RWD)

This is a technique we use to make your website change shape and size to fit any device, iPhone, iPad, laptop or desktop. Bootstrap framework is built around the “mobile first” responsive design principal, meaning we build for mobile devices first then scale all the way up to the desktop version.  


Making it real

Frontend

When we talk about the front end, we are usually describing the customer facing website, i.e. your brochure website or ecommerce stores actual shopping pages. It can be thought of as everything you would see as a normal visitor to the website.

Backend / Backoffice

When talking about the backend or backoffice we’re describing a secure area where you have password controlled access to. This area will control functionality and content on your frontend.

Coding languages and open source

Open source simply means software that has it’s original source code (the engine of the software) freely available and may be redistributed and modified.

Coding languages we open source developers commonly use:

  • PHP - This is server side code that controls functionality on your website before the page is served to your browser window.

  • HTML - Control the layout and structure of your website like forms, menus, headings, titles and so on.

  • CSS - Controls the look and feel of your website, defines fonts, colours, positioning, backgrounds and so on.

  • JavaScript / jQuery - Allows us to interact with the visitor and their browser with such functionality as validation on forms, scrolling banners and image gallery lightboxes.

Databases

Think of a database as a excel spreadsheet, it holds information and data about your website and allows you to make amends to your website by overwriting existing database records. For ecommerce websites it holds information on customers, orders, products, categories and so on.

We use MySQL databases for all our websites and ecommerce stores. It’s another open source database system that is freely available and is the second most commonly used in the world.

Frameworks

Frameworks help developers by having pre made components that are (usually) tried and tested, meaning we don’t have to reinvent the wheel every time we need to add a button, tooltip, form, slider or image gallery to a website. There are of course tons of frameworks out there, however you will commonly hear us talking about:

PHP

  • CodeIgniter

  • Laravel
  • SilverStripe (Content Management System) and Sapphire (The framework it runs on)

HTML/CSS Frameworks

  • Bootstrap

  • HTML5 BoilerPlate  

JavaScript

  • jQuery

  • Ember.js

  • Node.js (More of a platform than a framework, but nonetheless)

Content Management Systems (CMS)

A CMS allows you to control the content of your website, by editing pages though a word processor style rich text editor, uploading images, controlling navigation, etc.

We use two content management systems:

  • SilverStripe

  • WordPress

Site population

Putting the meat on the bones, site population is about putting all the real content for the website into the content management system


Going live

Handover

This is where you get trained on how to use your website to get the maximum benefit. It’s an opportunity to ask final questions before pushing the button!

Pushing the button

This describes putting the website live to the public, uploading it to the hosting server and switching the domain name to point at the new server. We do this all the time, so will handle everything for you for seamless switch over.

Hide comments