Design Counts

Website design, web hosting, website performance audits, image compression, website speed and SEO reports

Website Speed and Search Engines

Search engines aim to list websites with quality, relevant content and aim at showing the most relevant websites first, below paid advertised sites that is. If you are planning on developing a website spend time planning the content and message first before publishing it on your website. Get out the word processor and write down the content, spell and grammar check it. Ask a friend to proof read what you have written and take any criticism in good humour. If your friend is critical of your written content just imagine how a potential customer or client will be. Your friends time is usually free, while your customer /clients opinion may cost you money.

The two other relevant aspects of your website is the response time it takes to load, the faster the better, and secondly that it is able to be displayed properly on a range of device screen sizes, from the different screen sizes found on mobile phone, smartphone, tablets to the largest screens usually used by users of desktop computers, and even smart TV’s.

The emphasis on any website should be on your target audience, whether this is a commercial website, or for other purposes.

Summary: Think of your customer or visitor first by providing a website that is quick to load and navigate, is easy to use on a range of devices (screen / browser sizes) and most importantly enables visitors to your website to complete the task they set themselves, finding information, selecting or buying products or booking a holiday for example.

Most people will abandon a slow loading website, surprisingly if a website does not load in under 3 seconds you may find that 1 in 4 visitors will leave the site, that is a lot of potential customers / clients lost due simply for slow loading website.

Website Pages - Speed of Loading

The speed of loading against a mobile device is used by Google search as a ranking factor; having a fast loading website may not help get you into page one of a search result as many other factors are involved, however a slow loading website may harm your search engine position.

Test your websites loading time

If you want to see if your website is working quickly for users then I use a number of free online tools to compare download speeds on specific web pages. Google provides the PageSpeed Insights tool that gives you percentage score – the higher the score the better the result. I also use the Pingdom Website Speed Test tool that allows you to select a geographic location to run your test from.

Take a couple of minutes and find out how Google and others see your website speed, hopefully you will get a great score of 90 or higher. Test a few (4-5 pages at least) of the most important pages, your home page or index page, along with a selection of other pages that are important to you and your potential customers / clients.

How to improve website loading times

At this point you may be feeling very happy as your website is showing a great score of above 90, or less so if it is a lot lower. Whatever speed loading score you get the most important factor is how your visitors experience it.

Broadband / Internet Speed

While you and your website designer may be fortunate enough to live in an area with high speed broadband connections it is worth remembering that not everyone is able to receive broadband or even if they do, not at high speed.

Many rural properties get far lower speeds than one would expect, for example my own property gets broadband at varying speeds from under 1MB to just over 3MB as we live 3 miles from a telephone exchange. This distance currently means that people living within half a mile may achieve download broadband speeds of around 12MB, if you live out with this area it drops sharply. A friend living locally, 3 miles off the main road is lucky to achieve download speeds of 0.5MB.

So what is the message, simple, not everyone that visits your website will connect as broadband speeds that you would normally now expect, so not only do you need to have a website that looks good on a range of mobile devices and screen sizes you need one that loads quickly under a range of situations.

Every visitor to your website is a VIP, not just ones on very fast broadband.

What causes slow websites?

A number of factors are involved, most common is the use of pictures / images that have not been resized to match the website design, that is very large images are used when they are limited to display in a smaller area of the web page. And that the images have not been optimised for use on the internet, that is a picture is taken by a hi-resolution smartphone or digital camera and the picture is not compressed for website visual display purposes.

A typical picture / image that is perfect for printing contains far more colour information and resolution than is necessary for website display. By using a graphics application or software such as Paintshop Pro, Fireworks, Adobe Photoshop you can specify the size of the image you are using and also the “quality” of the image, and by selecting the correct file type (for example using a jpg format image rather than a png format) you can save up to 80% of the file size, the smaller the file size the quicker the web page will load.

Summary: Make sure that the pictures/images have the correct physical sizes for your web page design and then select the best image file format and compression to make the file size smaller.

p.s. Google often suggest you can save further file size by using newer image file formats, quoting Google developers website suggestion: Serve images in next-gen formats “image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.”

While this is true one does need to remember that these newer image file formats will not work correctly on all web browsers, so unless you know everyone that visits your websites are using Google Chrome I would suggest that this is still a suggestion too far and that you should stick with image file formats that do work on all browsers, that is gif, jpg (often the smallest file format) and png (where you need to use transparent images as backgrounds).

