Harry's Tech Space

Read my experience with different products and technologies.

Category: Websites

The levers that control your website

Websites are now center pieces for every businesses and bloggers. News channels splatter ads that tell you to have website of your own business. The website is the face of your company, and plays a vital role in building trust. Since it is closely linked to your identity, its imperative you know the levers that control your website. Having access to all the levers help you in managing your website.These are the things which every website owner must have access to.

Websites, like a house – has a name (domain name), a place (hosting) and things that make it up (content). Domain name is name people type in their browser to reach you. Browser then tries to ascertain your location to establish the contact. Once contact is established then the contents are loaded in browser. But majority focus only on content and loose sight of other things resulting 1 entity having too many names littered across, or zombie domains like problems. Hence lets jump in and understand the various levers that control your website.

The Domain: The 1st Lever that control your website

Domain: The first lever that control your website

The Domain Name is name of your website. If you see this websites name www.harshankola.in – that is the domain name of this site. The “.in” is considered as TLD aka Top Level Domain. There are lots of varieties of TLD’s like .com, .org, .gov, .gov.in, .pk, .cn, .ac.in, .net, .co.in etc… The middle part is called domain and beginning www is called subdomain. If you have domain name as techblog.wordpress.com the TLD will be “.com“, the domain will be “wordpress” and subdomain will be “techblog“.

To register your domain name(ex: google.com, facebook.com) you have to approach domain registrar like Big Rock, Go Daddy etc… The domain names are unique to websites hence while registering the registrar first searches whether the domain name chosen by you is available and not taken by other. For example If you try to register wordpress.com, or google.com facebook.com it will not be available as they are already taken and hence you will not be able register them. if a domain available then only you can proceed to register and buy it. But please do note The domain registrars are  guys who are allowed to sell domains not subdomains. The subdomains are given out by owner of that domain. For example, if you want to register techblog.wordpress.com you need approach “wordpress” to licence the subdomain “techblog” not a domain registrar.

The domain registrar actually rents you domain name for a particular time period to prevent domain squatting. So you need to keep renewing your domain name regularly. Once you register your domain, you need to make sure that domain name actually points to place where your content is hosted. If you had CDN(Content Delivery Network) then you need change things like Nameserver. If you wanted forward the domain to your blogspot or wordpress blog, it requires to changes to DNS records of CNAME, A record etc.. To do all these things related to DNS Server you need access to account you had created with Domain Registrar. So this account of domain registrar is First lever that you need to control your website’s functions. its important you have access to this. Even if you hire new guy to manage your domain, he has to manage via this account only, hence have access to Domain Registrar’s Account.

Hosting: The 2nd Lever that control your website

The hosting service gives you a space to host your website. whenever a person types a name of website, the browser first contacts domain name server to find out hosting server address. Then the browser contacts hosting server, on successful connection it begins loading content from this server.

In hosting there are various types of it namely shared hosting, virtual private server hosting and dedicated server hosting to cater various requirements of the users. In case of shared hosting all the websites hosted by the service provider are stored on same disk and this is cheapest form of hosting too. In case of virtual private server you get access to a virtual machine running on hosting server and this slightly costly as the virtual machine gives you more freedom to do things. In case of dedicated server you are given a full fledged computer to host hence its very expensive.  While selecting hosting plan its also necessary to know max bandwidth and max space allowed for your site. If your website doesn’t plans to have blogs then space required will be least.If many people will visit your site then bandwidth requirement will be higher. Hosting services also provide e-mail services and other features. Creation and management of subdomains are all jobs hosting service itself. The type of operating system on hosting server also matters for the content to be hosted. Once you have made up your mind on hosting plan you purchase for the requisite time period. Like domain name the hosting space is also leased to you for a particular duration.

To give a single point of access to all the services, the hosting service provides you a control panel (cPanel is most famous one provided by many hosting services, some hosting services give their own inhouse versions). If you want to upload contents to your site the FTP server address are all available through hosting control panel only. To manage various services provided hosting service such as emails, subdomains, FTP accounts, you need to have credentials of Hosting Service’s control Panel account. So this cPanel’s account is the second lever that provides you access to tools to control your website’s hosting functions. To add new email or add new subdomain or let a new developer build your site from scratch, you need this cPanel account.

The contents: The 3rd Lever that control your website

Content: The third lever that control your website.

The contents are the things that are displayed to your users. Once a link to hosting server is established, the server software of host starts providing your content to browser. If the content is just a html file then server sends it directly to browser, otherwise it processes the file and sends appropriate file to browser.

There are lots of technologies to display the contents. On most simple side of spectrum is HTML pages. HTML page is static page and doesn’t change. But there are active dynamic pages built from technologies like ASP, JSP & PHP. One can also use content management systems like WordPress, Joomla, Drupal to build their websites too. The most important constraint with content is it must load fast. Its also necessary to know the various hooks and straws of content systems(Also Read: How I build SKDRDP site from scratch). Too big images and resource files have power to slow your site down. If some data about your business has changed then you will need to change the content. If the content is in HTML then you need a full time developer to manage and control your website. If your site has content management system then you need to learn its how to.

Now a days majority of websites have content management systems as it make easier to focus on content and forget various technicalities of running website. The CMS makes it easier to add new content and also makes it easier to expand its own functionalities by ways of plugins. Since the benefits of CMS are obvious, its important to have access to CMS’s administrator account. So this CMS’s account is the third lever that control your website. To make any changes to content you need this CMS’s administrator account.

These are the various levers that control your website. Please do have access to all of these to avoid future catastrophe with your website.

How I built SKDRDP site from scratch

