Webhosting Guide: How to Design a responsive website
Hosting a website means that you put your website files on a special computer called server, which makes your website files publicly accessible on the internet such that anyone can visit it.
These special computers have a particular set of software installed. This software is known as a web server. A web server’s basic duty is to receive incoming requests and respond by sending the requested page on the user’s browser. Below is a guide on how to host a website.
Requirements to host a website
You will require the following two things to host a website.
- Webhosting service provider (s) – They offer you ready to use web servers to host your website. They take care of all the technical staff and provide website owners with easy to use tools to manage their hosting.
- Domain name – This is the address of your address of your website that people type in the browser to visit your website. For instance, jklaggers.com will bring u to this website.
Types of Website Hosting Services
Not all websites are the same. Some are smaller and have low traffic while others are larger with more visitors and content.
A smaller website requires fewer resources, such as disk space and bandwidth while more popular websites will need more resources to run efficiently. Therefore, website hosting companies provide different types of hosting designed to address specific needs.
Here are some of the hosting options: Shared hosting, VPS Hosting, Managed WordPress Hosting, and Dedicated Hosting
How to host a website on your computer
The reason you should host a website on your computer is when you want to test a site locally before putting it on the internet by installing a local server. Here is how to put your local Host server online.
Once you host a website on your local server, it becomes available to you only and you will need to change its settings to put your website on the internet. Below is how to go about it:
- First, locate your webserver software’s configuration file known as httpd.conf. If you are using WAMP on windows, then you will find it under C:\wamp\bin\apache[version#]\conf]
- You can open this file using a plain text editor like Notepad or Text Edit.
- Next, find the line that begins with listen 80
- Replace the line with your IP address and port number. It should look like this (Listen 64.233.160.1:80)
- Next, find the line – Sever Name Localhost: 80. Replace localhost 80 with your IP address to have something like Server Name 64.233.160.1
- Next, find the following line for WAMP: <Directory “c: /wamp/www/”>. Below you will see the access permissions, which you will need to replace with “Order Allow, Deny Allow from all”
- You can now save your, configuration file and restart your local server with the new permissions.
Read Also SEO Copywriting Guide with Examples
Read Also Alibaba Shipping Agents in Kenya Guide with Examples
How to Design a Responsive Website
A website is responsive if it is able to adapt to the screen of a client be it a desktop screen, tablet or smartphone. Below is a guide on how to create a responsive website:
Set Appropriate Responsive break points
A break point is the point at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. To allow this, developers have to use responsive breakpoints, sometimes called CSS breakpoints or media query breakpoints.
Start with a Fluid Grid
A fluid grid positions and sets web elements on site in proportion to the screen size it is displayed on. It helps with keeping a site visually consistent across multiple devices. It also offers closer control over alignments and enables faster design related decision making.
Consider touchscreens
A responsive website will have to calibrate itself for being accessed via touch screens. To do so, use images, CTAs or optimize these elements to render properly on multiple screens.
Use Responsive images and videos
Use modern image tag attribute to make images responsive to multiple device and screen resolutions. For responsive videos an effective way to create responsiveness in them is by using an aspect ratio
Typography
Responsive websites need a responsive font. Font size must change with respect to parent container width. This is necessary to make typography adjust to screen size and be easily readable on multiple devices.
Use a pre designed theme or layout to save time
Designers and developers should opt using responsive websites to save time or meet their tight deadlines. WordPress provides multiple options in pre-designed layout with built in responsive properties. All you have to do after picking a theme is to decide on colour branding and text.
Test Responsiveness on real device
Developers can tweak the code all they want, but its functionality has to be verified in real life conditions.