Beginning HTML5 and CSS3

Beginning HTML and CSS

Don't be put off with the title, these books are amazing value and help introduce you to building websites. It can also help experienced web developers re-consider basic concepts. Well worth buying just to have a yellow book in your bookcase.

Beginning HTML and CSS

Web Design with HTML, CSS, JavaScript and jQuery

Books on website design | HTML5 and CSS3

Buy this Book Set

A two-book set for web designers and front-end developers This two-book set combines the titles HTML & CSS: Designing and Building Web Sites and JavaScript & jQuery: Interactive Front-End Development. Together these two books form an ideal platform for anyone who wants to master HTML and CSS before stepping up to JavaScript and jQuery.

Books on HTML and CSS

Questions you must ask yourself

Before I start I must emphasis that your website should be based around quality content, what do I mean by this? It is simple, focus on your visitor first, and ask yourself questions around what you are aiming for, your objectives in creating the website and who it is for.

What and Why and When And How and Where and Who.

I am sure you can come up with better and more relevant questions about your own website and why you want or need one. Just take a few moments and write down your ideas on this and it will help you focus on what you want from the website and what it is for.

I KEEP six honest serving-men (They taught me all I knew); Their names are What and Why and When And How and Where and Who.
From Rudyard Kipling.

Web Development Books

Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

Web development covers a range of topics and if your aim is to be visitor /customer focused then you need to learn about Web Usability among other topics.

Books on Web Development

Design your Website for Speed and put Visitors First

Put your visitor first and create a website design where people can quickly load from any device that currently exists, while future proofing your design against technology changes.

Most websites that are now being developed use a Responsive design, that is the web page changes based on the size of the screen display. If you are reading this article on a desktop or laptop use your mouse to resize the browser display, the page should resize to change your browser. If you are using a phone, tablet or other mobile device change the orientation from Portrait to Landscape – again this web page should change to suit the new width available – it is responsive.

How do we achieve this? First off we tell the browser / device that the site has a Viewport and that is set to a defined scale using

We then use Media Queries to tell the browser how wide apart each section of the website should be on different sizes of screens and browser size.

Example of breakpoint:

@media only screen and (min-width: 1024px) {css instructions within this space}

For example you may wish to have a certain section of the web page to be 800px (i.e. width=800px) wide on a laptop or desktop monitor, while on a mobile phone, smartphone or tablet that has a smaller screen size to be full width of the screen size available – (i.e. width=100%).

You can set up the website layout to change automatically based on what device a person is using by creating different media queries to deliver the layout design for the web page based on the CSS instructions used.

If you are new to website design then consider a web page to be made up of three elements (to keep things simple):

To get to grips with website design and creating a responsive website I can recommend the free W3Schools for an introduction to using html and CSS

Start by Designing your website for mobile devices

Intuitively most people (including web designers) start by planning the layout of a website around the space available on large computer screens, it kind of makes sense to sketch out how we want a site to look like, where we will add the graphics, the headings and text and how it will come together on say a 22 inch monitor or larger.

Of course we also want it to look great on a laptop screen with a 14 or 15 inch screen and as they often have high resolution displays a site designed to look fantastic on a desktop computers screen will probably work fine on a smaller laptop screen (not always, it also depends on the screen resolution set by the user).

Well let us just stop at this point and consider something different.

Most web developers have adopted the concept of designing for mobile first, that is you design the website to work great on a small screen available on phone and smartphones. This mobile first design process means that everyone will be able to access and use the website – to buy a product, to make a booking, or find an answer or information they were looking for.

By designing the website to look good and work on the smallest device sizes you are forced to identify the main purpose of the website, what your objectives and then make it usable to the majority of people who use mobile devices all day long. So instead of spending lots of time working on a fantastic all singing all dancing graphics heavy website design to identify the fundamental reasons for the website’s existence. You put your user / visitor first and aim to meet their needs and requirements rather than creating a beautiful magazine quality website design.

This does not mean you do not use pictures / images in the website design, you only use the images necessary to tell the story to are trying to tell. And the images are aimed at the mobile device first, not a large computer screen. By taking a mobile first approach to create a light and very fast loading website that satisfies your customer or client – by delivering the information they need quickly and allowing them to compete whatever task they have set themselves (e.g. to buy a new TV, to book an activity or holiday, to learn how to do something).

So what about larger screens?

