Website Design History of 20 Years (1998 – 2018)

Website Design History of 20 Years (1998 – 2018)


Website Design History of 20 Years 1998 – 2018 Web Design HistoryMy name is Andrew Jordan and I have been a full time self employed website designer and developer for over 20 years. As a pioneer on website design in the UK, I though it would be a nice idea to put a brief history of the website design industry together as an educational post for those who maybe interested in the way were and to show how things have changed.

The early days of website design were very different from today’s one click installs and WYSIWYG (what you see is what you get) installations and systems. There was nothing simple, very little guidance and just getting your files uploaded via FTP using a dial up modem was challenging enough itself.

In 1998 only 17.5% of the UK had access to the internet, most of the general public had never heard of the World Wide Web. So there was not a lot of companies seeking a website or willing to invest. The concept of buying something online had not arrived.

First Websites

The first website I built was a formula one enthusiast club. The website was built completely in HTML with a bit of JavaScript thrown in to manage payments and memberships. I ended up using a company in the USA to handle the payment gateway and the only bank in the UK that would support and offer a merchant account for online transactions was HSBC.


A lot of the early websites were built in Frames. This seem to offer a simple solution when using software like Microsoft’s FrontPage, which at the time was very popular. The frames page layout concept offered easy page layout with a holding page and the section pages being embedded into it. However this caused issues with search engine optimisation, because the content pages could be indexed without the frame holding index page. So a footer would be loaded without the rest of the site. A simple bit of code did correct this issue, but the index was then the only page that could be indexed and had no content other than the code for the framed pages.

Flash Animation

With the then limited use of HTML, the birth of Flash animated websites soon became popular, where the entire site was in flash. The original idea of using flash was to gain moment and high end graphics and unrestricted layout that you could not gain from using the then clunky HTML. However a flash website may look great with an attractive intro and a nice moment on the menu, the massive disadvantage was that there was no page content for search engine optimisation. There would only be one page (index) and one graphic file inserted. So a beautiful website that would cost a lot of money due the the labour intensive work involved with the flash creation, however no one will ever see it. With the birth of smart phones round the corner, Apple and Adobe dropped flash because of file sizes and security issues.

Macromedia / Adobe Dreamweaver

In 2005 using adobe Dreamweaver seemed to be the benchmark of website design and development. It was full of useful tools like code cleaners, a link checker and offered easy management of content like library items and files. You could also run the software on 2 screens to make access to tool menus and previewing changes easier. I still using Dreamweaver today for various bits of coding when needed and run our own Magpie Image intranet with it.

WordPress & Database Driven Sites

With WordPress becoming the number one system in 2010 it was easy to see why with its built in Mobile Responsive CSS, general coding and HTML became a thing of the past. A lot of hosting packages offer WordPress, Joomla & Magenta to name a few, as a one click install, which includes the SQL server database part as well. In the modern WordPress system there is very little to do with a lot of the themes including great layouts and home page functions. The latest plugins also bring massive features to the site visitors and are no more than a single click install with a few tick box selection and options.

Final Thoughts

It will be interested to see where the industry goes next. I think most changes will now depend on advancements in technologies, media and trends.

I hope you found that was interesting / Andrew Jordan

Get Some Top Notch Training

Can’t update your website?

WordPress editing course GoucesterYou probably already have a company website – but you may be unable to update it yourself which means that you have the potential for a hefty bill every-time you add a new product or service and need the services of a web developer to add these things to your existing site.

This is why small businesses are turning to WordPress to provide them with a website that they truly can ‘own’. With a minimal outlay on staff training this is well worth your investment as good training will allow you to update and maintain your site easily without incurring any extra charges. You can even give your site a regular makeover by changing the ‘theme’ once you or your staff have become confident WordPress users.

Get Some Top Notch Training

Good hands on training is key to this, along with good back up should you need it. At Magpie Image we have years of experience to share with you and our inexpensive WordPress courses will set you up confidently in a day and with further training available at a later stage you can be secure in the knowledge that you have a friendly professional WordPress user in your back pocket should you encounter any issues.

