Building a website

The first thing i recommend is creating a project folder in the cloud; this will be useful for storing and sharing content with your development team. You can do this in One Drive; this allows you to share the folder without giving out a password. 

Creating a secure password to share with developers will be better than sharing your one; they say writing a password down isn’t a good idea however, in this case, you may only need this once a year, and it will be impossible to remember.

You may wish to try using a self-building tool or templates as your first attempt; If this is too complex or you can’t get the desired design, you can always show a developer what you have done to help you explain your ideas.

To begin creating a website, you will need these things:

• Domain Name – The website address, like a house address for your site.
• Server – A physical place to store files and software to serve the files correctly.
• Website – The actual files that are loaded to display the site.

A Web Host can provide all these things for you, even design the site for you; however, they are expensive over the long term and often require you to use self-building tools.

I like to design my website from scratch because it gives me the most control; however, I usually use WordPress as the engine rather than programming from scratch because it allows integration with other developers and can nock weeks off the development time.

A cheaper alternative to a host is to use a cloud-based virtual machine; they are very complicated and would suggest you have a good security solution. Think of them as a new computer with no software; you’ll have to install each bit of software to add different features.

You may want to add things like CDN, SSL, Backups, File management, SSH or anything you can think of. They can take all day to set up and work; I use a third-party tool to manage the server and implements these features for me.

Unless you are willing to put in the effort and learn how to build and manage a website, you should hire someone to do this for you. There is a lot involved with setting up a site; however, once built, you may wish to manage it by yourself or hire someone to do it.

Designing a Website

The design is probably the most underestimated stage of making a website. You may sit down thinking this is easy and then instantly get writer’s block. You must set yourself a goal; work with your customer to find out what they want the website to achieve and what they had in mind.

After you have figured out the content, colour scheme, art and concepts, you may want to start mocking up a prototype. The first thing the user sees in will be their first impression; you can use this to draw the user’s attention. A common mistake is to waste this opportunity to let people know they are in the correct place; placing stock photos or a large amount of text could intimidate the user.

Whether your customer has a specific design, the developer is the one who makes it work. It’s unlikely your site will end up like your initial plan; you should constantly check if it looks right and shift your design. Using a custom-made website means you can tweak everything, unlike a templated site where your content is pre-mapped out. Remember to check with your customer frequently as they may have input and a different opinion than you.

You may want to leave the header and footer until after creating your initial page, as you may change what you display on the home page or split it onto a new page. Recently i have been designing the header on the landing page so that it does not take up space on smaller devices. I would still use a standardised site header for every other page to keep consistency and provide navigation.

The foot usually stumps me to most, especially for new or small businesses. Other than disclaimers and partner links, the best advice i received is to think about what the user might have scrolled passed. If they have reached the footer, they have most likely not found anything useful. If you have a minimised navigation menu or links that appear after sections(they might skip), you may want to add the links to the footer.

You must constantly remind yourself of the end goal and work with the customer to achieve a compromise between their vision and what works well. If you get stuck, start thinking like a user. What am i searching for? Once you have found a design that works, it becomes easy to finish the site.

Responsive Design

You have spent hours adjusting your website to look perfect, only to get a screenshot from the custom where it looks completely different. This is caused by a difference in hardware and software used to view the website; we usually simplify this by saying “device”. There are different methods of solving this; we refer to this as Responsive Design, meaning your design will respond to the device.

Most web browsers have a development mode that lets you adjust parameters on the fly. For example, Chrome allows you to hit F12 and open the inspector, then you toggle the device toolbar and have a rough preview of what your site might look like on each device.

You may also want to download The firefox browser because it uses a different engine, causing inconsistencies. Finally, You may need an IOS device because they don’t use the latest features; I have purchased an iPod touch which works well; it is easier than checking every piece of code’s documentation.

With modern web browsers, you can change how the site is displayed based on the screen size, whether it has touch, the operating system and much more. We can use these features to help align and reshape elements within the website. We can also tell the browser not to adjust page elements and define element styles that use the system’s default theme.

I start with setting every element max-with to 100%; this guarantees the page does produce horizontal scroll bars. I also pick a max width at which the page stops adjusting; generally, you don’t want the content to span across double-width monitors. You may also want to define a min-width as the text becomes unreadable when it begins to line wrap.

The containing elements may need to create a few different designs for set width; for example, on a phone screen (<400px width), you may want to remove all borders and horizontal spacing to reduce content and text becoming truncated.

Now you have your inner elements, such as columns and content. Modern browsers allow you to use “grid” and “flex” styling, which will automatically place content to reduce whitespace. You can use percentages for the width of your elements; they automatically scale to the width of the containing element. You may need to make new designs for cases where the content looks out of place.

Remember you want to avoid re-creating the design multiple times; you achieve this by using scaling elements and only having designed extra layouts for the container elements. You should load the site in different browsers as you develop it and resize the window to confirm elements are scaling correctly.