Though I had been selected with much fanfare on 10 march to deal with SKDRDP site, I couldn’t taste success for long as the site which I was inheriting was filled controls which I cound’t resurrect or uplift. The site was nightmare in adapting to newer tech like HTML 5. I had big gripe with the SKDRDP site of not being mobile and tablet friendly. The site was loading with a viewport of 968 pixels even on mobile devices. This fixed width reuqirement was causing lot of discomfort to mobile visitors leading up to higher bounce rate. Also there were none to brainstorm with and get ideas. I was all alone, and was just tinkering with old site for long. It was during a Codecademy course the things tipped. In that course I learned about making sites ‘responsive‘.

Since I couldn’t ask for help by others, I had to bring this innovative plan of Responsive Mobile Friendly site to fruition by myself. But there were lot of obstacles I had to face. My lack of knowledge was also limiting  me in this case.

Entry of Bootstrap: The tipping point of SKDRDP site

While I was doing a course on Codecademy about building a Airbnb Homepage, I came across a framework called Bootstrap. It was from this point the things tipped. Till I did the course, I was tinkering little bit about HTML to get whatever I wanted from SKDRDP site. After I become more comfortable with the Framework, I decided to dump the tinkering of oldsite and started to building it from scratch.

Since I was groomed up by using of IDE’s for writing softwares, I decided to use  Net Beans for building the site. I started working on the site in Beginning of October. Since my HTML skills was less and my motivation to sit for longer times building things was also less, I decided to build the site in 1 small steps at a time. The build goals were small and incremental. I didn’t even do the holistic thinking of of the site design, I just kept on reading about bootstrap framework, thinking about the features it had and building the site with the feature I read. Some of the features that are prominently there in the site are

  1. Navbar
  2. Responsive thumbnails
  3. Carousel
  4. Panels
  5. Nav Tabs
  6. Nav Pills
  7. List Groups
  8. Alerts
  9. Tables
  10. Buttons
  11. Glyphicons

While using above mentioned features, I was constantly contemplating what does the above thing do?, what role does it play?, how it will render on different devices?. This constant contemplation was the key thing that helped me get things done early. The most challenging part of building the site was, building the Home Page.

Designing the home page

home page

One of the most toughest thing in building SKDRDP site was the designing of Home page. Looking at the various options provided by bootstrap my head was reeling with blow up of options. As I was novice in the world of web development, I constantly referred to documentation while building the site. When I started working on the site, I first picked up header image, Did some little bit of editing in GIMP. I did the same with carousel images. So most of my initial development time was spend in picking up the images and retouching them. Once I had cache of images for the site, I dived into HTML world for building the site.

The first step of building the site was, creating a bare-bone HTML documents satisfying prerequisites of website.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | SKDRDP&reg;</title>
<link rel="icon" href="/images/fav.ico">

<!-- Meta tags for setting view port and SEO -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Comprehensive plan for the Sustainable Development.">
<meta name="keywords" content="SKDRDP,Rural Development,Sustainable Farming, Community Development, Micro Finance">

<!-- Loading linked CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/docs.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<style id="holderjs-style" type="text/css"></style>

<!-- Adjustments for buggy IE -->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>

<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/docs.min.js"></script>
</body>
</html>

As shown in above code sample, I typed all the things and saved it as ‘index.html‘. Once the well formed code was saved I started working of visualizing features to be added to the code. The ‘viewport meta‘ tag was the most important one, it is that tag which adds responsiveness to webpage. In old SKDRDP site the width part was ‘width=968‘, which meant it would render the same way on mobile, tablet and desktop. Once this bare-bone HTML was created, I added content which would be common for all the page. That common content was Header Image and Navbar. Once this template was set, I saved a copy of it as a template for all other pages. This work of templating is a common practice for building the sites.

After templating I started to add features for the home page. The first was carousel. In the old site the upper carousal was broken and lower carousal didn’t provided much of traffic to pages. So in current SKDRDP site, I decided to build the carousel with embedded button so that traffic would convert with much ease. Unfortunately the Number wise most widely performed function on carousel is ‘clicks on next/previous buttons ‘ :p. As told before the carousel was put at the top of page to showcase various categories of activities done by SKDRDP.

The next section to be put up after carousal was 2 column of About Us and Basic Stats. The about us section was embedded with buttons for Pragathi Bandhu Groups, Community Development Division and About Us page. These 2 things were given buttons specifically because, these 2 things had great impact on our organization. Pragathi Bandhu SHG’s is the root of all the SKDRDP activities. CDP is main Vision of SKDRDP. Besides the about us section is Basic Stats section giving out all the basic and vital stats of our organization.

Below this is last part of home page, the Facebook activity feed, some downloads and contact details. All these were built with panel feature of bootstrap. It almost took a day to build each of all these features of home page.

Building other subsequent pages

The building of other pages of SKDRDP site was breeze as they were all content pages without any hi-fi layouting styles. For developing our management page the technique of thumbnails and thumbnail content was used. The alert for SKDRDP page was deliberately inserted to push some traffic to facebook. Apart from that alert bars were prominently placed to give some preference to SKDRDP Blogs. This above the fold alerts being blue color catch attention and divert some traffic to blogs. The downloads have been given a separate page with list groups to download the content. Since this page is not a high priority one it was kept hidden in About Us page. I call this technique of keeping lesser priority content as “out of sight and out of mind technique”. Earlier my classmate told me about duplication of contact section on old site, hence on new SKDRDP site I provided quick contact as a ‘panel’ on home page as well as contact details page for head office and all our project offices as separate menu items.

Though I consider my self as novice in web development, this activity of building the SKDRDP site helped me to learn considerably. Since there were none to help me with the basics, The foundation of learning things on internet got strengthened considerably. Its this e-learning thing that really made all the difference. So keep learning and keep growing.

© 2017 Harry's Tech Space

Theme by Anders NorenUp ↑