Courses are £220.00 inc VAT and can be tailored to suit your exact needs – you can even use your own site build to train on! But it doesn’t stop there, we can teach you WordPress editing skills, give you tips on writing good copy (or write it for you) and we also run courses in SEO digital marketing to help you get a digital handhold as quickly as possible.

No Time Like the Present!

What are you waiting for?! Contact Magpie Image today for advice on rebuilding your website in WordPress or learn how to build yourself a fully responsive smart new site with top search engine ranking and find out how to keep it updated and properly maintained from the people who have been using WordPress successfully for years…

For more information on our courses please click here >

Setting Up Your Own WordPress Site

Setting Up Your Own WordPress websiteSetting Up Your Own WordPress Site

Setting up a free WordPress blog website couldn’t be easier – or could it?

Sure there are plenty of online WordPress tutorials and advice regarding how to set up and start using your website. However, if you are after a professional looking site with superb functionality you should seriously look at getting some hands on tuition from people who use WordPress on a daily basis – and have been doing so for some time.

Control Your Online Presence

WordPress can be very user friendly and it is generally straightforward but has thousands of Plug In options and can be very powerful. This can be quite daunting for the inexperienced user. Individual or small group learning can be invaluable if you are looking to bring your website in-house. You will need to be confident in your own skills, or those of your staff so setting about WordPress training the right way will not only save you time and money but will give you complete control of your online presence.

Choose a Trainer Who Will Give You Back-up

There are plenty of online courses available, but choosing a trainer who will also be able to give you back up should you need it is a better choice. Take a look around some of the trainers own WordPress installations to get an idea of their skill level.

Smart Thinking

An experienced web developer will also be able to take your existing website and teach you how to transfer it into a WordPress theme – saving you a lot work (and money…! ) So if you are a small business with limited resources, investing in a little WordPress staff training could provide you with quite a dividend. A smart web presence, and smart staff able to keep it up to date and looking good.

How to create a Newsletter

How to create a Newsletter

Getting a Grip

website design newsletterHow often do you check your email in-box and immediately move items to the recycle bin without even opening them? Your time is precious and you don’t want to waste it reading things you don’t remember signing up for – so how do you go about producing something that someone else will want to read and not just drag and drop into the bin? Well, for starters you will need a subject line that piques your readers interest so go for a statement that gets their attention rather than simply announcing the arrival of ‘Our Newsletter 39’!

Keep it Short and Simple

Unless you are really confident that you have genuinely compelling material that will keep the reader engrossed, keep your newsletters short and regular. A monthly rather than weekly  burst of useful information from you will be easier to digest and less likely to irritate. Of course the  occasional extra issue to announce fire-sales, new products or burning issues is also a great way of keeping your brand and services alive in the minds of your customer and potential customer base.

Hello Good-Looking

Keep your layout simple and clear. Strong headings in a contrasting colour and an easy to read font style will invite the reader to dive in. Adding a bright eye catching image will further enhance the reader experience. Keep a file if newsletters that you have received and liked, and before you bin items from your in-box take another look at them and ask yourself why? – absorbing this information should help you determine what is likely to work for you. Try creating your newsletter quickly, this will help to keep it shorter, sweeter and to the point but do make sure that you take your time editing it!

Reaping the Rewards

If you get it right, the return will be well worth the effort – not only is it a superb way to keep in touch with your existing customers, if they like what you have produced it is likely to be forwarded to their colleagues and friends too making it a marvellously personal and direct way to reach potential customers.

WordPress Tips

WordPress is one of the best website and blog builders in the world, here are some beginner tips

Wordpress Tuition GloucesterPermalinks

WordPress can create silly url’s for your posts and pages that include @ and % signs. A little tip is to change the permalinks. Go to Settings -> Permalinks and then click post name. This change the url to the name of your post or page.


SEO is really important for obvious reasons, Yoast is a easy to use plugin that can transform your website/blog SEO. It will guide you in changing your Focus Keywords, SEO title and Meta description. Yoast will even tell you if the SEO for your website is bad/good/okay.


Sidebars are used a lot in WordPress, sometimes they can become cluttered and too busy. Its important that you keep them tidy and fresh to not scare your visitors away. You can edit your sidebars by going to the following path Appearence -> Widgets.