By designing your website using mobile first does not mean you cannot have a more complicated design and layout for larger screens – as the user experiences the website using different (browser) screen sizes you can enhance the layout and design so that the site looks amazing on larger screens.

On a mobile you would normally set each content area to be 100% wide, this means that users will be able to scroll quickly down through the content on the page. People are used to scrolling down, it is intuitive.

Having to scroll across a page is not so intuitive, nor is it easy to follow the content across a wide page you are scrolling across.

As the browser / device screen gets larger you may display 2, 3, 4 or more columns of information, possibly with pictures / images spanning the whole width of the page, or fitting within the columns. The user can quickly scan across the page and pick up the headings or areas of content they are interested in and follow through with desired behaviour if it meets their needs (buying an item, booking an event or renting a cottage for example).

These changes are achieved by setting breakpoints using media queries where screen sizes are larger – working from mobile up to large desktop display. Web developers will plan for a range of device screen sizes and resolutions, along with potential browser sizes, and then add CSS code using Media Queries to make the structure of the page work well within each of these sizes.

For example:

All of this is controlled by the html layout and styling provided by the Cascading Style Sheet(s). A good example that you can also play around with is on the W3Schools site under Responsive Web Design - Media Queries.

Try it out and open up the example page, move the width of the browser and observe how the content changes.

Notice how the layout and position of the content changes when you make the browser screen smaller / larger. The structure and CSS code has allowed the designer to present the content in the best way for the user under different screen sizes. It may be something simple such as a menu that is hidden in a small mobile device until the user clicks on the menu button is fully visible as the screen display gets larger.

Using Pictures and Images in Responsive Websites

When you come across a site that loads slowly, or has a poor performance speed test results, it can often be caused by images that are far too large, or have not been optimised for use on web pages. When you take a photograph with a digital camera or mobile device the file that is created will often already be compressed into a format designed for printing the image.

If you want a camera to record all the information it gets when taking a photograph you would have your file format set to RAW, or in two image formats RAW and jpg. The jpg image is already optimised for print as the camera had discarded a lot of image data to create this image file. RAW on the other hand records a lot more information and allows you to manipulate the information stored to create a picture format you want to save as a jpg (or png, gif, tiff file format).

Usually jpg and png file formats are used in websites, the png image file allows you to create a transparent image that can display underlying (overlying) text and other images. Usually png image files are a lot larger in physical size than a comparable jpg image.

New image file formats exist that have better image compression formats than normal jpg images, unfortunately at time of writing this not all browsers and devices can display these new file formats. Give it a couple of years and this will probably change, allowing you to use these highly compressed image files with confidence, until then stick to the good old jpg image formats if you can.

Not all is what you see

When your camera saves your photograph image it uses the file size you have selected under the menu system, more often than not you will have selected the largest image file available on your digital cameras menu. On my old Canon 600D the largest picture file for jpg is 5184x3356 pixels and creates a JPG file of around 5.5MB (5,492 KB) depending on the subject being photographed.

The same image stored in a RAW (CR2) photographic file format is 23MB (22,989 KB). You would not normally use a RAW picture file on a website unless it is going to be used by others for commercial use, such as printing. We have taken a wonderful picture (or not) and want to add it to our website / blog, or share it on twitter / Facebook so we just upload it, or do we?

Usually if we are sharing the picture you may be offered an option by your camera or device on the picture size to upload. For social media you will probably select a size from 600 px wide to 1400 px wide and the camera / device will then resize the image before uploading to twitter / Facebook.

If you are adding it to your website then you probably have resized the picture to a size you feel it suitable. This will certainly reduce the size of the picture file.

Yet for website use we can take a further step by using photographic image software to compress the picture file further, this can save up to 80% of the original resized picture file size.

website design - Image size and optimisation example. Example of a compressed / optimised jpg image file.

The picture above is of Posie, one of my lovely dogs. The original picture saved from the digital camera was 3.4MB (3, 430 KB) and had a size of 5184 x 3456 px. I used my image / graphics software, Fireworks, to save the image as 2000 x 1333 px, giving me a file size of 0.569 MB (569 KB). By resizing the image I have saved a lot of time downloading the picture = faster loading web page.

Now an image 2000 px wide is large for a web page, click on the picture and see the actual size of the image in a new browser (you probably need to do this on a large monitor, not a mobile device). Then click on the opened image to see the full size of the picture. I hope you agree it is a fairly large picture and in most cases you can aim at smaller image sizes for most web pages.

