Websites are such a vast area but can be so useful for Charities, Businesses and Organisations from saving time for staff on admin and making them more production to passing out message to large groups very quickly, or even finding 100’s of new customers!
So here is our guide to starting a website from scratch and factors to consider when designing it.
Step 1: Research
Think about what you want from your website and look at your competitors or similar sites to see what feature you ight want considering:
- Colour schemes
- Page layout
- Features
- Number of pages
- Google placings
- Domains
- Names and slogans that might help select the domain.
- Content on each page
Step 2: Domain Names
A domain name is your site’s unique address – for example, ours is ittogo.co.uk. You’ll need to pick one for your site, which can be done easily by contacting us where we can check on the worldwide database. If you already have a domain name, you can transfer it to whatever platform you want to use.
A domain name is the bit of the URL (the site address in your browser’s search bar) that identifies a web page — in this case your website. For example, ours is ittogo.co.uk.
A domain name is one of the main ways a site presents itself to the internet, so make it count. Here are a few rules of thumb when choosing a domain name.
- Make it relevant. This sounds obvious, but it’s worth mentioning. Make sure the domain matches what visitors see when they visit your site. If your company is Vintage Pantaloons ™, don’t register the domain flipflopsfromthefuture.net
- Keep it short, or at least memorable. If you want people to remember your site don’t pick a domain that’s dozens of characters long. It will look silly and no-one will remember it
- Avoid numbers. It’s generally best to avoid numbers in domain names. It (generally) looks unprofessional and adds another element for people to remember.
- Check the branding doesn’t already exist. There are millions of websites already out there. That means there are millions of domains already taken. Check whether yours will stand out before committing to it
Once you’re sure about a domain, simply register it as part of the signup process or contact us to help. Most companies will charge around £10 – £30.
Step 3: Hosting
Next step in our How To Build A Website guide is hosting. The easiest way to think of hosting is that it’s a storage and access system for your website. On a computer your files are stored locally in folders.
On the internet, your website will be stored on a server, provided by your hosting provider.
How does hosting work?
A website is a collection of different files being pulled together and rendered by a browser. For example, a typical website is comprised of HTML, CSS, Javascript & PHP files.
These files are stored on your hosting package, and when someone visits your domain, they are downloaded and rendered by whichever browser is being use.
Alongside storage and access for your website, a good hosting provider will provide you with a suite of tools for managing and maintaining your website, generally through a CPanel.
When choosing a hosting provider, we would highly recommend you opt for one that is powered by CPanel, this is something your web developer will need access to, to help you maintain and grow your website.
Where do I get hosting?
There are a lot of hosting providers on the market, however I would recommend that you choose a company with good support like our business so for pricing please contact the sales team today.
If you don’t have a technical background, or a technical person on your team, then we can help with all aspects of the hosting and offer several packages and options. We offer affordable, flexible hosting plans that grow with your business and good 24/7 support which include:
- PHP hosting
- ASP hosting
- Cluster servers
- Full page statistics
- Databases
- SSL
- Virtual private servers
- Dedicated servers
- Linux Hosting
- Windows Hosting
- Test Sites
- FTP
- One-click installers
- Responsive Hosting
- Custom error pages
- HTTPS
- SSH access
- A supplier with 24/7 support
- Great pricing
- Outlook
- SMTP
- WordPress Hosting
Step 4: Standard Site Vs Content (CMS)
Standard Site
In short a standard website is harder to edit and change content but slightly more secure
Content (CMS)
A CMS is a content management system, which is the system you will use to edit and maintain your website. A CMS allows you to edit your website without touching any of the code. and saves contact with a developer.
Once logged into a CMS, you are presented with a front end interface that you can use to edit and configure the various pieces of your website. Think of a more complicated, fancier version of a Word processor (with lots more options).
We can help install all of the main content management systems:
- WordPress
- Drupal
- Joomla
- Magento
- Blogger
- Shopify
- Open Cart
- Square Space
Step 5: e-Commerce Stores
But if you are a business that is keen to sell online then an eCommerce store is for you and offers many features for your customers and increased statistics for you think about all the options carefully including:
SSL certificate
Our store includes a free 256-bit SSL certificate. All pages, content, credit card, and transaction information is protected by the same level of security used by banks.
Automatic carrier shipping rates
Receive automatic shipping rates from major shipping carriers like UPS, USPS, and FedEx.
Accept credit cards
You can accept Visa, Mastercard, Discover, and American Express the minute you launch your shop. You’ll get a low credit card rate and no hidden fees.
Abandoned checkout recovery
Recover lost sales by automatically sending an email to prospective customers with a link to their abandoned shopping carts, encouraging them to complete their purchase.
100 payment gateways
From bitcoin to PayPal to iDEAL, Shopify integrates with over 100 external payment gateways from around the world.
Flexible shipping rates
Set up shipping rates by fixed-price, tiered pricing, weight-based, and location-based rates.
Automatic taxes
Based on your location, Shopify will automatically handle major country and state tax rates.
Multiple languages
Your online store checkout comes in 50+ languages, and you can always translate your store’s theme to suit your needs.
Customer profiles
Learn more about your customers and their shopping habits. Find their contact info and order history at a glance.
Dropshipping
Shopify integrates with apps like Ordoro, Inventory Source, and eCommHub, making it easy to set up your dropshipping business.
Customer accounts
Encourage repeat shopping by enabling customer account creation at checkout. Your customers can also check out as a guest without creating an account.
Refunds
Refund some or all of an order to the payment method used. Your inventory is updated automatically.
Customer groups
Categorize and export customer lists based on location, purchase history, and more.
Manage on the go
On your smartphone to update your store, manage inventory, fulfil orders, and contact a customer.
Fulfilment centres
Connect to fulfilment solutions such as Shopify Fulfillment Network, Amazon, Rakuten Super Logistics, and Shipwire, or set up a custom fulfilment solution.
Email templates
Customize your automated store emails with the design and language you want.
Order fulfilment
Capture payments and fulfil orders right from your phone. Send shipping notifications from the post office.
Generated sitemap.xml
Your sitemap.xml is automatically generated with your products, webpages, and blog posts.
Product reviews
Engage your customers and encourage sales with the option to leave SEO-friendly product reviews on your website.
Discounts
Boost sales and customer loyalty by creating highly targeted discount codes and Buy One, Get One promotions right from the Shopify admin.
Gift cards
Your customers are able to purchase a gift card for someone from your store, or you can use gift cards as store credit.
Social media integration
All websites include social media integration, such as Pinterest, Instagram, Facebook, Twitter, and Tumblr.
Inventory management
Manage your entire inventory with Shopify. Track stock counts, and automatically stop selling products when inventory runs out.
Digital products
Customers can order and download your digital products right from your online store.
Product variations
Offer different variations of your products, such as multiple sizes, colors, materials, and more. Each variation can have its own price, SKU, weight, and inventory.
Import/Export
Import or export your products using CSV files, or one of Shopify’s importer/exporter apps.
Product organization
Organize products by category, type, season, sale, and more. Use smart collections to automatically sort products based on vendor, price, and inventory level.
Unlimited products
There’s no limit to the number or type of products you can sell in your online store.
Multiple images
Add multiple images for your products, so you can show off your product from all angles.
Video & 3D Support
Add, manage, and display video and 3D assets on product pages easily, all from your admin.
SEO product tags
Optimize your product pages for search engines with product specific meta tags, titles, and URL handles.
Subscriptions
Secure recurring revenue by offering subscriptions. Installing a Shopify-integrated subscription app ensures you can manage it all from one place.
Step 6: Design
When designing a website, it’s imperative to consider both the look and the functionality of the site. Integrating these elements into the design will help maximize the performance of the site, regardless of how performance is measured. For example, did you know that, because of search engine optimization, web design can have a huge impact on your performance in search engines like Google?
Visual elements
Here’s a quick overview of the elements you need to consider in your design to make sure everything looks good!
Written copy
Fundamentally, the look of a website and its words go hand in hand. The two should never really be considered separate. Having your designers and content writers work together, instead of in sequence, can enable a more powerful design.
Fonts
When designing a website, it’s imperative to choose easy-to-read font pairings that complement the design. Tools like Canva’s Font Combinator can help you find the perfect match for your font. We also use websites that allow our clients to chose fonts that suit there business and brand.
Colors
Colors are one of the most important elements to consider when designing a website. Keep in mind that there are a lot of misconceptions about the psychology of color. When choosing colors for your site, it’s important to focus on aligning your colors with your brand and the message you are trying to convey.
Layout
How you decide to arrange your content will have a dramatic impact on both the appearance and functionality of your site. Although there aren’t any specific rules when it comes to website layouts, there are definitely some principles you should follow. If you don’t know how to write code, it becomes essential to understand the limitations of different website design tools so you don’t get stuck halfway through your design.
Shapes
The use of graphical elements in web design has really taken off over the past few years. Combining beautiful colors and shapes can be used to accomplish many things, such as directing the attention of your site visitors. The biggest challenge with this trend is the complications that arise when looking to implement the design without having to rely on code.
Spacing
There is a space that exists between every element within your design: the images, the paragraphs, the lines… even the letters have spacing! As a rule of thumb, having too much space is better than having things crammed together.
Images & Icons
Amazing designs can communicate a lot of information in just a few seconds. One of the ways to accomplish this is through the use of powerful images and icons. A quick Google search for stock images or icons will produce thousands of options. To help simplify your search, here are a few of our favorites:
360 Images
You can also add and we can help upload 360 photos of your business or products so that your clients can move around the image and explore in a great way on a PC or mobile device.
Videos
Videos are an increasing trend amongst web designers. When used properly, they can help your website visitors experience something that simply can’t be described with words or images. One thing to keep in mind is that eye-catching videos can be distracting and should never compete with your content.
Functional elements
Here’s a quick overview of the elements you need to consider in your design to make sure everything works well!
Navigation
Navigation is one of the main components that determine if your website actually “works”. Depending on the audience, your nav can serve multiple purposes. It helps first-time visitors discover what you have to offer while guiding returning visitors to specific sections within your site. In both cases, there are a few best practices you’ll want to follow.
Speed
No one likes slow websites. Regardless of how nice your design is, if it doesn’t load within a reasonable time, it will not perform in search, and it will not accomplish your goals. Although the top site builders typically compress your content to maximize load times, there are no guarantees; do your homework to ensure the tool you choose provides optimum performance.
Animations
There are tons of web animation techniques that can help your design accomplish a wide range of tasks, from grabbing a user’s attention to giving feedback on certain interactions with content like buttons or forms. If you’re new to web design, we’d recommend sticking to simple animations at first. Complex animations typically require developer intervention.
User interactions
Your site visitors have multiple ways of interacting with your site depending on their device (scrolling, clicking, typing). The best designs always simplify these interactions giving the user the impression they are in complete control. Here are just a few examples:
- Never auto-play audio
- Never underline text unless it’s clickable
- Make forms mobile-friendly
- Never auto-play video
- Avoid pop-ups
- Avoid scroll jacking
Site structure
A website’s structure plays an important role in both user experience and SEO. If people are getting lost navigating through your site, chances are, crawlers will too. Although there are some free sitemap builders available online, for small sites sometimes the best approach is to layout your pages on a whiteboard or on a piece of paper.
Cross-device compatibility
A great design will look good on all devices and browsers (including Internet Explorer). If you’re building your site from scratch, we’d recommend using a cross-browser testing tool to make this tedious process faster and more efficient. On the other hand, if you’re using a website building platform, the cross-browser testing is typically taken care of by the company’s development team, which lets you focus on the design.
Step 7: Website Design Tools
There are two main ways to design a website: using a desktop app or using a website builder. The tool you decide to use will vary greatly based upon your team size, your budget, the type of site, and its technical requirements.
Desktop apps
The most popular desktop apps for designing a website are Photoshop and Sketch. This process requires designers to build out a design before sending it to a development team to convert the design to code.
Typically, this is the de facto standard for large or complex websites because it allows the designer to focus on the look and feel while transferring all the technical challenges to the dev team.
Unfortunately, this process can be expensive and time-consuming as multiple resources and specific skills are involved.
To avoid involving a developer, it may be beneficial to use a website builder to design a website with fewer technical requirements.
Website builders
There are several website building options on the market today. Not all of them can be considered “web design tools” as editing limitations can make it very difficult to create something custom without having to rely on code.
For example, although Wordpress is the most used website platform, it’s not very popular with visual designers. Typically, it is used by developers who implement designs.
As mentioned above, there are only two types of web design: adaptive and responsive. Let’s take a quick look at the most popular web design tools based on the type of code they produce.
Adaptive websites
Wix and PageCloud are arguably the two best visual website builders on the market today. Because they use an adaptive approach, their drag and drop and WYSIWYG capabilities are second to none. This means you can build just about anything without having to write a single line of code.
Wix has been around since 2006 and has since developed a wide range of features and templates to suit just about every business need. Today, it’s considered one of the easiest tools to use for beginners.
On the other hand, PageCloud was founded in 2014 and its revolutionary technology allowed designers and developers to collaborate in a visual editing experience like no other. Today, it’s considered among the most easily customizable website builders.
Although there is no distinct winner in this category, here are a few things to keep in mind:
If you’re looking for the most customizable experience, choose Page Cloud. If you’re looking for something really easy and don’t have a lot of design experience, choose Wix. I f you’re looking to work with a developer, choose Page Cloud. If you’re looking to work with lots of templates, choose Wix. If you like shortcuts and the experience found in desktop publishing apps, choose Page Cloud.
As both platforms offer free trials, we’d recommend trying them both before deciding.
Responsive websites
Creating a fluid responsive website is hard. Despite the fact that tools like Squarespace produce responsive sites, the editing experience uses grids and boxes that make building unique designs close to impossible without having to code extensively.
This is where the more complex web design tools come in.
Once again, there are a lot of competitors in the space, but two of the leaders are Webflow and Front.
Here are a few of the pros and cons to consider when looking to adopt one of these tools:
Pro
Ability to create custom responsive sites without having to write codeUnmatched control over every element on the page ability to export code to host elsewhere
Cons
Complex tools with steep learning curves slower design process.
Step 8: Adaptive Vs Responsive Design
The best part is that with modern design tools, you don’t need to know how to code to build out stunning websites that look great on all devices.
Understanding the pros and cons of adaptive and responsive websites will help you determine what’s best for you.
Adaptive websites
Adaptive web design uses two or more versions of a website that are customized for different screen sizes. Adaptive websites can be split in two main categories based upon how the site detects what “version” needs to be displayed.
Adapts based on device type
When your browser (aka client) connects to a website, the HTTP request will include a field called “user-agent” that informs the server about the type of device attempting to view the page.
Basically, this means the site knows what version to display (ex: desktop or mobile). The only problem with this approach is that if you shrink the browser window on a desktop, the page will not adapt because it continues to show the full “desktop version”.
Adapts based on browser width
Instead of using the “user-agent”, the website uses media-queries and breakpoints to switch between versions. So instead of having a desktop, tablet, and mobile versions, you’d have 1080px, 768px, and 480px width versions. On top of offering more flexibility when designing, this approach offers a more “responsive” look when changing the size of your browser on a large screen.
Pros
WYSIWYG editing (What you see is what you get)Custom designs are faster and easier to build without code Cross-browser and cross-device compatibility Fast-loading pages
Cons
Websites that use “device type” can look broken when viewed in a small browser window on a desktop limitations on certain effects that only responsive sites can accomplish
Responsive websites
Responsive websites use a combination of flexible grids (based on percentages) with breakpoints (using media queries) to create a custom look at every screen size. Unlike adaptive sites that adapt only when they hit a breakpoint, responsive websites are constantly changing according to the screen size.
Pros
Great experience at every screen size, regardless of the device type Responsive website builders are typically rigid which makes the design hard to “break” Tons of available templates to start from
Cons
Requires extensive design and testing to ensure quality (when starting from scratch)Without accessing the code, custom designs can be challenging
Step 9: Modules & Plugins
Once you have your domain and hosting if you decide to go down the route of a content management system there are many different items you can add to the site:
- Online car sales
- Finance calculators
- Live chat systems
- Instant quotes
- Booking systems
- SEO modules
- Breadcrumbs
- Cache Plugins
- Website backups
- Lazy load
IT To Go have many years of experience in this field and all work is carried out in house and not by further 3rd parties so if you need any help then feel free to contact our design team for free impartial advice by hitting the contact us link here.