Great Plugins to try

  • WP-SpamShield By Scott Allen
  • Advanced Access Manager By Vasyl Martyniuk
  • TinyMCE Advanced / for extra menu items (Visual Editor)
  • Black Studio TinyMCE Widget / for a bespoke widget
  • WordPress SEO by Yoast
  • Google XML Sitemaps
  • NK Google Analytics
  • Contact Form 7
  • Floating Social Media Icon

Thanks for reading….

Building Website Trust

When building website trust you will need to have authority and a good reputation. Here are a few good ways to achieve this and gain the rust of your website visitors.

Customer Logo’s

customer website trustHaving logo’s from other company’s on your website is a great way for potential clients to put their trust in you, they see other businesses using you in a successful way doesn’t only speak a lot for your work but shows that you are an experienced professional.


News about your company is not only a novel way to interact and build a relationship with your clients, its also a good way to show off your company’s skill set, awards and case studies on customers, this in my opinion will make you look more trustworthy and adept.

Showing a strong personal page.

Amazingly a thorough and detailed about page will show your potential customers that you are a great professional, not only that its again a great way to show off the accomplishments your business has achieved.

Social Media

A strong following on social social media shows your visitors that you are trusted and backed. A good tip to show off your social media following is to have widgets on your site from Facebook, Twitter and Instagram.

Hope this was helpful, Thanks for reading…

Understanding FTP

Understanding FTP File Transfer Protocol

Understanding FTP File Transfer ProtocolFTP stands for File Transfer Protocol. It is one of the earliest and best methods of transferring information around the Internet. Most FTP files are stored in “anonymous FTP” directories where anyone has access to them without needing to log in with a username and password.

A protocol is a language that enables computers to speak to one another.

FTP is used to make files and folders publicly available for transfer over the Internet. In some cases you may need to get permission from the network computer’s administrator to log on and gain access to files on the computer. But often you’ll find that you can use FTP to gain access to certain networks or servers without having an account, or being an official password holder, with that computer.

These “anonymous” FTP servers can contain a broad range of data that is publicly available through FTP.

The Internet address (URL) for an FTP server looks slightly different from the URL you use for a typical Web page. For example, Microsoft has an “anonymous” FTP server at, where you can download files ranging from product fixes, updated drivers, and utilities, to Microsoft Knowledge Base articles and other documentation.

How much access you have to files and folders on FTP servers depends on whether you gain access to the servers through a CERN proxy server or directly, and what kind of permissions you have with the FTP server.

For the Website Designer the FTP software is a great way to manage your Website. Some FTP software is free and some can be purchased on the web its self. Most of the software products do exactly the same, simply because the ftp action for computers is very simple.
Once you have obtained your software and installed it you will be able to log in to your website upload and download files and web pages and then log out.

Thanks for reading…

Adobe Photoshop Keyboard Shortcuts

Adobe Photoshop Keyboard Shortcuts

photoshopHere are a few for the beginner to help with navigation etc

A few of these are windows short cuts too

Control + T  = Transform

Control + N = New

Control + Z = undo

Control + X = Cut

Control + C = Copy

Control + V = Paste

Control + A = Select All

Control + D = Deselect

Control + – = Zoom out

Control + + = Zoom In

Control + 0 = Fit Screen

Control + Alt + I = Image Re-size

Control + S = Save

Control + Shift + Z = Save As

Many more here…..

Thanks for reading…

Website & Internet Jargon Buster

Website & Internet Jargon Buster

Website & Internet Jargon BusterAbsolute Link

This link shows the full URL of the page being linked to.


Used to describe, in general terms, the degree to which a system is of use to as many people as possible.


The advertisement and link auction network provided by Google. Keyword targeted, sold on a cost-per-click basis in an auction, which takes into account the ad click through rate and the maximum bid, it works on most of Google’s ads.


Asynchronous JavaScript and XML – helps websites appear quicker and more responsive. The technique allows a web page to request additional data from a server without requiring a new page to load.

Alt Attribute