I lied, the picture image you see above is not 0.569 MB (sounds better as 569 KB) it has been optimised (compressed) using Fireworks (same width and height) to 223 KB, a saving of 346 KB. It is still a JPG image file, just one designed to look good on a website. It will still print out fine on most printers, however for hi-resolution printing it would be better to use the original file. Most web pages will not be printed so this is not relevant in most situations.

The smaller the image file(s) used on a web page the faster the website will load.

I have fibbed, yet again!

Sorry I have mislead you yet again. The image of my dog Posie shown above may not be 2000 x 1333 px in size (although when you click on the picture it will show you the original resized picture of this size). I can’t tell you what size of image you are looking at as I do not know the device or browser size you are using.

What you are looking at, and has been downloaded to your device is an image optimised for your screen display size. This is achieved using the srcset=" image file information goes here "  attribute to specify the file sizes to be selected and downloaded by the web browser. It works best on the latest browsers and modern mobile devices, yet it will also work on older browsers and show you the original image as a fallback (e.g. src="/compressing-website-images/img_optimised_image_example_1000px.jpg").

By using the srcset attribute you can instruct the browser to select an image size to suit the device being used to view the web page. This means if a small browser / device is used it will use the image file that best fits the screen, potentially saving you bandwidth as usually the smaller the image file = smaller file size.

First steps: create a range of optimised image files for different sizes. Most people create image sizes ideal for a phone, tablet, full desktop monitor. This should also be based around your web pages design and layout. There is no point in having a 2000 px wide (large desktop screen) if you only plan to show an image at a maximum size of 600 px.

Open the example image sizes page to see the pictures in their original resized and optimised format (opens a new browser window).

Then set-up your image(s) using the srcset attribute in your web authoring software. The code below was used to display the image of the dog, above.

<img src="/compressing-website-images/img_optimised_image_example_1000px.jpg" sizes="100vw"
srcset="/compressing-website-images/img_optimised_image_example_320px.jpg 320w,
/compressing-website-images/img_optimised_image_example_600px.jpg 600w,
/compressing-website-images/img_optimised_image_example_800px.jpg 800w,
/compressing-website-images/img_optimised_image_example_1000px.jpg 1000w,
/compressing-website-images/img_optimised_image_example_1200px.jpg 1200w,
/compressing-website-images/img_optimised_image_example_1400px.jpg 1400w,
/compressing-website-images/img_optimised_image_example_1600px.jpg 1600w,
/compressing-website-images/img_optimised_image_example_1800px.jpg 1800w,
/compressing-website-images/img_optimised_image_example_2000px.jpg 2000w"
title="Website design - Image Size and Optimisation. Example of a compressed / optimised jpg image file."
alt="website design - Image size and optimisation example. Example of a compressed / optimised jpg image file.">

Please note you would not normally have line breaks between the different sized images. You also do not need to use a title="description given here", the use of the alt="description given here" is required for screen readers and if not present will possibly give the page a penalty in search engines.

Not all web browsers understand the use of the srcset attribute and this is why we also have the normal html scr=”image_file.jpg” added at the end so that older browsers will still load the picture image specified.