Visually impaired people and most major search engines are not able to easily distinguish what is in an image. Often referred to as ‘alt tags’, the image alt attribute allows you to help screen readers and search engines understand the function of an image by providing a text equivalent for the object.


User paths, page views and conversion statistics can be tracked using this software.

Broken Link

A non-functioning hyperlink, or a link which does not lead to the desired location.


Application used to view the world wide web, the most commonly used being Internet Explorer; Firefox; Safari; and Opera.


Copy of a web page stored by either a search engine or browser.


Common Gateway Interface (cgi). The interface software between a web server and other machines. Can also be used to describe software running on that server. Many ‘cgi’ programs are used to add interactivity to a web site.


Content Management System – an application that makes it easy to update and add information to a website, allowing anyone (even those who do not have coding or website building experience) to edit their website, usually just using their browser.


Cookies are small data files written to your computer which are used to help websites customise your user experience.

CPC – Cost Per Click

Many search ads, and contextually targeted ads, are sold in auctions where the advertiser is charged a certain ‘price per click’. For instance, Google AdWords’ pay per click ad program, allows you to buy search and contextual ads.


Search engines such as Google have a Bot (see also ‘GoogleBot’) which ‘crawls’ web pages, following links and recording content, maintaining a searchable database of the internet.

Crawl Depth

How deeply a website is ‘crawled’ and indexed.

Crawl Frequency

How often a website is crawled.


Cascading Style Sheets. A method for adding styles to a web page, controlling how a web page looks visually. Using a style sheet instead of inline formatting greatly speeds up the website and helps to make it more accessible and search engine friendly.


A collection of information stored in a computer in a systematic way. Often used on websites to support, amongst other things, photo galleries, inventory listings, catalogues, and message forums.

Dedicated Server

Limited to serving one website, or small collection of websites, this server is owned by a single person.

Description Metatag

In search engine results a short description near each listing is used to give the user more information about a website. (See also: ‘SEO – Search Engine Optimisation’.)


Domain Name Server or Domain Name System. An Internet service which translates domain names into IP addresses, which makes them easier to remember as domain names are alphabetic. However, the Internet is really based on IP addresses. Every time you use a domain name, therefore, a DNS service must translate the name into the corresponding IP address. So, the domain name might translate to 192.135.852.2.

Domain Names

Used in URLs to identify particular web pages. This is our domain name for example: If you are interested in getting a domain name, please contact us.

Dynamic Content

Content which changes over time or uses a dynamic language such as PHP to help render the page.

Dynamic Languages

Programming languages such as PHP and ASP which build web pages on the fly upon request.


Known commonly as ‘e-commerce’ or ‘eCommerce’, it consists of the buying and selling of products or services over electronic systems such as the Internet and other computer networks.

Entry Page

The page via which a user enters your website.

External Link

A link which references another domain/website.


A small ‘Favourites Icon’ which appears next to URLs in a web browser.


A popular standards-based, free download, web browser.


Vector, graphics-based, animation software. Makes it easier to make websites look rich and interactive. Websites which contain ‘Flash’ content are difficult for search engines to index and rank because they contain relatively small content.


File Transfer Protocol. This protocol is for transferring data between computers, so many content management systems include a FTP capability.


The world’s leading search engine.

Google Analytics

Offered by Google, this service records information about visitors to your website and illustrate how well your website is performing. We use this service to provide comprehensive reports on your website.


Google’s search engine spider. This spider program automatically fetches web pages – Spiders are used to send pages to search engines.

Google Maps – detailed maps which you can add your business to, and integrate into your website, thus allowing clients to access directions to your business.

Hidden Text

SEO techniques used to show search engine spiders text that human visitors do not see. While some sites may get away with it for a while, generally the risk to reward ratio is inadequate for most legitimate sites to consider using hidden text.

Home Page

The main page on your website. Largely responsible for helping develop your brand and setting up the navigational schemes that will be used to help users and search engines navigate your website.


The process of storing your website pages on a computer (a web server) and making them available, by means of the Internet, to the world.


Apache directory-level configuration file which can be used to password protect or redirect files.


HyperText Markup Language. The language in which pages on the World Wide Web are created.


HyperText Transfer Protocol. The means by which data is transferred from its residing location on a server to an active browser.

Inbound Link

This link points from one website to another. By using the ‘link:’ function, most search engines allow you to see sample links pointing to a document.

Internal Link

An internal link from one page on a site to another page on the same site. It is preferential to use descriptive internal linking to make it easy for search engines to understand what your website is about. Internet – The worldwide web – a network of computers connected via TCP/IP.

Internet Explorer

Microsoft’s web browser.

IP Address

Internet Protocol Address. Each and every computer connected to the Internet has an IP address.


Internet Service Provider. Companies which provide access to the Internet.


Client-side scripting language that can be embedded into HTML documents to add dynamic features. If not done correctly however, using Javascript for navigation and content can damage your visibility in search engines. In AJAX, JavaScript has been combined with other technologies to make web pages even more interactive.


A word or phrase which people use to search the Internet.

Keyword Density

In search engine optimisation (see also: SEO), keyword density is the measurement in percentage of the number of times a particular keyword or phrase appears, compared to the total number of words in a page.


A reference from one web document to another web document or another position in the same document. A link is seen as a vote of trust by most popular search engines.

Link Building

The process of building high quality links with other websites. Link campaigns are a major piece of the jigsaw when it comes to getting your website listed successfully with search engines.

Link Popularity

The number of links pointing at a website. Simply put, ‘link popularity’ is the total number of links your website has coming from other websites. The more links your website has, the higher your link popularity, so as a consequence your website will be looked upon more favourably by all major search engines. The sites must have complimentary and related content to your own website – links from relevant sites are considered to be “more relevant” by search engines and will help to improve your rankings.

Meta Description

The meta description tag – a sentence or two of text which describes the content of the page, sometimes used to describe the page in a ‘Search Engine Results Page’ – can be very important.

Meta Keywords

The meta keywords tag – a tag which can be used to highlight keywords and keyword phrases which are relevant to the specific web page. Trust issues can result in most search engines ignoring keywords, just taking content from the website for ranking.

Meta Tags

People generally refer to Meta Descriptions and Meta Keywords as meta tags. Some people also group the page title in with these.


A database that uses a language called SQL (Structured Query Language) for adding, accessing, and processing data in a database. ‘MySQL’ typically runs on Linux/Unix servers in conjunction with PHP. MySQL, and is noted for its speed, reliability, and flexibility.


Often appearing on the left, or top of a page, this set of links is designed to help website users move from page to page around a website.


Fast, standards based, web browser – Opera is popular now for its mobile web browser and browser on the Nintendo DS and Wii.

Outbound Link

A link from one website pointing at another external website. Linking out to useful relevant related documents is an easy way to help search engines understand what your website is about.


PageRank – a numeric value that represents how important a page is on the web. PageRank is Google’s way of deciding a page’s importance. It matters because it is one of the factors that determines a page’s ranking in the search results. This is not the only factor Google uses to rank pages, but it is an important one. Google figures that when one page links to another page, it is effectively casting a vote for the other page. The more votes that are cast for a page, the more important the page must be.


PHP Hypertext Preprocessor – an open source server side scripting language used to render web pages or add interactivity to them.


Portable Document Format. A universal file format developed by Adobe Systems allowing files to be stored and viewed in the original printer-friendly context. The Max Design & Print Co. uses PDFs in many stages of its workflow, from design proofs to print production.


Pay Per Click ads only charge advertisers if a potential customer clicks on an ad. An example of which would be Google AdSense.

Quality Link

Search engines count links as a vote of trust. Quality links count more than low quality links.

Reciprocal Links

A reciprocal link goes in both directions between two websites.


A method of alerting browsers and search engines that a page location has moved. Users will not notice they are being redirected if done correctly and search engines only index the resulting page.


A company which allows you to register domain names.


The source from which a website visitor came from.


A file which sits in the root of a site and tells search engines which files not to crawl. Some search engines will still list your URLs as URL only listings even if you block them using a robots.txt file.