Try it out and resize your browser and then right-click with your mouse and select Save image as … to see the name of the image file – it should change depending on the browser size (smaller images should show as the smaller files i.e. 320px or 400px as an example.

This may not exactly work as described, it does depend on the browser you are using.

Downside: you need to create different size images and then code the html for each image. You do not need to have 7 or 8 image sizes, a more balanced view is to plan for mobile, tablet, laptop and large desktop monitors. Remembering that is you define the area for your picture to be a maximum width of 600 px there is no point in creating images that are larger than that.

If you are using a publishing platform such as WordPress you can install image management plugins that do this automatically for you every time you upload an image. It will save you time and make your WordPress powered website work quicker.

Upside: You will make your web pages leaner and meaner and Google and other search engines may love you for it, certainly your website visitors will appreciate faster loading web pages. Go for it and start developing websites that load quickly on phones and mobile devices as well as desktop computers with large monitors.

Summary so far on Website design and Optimisation

Time for a coffee, take 5 to think about what you have learned (hopefully something new)

Focus on the website visitor – what are they looking for and why would they visit and stay on your website. Put solutions / content before highly graphic and picture oriented website designs.

Web Designer’s Idea Book, Volume 4: Inspiration from the best web design trends, themes and styles

Web Designer’s Idea Book, Volume 4: Inspiration from the best web design trends, themes and styles

Looking for inspiration for your latest web design project? Expert Patrick McNeil, author of the popular Web Designer's Idea Book series, is back with all new examples of today's best website design. Featuring more than 650 examples of the latest trends, this fourth volume of The Web Designer's Idea Book is overflowing with visual inspiration.

Buy on Amazon UK

Design and Develop your own Website

When you set-up your own website without professional help you need to create the web pages that will form the website. To do this you often need a web authoring package or software. I use Adobe Dreamweaver, and love it. However for a person wanting to create a relatively simple website to advertise their business it may be a bit on the expensive site as Adobe now charge an annual licence fee for their software, you can end up paying hundreds, sometimes thousands of pounds each year just for the licence to run the website and graphic design software.

Not all is lost as there are a number of cheaper, and less powerful website authoring and design tools around. You can even learn to hand-code websites from scratch using a text-editor used for programming if you are brave enough. One alternative is to buy older versions of the software produced by Adobe, just be aware that there is some illegal software being sold online (and off-line) marketplace. I would strongly suggest you always buy legitimate software.

If you are looking to build a simple website with your business contact details and a short description of the services you offer, or what you provide i.e. holiday cottage rental, bed and breakfast accommodation etc, then you may want to use an online website design application. These tools are often available at a cost (sometimes free) from a number of web hosting companies, you may have seen them advertised on TV.

An other alternative is to buy a web design template that can then be used to set-up your website. They often come with 4-5 pages already designed and ready for use, you just need to change the details – phone number, description of business, contact details for example. While you do not always need a website authoring software package such as Dreamweaver to do this, it often helps. You can of course decide on the template design you want to use and then ask a web developer to make the changes and add the content to meet your business needs.

Before I move on I should mention that most businesses already have a web page development software on their desktop or laptop computer, it is called Microsoft Word,  Microsoft PowerPoint and Microsoft Publisher. If you are a website developer please do not fall off your chair laughing at this suggestion as these Microsoft applications can be used to create web pages and even websites. The web pages may not be perfect, and most professional website designers would blush at the thought. Yet for a small business owner hobbyist or student it can do the job, just use the save as html – Web Page option. More on this later although you can have a look at a page I created using Microsoft Word by using the save as html (web page) option. See it on the example page 1 - Web page created with Microsoft Word.

As you can see it does work as a basic web page, it just does not work as a responsive website. It also does not look great due to formatting issues (width, position of content etc). However on the plus point it gets a reasonable score on the Google PageSpeed Insights Tool.

Microsoft Word takes the large images (I used pictures that were resized and optimised to 2000px wide before inserting them into Microsoft Word and resizing them to fit the page). When I saved the document as a web page Word then created another folder and converted the pictures into smaller images that are then used in the html page.

Free Web Design Software / Editors

As mentioned professional web development software can be expensive to purchase and pay for annual user licences. So you may want to experiment with other tools that let you develop web pages and websites. I will mention Microsoft Expression Web 4, now offered free by Microsoft as they abandoned the niche of web development software.

This software can still be downloaded from the Microsoft site and can be used to develop a website. It is dated and it was designed before HTML5 and CSS3 so it can be a bit quirky if you are planning to create a modern, responsive, mobile first website design - Download Microsoft Expression Web 4 from

If you are serious about learning to develop websites and plan to work within the industry then I would suggest you start developing your first website using a text editor – in this way you will learn to code the structure of the web page (site) in HTML5 and learn to apply design using CSS3, while also getting familiar with JavaScript or other web programming language.

One free editor you may want to consider is Brackets, from Adobe - Download Brackets.

Other text editors used by students and professionals include Notepad ++ (Windows only) and Komodo Edit.

WordPress Powered Sites, they rule the World

WordPress used to run blogging websites, it provided you a very easy way to write and publish your daily, weekly or yearly blog update. Everyone had a blog, or felt they should have one. WordPress made it very easy to add pictures, write blog posts and create pages, the software did its thing and published your news, articles, pages and pictures. It even told the search engines that you had published a new post or page.

WordPress is an all singing, all dancing content management system, or CMS for short, it can do just about anything. It can act as a blog, it can be set-up as a website, as an on-line store / shop, as a photo gallery, as a forum and more – sorry it does not wash the dishes(yet).

If you plan to use WordPress to create your website, online shop, community forum area or photo gallery then you can buy a web hosting plan that allows you to install the application in one click.

WordPress can be considered to have:

Setting UP WordPress

It is not difficult to set-up WordPress, although when you put together all the things you need to know it can be a bit overwhelming to start with. The secret is simply to start small and then grow your sites design and functionality. Many WordPress themes are Responsive (not all) and will work wonderfully well on a smartphone or a desktop computer.

Selecting a web hosting plan – simply to run WordPress

Most of the established web hosting and domain name companies offer dedicated WordPress hosting, the server and installation of WordPress is designed to provide the quickest response times for users of this application. It may also share the files across a world wide network in a service called Content Delivery Network (CDN), where some of the files (pictures, images, text) are stored geographically so that it will load quickly depending on the location of the website visitor.

For high volume websites that get a lot of visitors to their sites from all over the World it can make a big difference in customer satisfaction as the response times on web pages will be delivered as fast as possible.

If you are running a local business, choose a web hosting company located in your own country, it does not need all the bells and whistles provided by CDN and it will be fast as the website will be hosted near you (relatively).

A Note on Using Content Delivery Network Technology

As files are cached (stored) in different geographic locations when you make an update to the website / WordPress it may take a while (from a few minutes to several hours) for these changes to show up Worldwide. If you plan to use File Caching and / or a CDN to enhance the speed of your website wait until you have completed creating your website before enabling this feature.

It is worth remembering that when using web hosting with the Content Delivery Network functions switched on, and you need to make changes to the site content and the changes are time relevant – you want them immediately available, then go into your websites CDN control panel and switch it to Development Mode, this allows you to update the changes to the website quickly. After you make the changes, go back and switch it to active.

Summary: WordPress powered websites are amazing, with a little learning / training you can easily keep a site designed using WordPress up-to-date by editing pages or posts. Many web designers use WordPress as the backbone to websites they develop for clients as it is then easy for the client to keep information up-to-date and make simple changes (new phone number, change of staff, new business offers, create and publish a post).

Many of the tasks involved in managing the WordPress Content Management System can be automated so the developer and designer does not need to spend a lot of time maintaining the website or the design. This may help keep the cost down for the client (you).

Before jumping head first into using WordPress you do need to appreciate that, while it is extremely powerful and also flexible, you may be relying on plugins and themes that are kept up-to-date by software developers, and that some of these plugins and themes charge an annual licence charge, it can all add up to several hundred pounds a year. While many themes and plugins are free, not all will be.

You may still want to consider asking a web developer to help set-up your WordPress powered website and use their experience to save you time, and sometimes frustration, in the long run.

Wordpress For Beginners 2019

WordPress for Beginners

If you are new to using WordPress then buy this book and get a step-by-step guide to installation and use of the most powerful and popular publishing tool on the World Wide Web. Guaranteed to save you time when using installing and using WordPress for the first time.

Buy on Amazon UK

Professional WordPress: Design and Development

Professional WordPress: Design and Development

The book's key features include detailed information and real-world examples that illustrate the concepts and techniques at work, plus code downloads and examples accessible through the companion website. Written by practicing WordPress developers, the content of this edition focuses on real world application of WordPress concepts that extend beyond the current WordPress version.

Buy on Amazon UK

Website Design and Support Services

If we can help you with a new or existing website then we would love to hear from you, we charge reasonable rates for website design, converting existing websites to a responsive format, even taking existing images and optimising them for you.

We can also provide you with a straightforward report on how you can improve your existing website, or give you advice on the best web hosting service for your business or personal use. We can even help you chose a great domain name.

Contact me through our Facebook page, or via Twitter and we will happily give you a quote on the work you would like done, or just have a chat.

Scotland Croft
Attracting Garden Birds

Build your own website from Scratch

If you are convinced that you want to build your own website then there is a few things to consider.

Want to do it yourself? then check out the following websites for useful information and training guides on website design and development (also remember to check out the books on Website Design with HTML5 and CSS3).

W3Schools for a wide range of website design tutorials and online example / practice pages.

Free Coding Tutorials Online - HTML and CSS3

Free graphics software - Gimp, just fantastic for pictures and graphic editing.

Free HTML5 templates for personal and commercial use - HTML5up


Image of planet earth and coffee by Giannis Korentzelos on Pixabay.

Use of Normalize css default by Nicolas Gallagher.

CSS Tricks - Explanation of srcset by Chris Coyier