Rich Site Summary or Real Simple Syndication. A method of syndicating information to a feed reader or other software, allowing people to subscribe to a channel they are interested in.


A popular standards-based web browser made by Apple, included on all Macs, iPhones and iPod Touch. (Now available for PCs also.)

Search Engine

A tool or device used to find relevant information. Google and Yahoo are the most commonly used search engines.

Secure Server

A Web server that is capable of establishing encrypted communications to protect sensitive information being transmitted over the Internet.


Search Engine Optimisation. The art and science of publishing information and marketing it in a manner that helps search engines understand that your information is applicable to relevant search queries. SEO consists largely of keyword research, SEO copy writing, and link building.


A computer used to store/host files and serve them to the web.

Site Map

A page which can be used to help give search engines a secondary route to navigate through your site.


Simple Mail Transfer Protocol. A protocol used to transfer email between servers, normally associated with sending mail.


Unsolicited and sometimes malicious email messages.


A program that automatically fetches Web pages. Spiders are used to send pages to search engines.


Software programs which spy on web users. This is often used to collect consumer research and behaviourally target ads.

Static Content

Content which does not change very often.


Adding your Web site URL and details to search engines.


The title element is used to describe the contents of a document, making it one of the most important aspects to doing SEO on a web page. Such page titles appear in search results.


Provides detailed and accurate counting and behaviour information about the visitors to your website.


The amount of visitors and visits received by a website.


The time during which a computer (such as a Web server) is functioning without failure.


Uniform Resource Identifier – the unique address of any web document.


Uniform Resource Locator – a variation on URI.


The World Wide Web Consortium (W3C) is the main international standards organisation for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organisations maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. As of February 2008, the W3C had 434 members. The W3C DOM, on the other hand, is about document structure and the changing of document structure, allowing you to add or remove XHTML tags, or even entirely rewrite the page, if you so wish.


Each domain has an owner on record. Ownership data is stored in the Whois record for that domain. Some domain registrars also allow you to hide the ownership data of your sites.


A Wiki lets users create, edit and modify entire pages. Sounds like a recipe for disaster, but sites like prove that it is a powerful tool for generating large bodies of work quickly, with the added benefit of peer review to consistently improve it.


Extensible HyperText Markup Language is a class of specifications designed to move HTML to conform to XML formatting.


Extensible Markup Language – a simple, very flexible, text format derived from SGML. Used to make it easy to syndicate or format information using technologies such as RSS.


A popular search engine.


A process of compressing a file or number of files into one compact archive. ZIP files take up less storage, making it ideal for archiving and backup, as well as more efficient and quicker for a user to email or download.

Thanks for reading…

What is JavaScript?

What is JavaScript?

What is JavaScriptJavaScript was developed by Netscape and was first released in 1996 with Navigator 2 . JavaScript was the first Web scripting language to be released and is still one of the the most popular scripting languages around. It is designed to work closely with HTML. At it’s most basic, you can simply stick a couple of extra commands into an HTML tag and suddenly your writing JavaScript. Taken to it’s limits, JavaScript has almost as much functionality as full blown programming languages like C. The basics of JavaScript are easy to learn. With this tutorial you will be writing your own basic scripts by page 3!

What’s the difference between JavaScript & Java?

Java is a programming language developed by Sun Microsystems. It is used for building Java Applets, which are programs that can be run inside a web browser. Javascript, on the other hand, is simply designed to add interactivity to a web page. Java and JavaScript are two entirely different products. Remember that when you are out shopping for books!

What can JavaScript do?

  • With JavaScript we can…
  • Add Rollover Buttons to our web pages.
  • Control and rotate Banner Adverts.
  • Stick annoying scrolling messages in the status bar.
  • Detect what browser your visitor is using and automatically redirect them to suitable pages.
  • Build shopping carts and validate the contents of forms.
  • Scare the Hell out of your visitors with spurious pop up alert boxes.
  • Create great navigation systems using drop down menu’s and the like.
  • Greet your visitors by name (if they have registered at your site previously), time of day etc.
  • Build all sorts of clocks, calendars and countdown devices.
    …….and much, much more.

Thanks for reading…

Pin It on Pinterest