Harry's Tech Space

Read my experience with different products and technologies.

Category: Websites

The dawn of new era in SKDRDP website

SKDRDP Logo

Change is only constant in this world. Till 19th April 2017 the SKDRDP site was in its fresher university graduate version with HTML structure. The only professional feature in was that it was built on Twitter’s bootstrap framework to give proper mobile and tablet optimized view. Compared to its predecessor website this one didn’t set meta viewport with fixed width. The viewport sets the width of the web page it is supposed to be rendered. Since viewport is not set the site can ask width from the browser and render itself according that dimensions. This along with HTML 5 tech made the site much more bearable than its previous ones as it rendered according to device. Despite the major professional feature, the site still felt lacking more power. Also I hated the idea of using FTP client to push the local draft to the server every time a change was made.

(Read moreHow I built SKDRDP site from scratch. A Chronicle on bootstrap version of site.)

The site due to its professional bootstrap framework helped me in running it from Diwali of 2014 till April without much hiccups. Unlike codecademy course that tipped me in building it, this time it was sites of our subsidiary Jana Jagruthi and Bhajana Kammata that blazed the path for the CMS powered site. Also my personal experience in running my own WordPress site and SKDRDP’s blogs gave me an idea about what to expect from the CMS’s. Compared to HTML I did  find these CMS’s to be more restrictive, but they also opened the world of plugins and widgets which could accomplish complex things effortlessly without requiring extra coding knowledge.

For me the site’s journey can be split in 3 time zones. The prologue gave important learning which has lots of bearing on the current site. The present chronicles the capabilities of the site, and current trends. The future projects the trend to tell where the site should go.

1. The prologue:

Every site has 3 levers that control it. The first one is its domain panel where you set parameters regarding name servers, domain records and other domain management things. The 2nd lever is site’s cPanel. This one manages server’s hosting environment. The 3rd lever is of site’s CMS system. If it doesn’t have CMS then it will be FTP controls.

In the initial years due to my own inexperience the cPanel and domain controls were not accorded much importance. With building of website of Bhajana Kammata in  month’s time, I came to know what all can be done if one controls all the 3 things. Domain controls security aspects of site too, as one needs to order for Static IP for SSL certificate from here only. cPanel is place where one installs certificate after its issued. After these 2 only one can enable SSL on his CMS. Similarly lot of things like CDN, Caching require one to use these 3 things excessively.

(Read moreThe levers that control your website. Explanation of above concept.)

1.1 Website’s Data Era: Analytics

The next thing after taking control is setting up of monitoring systems. The monitoring system of site visitors is called as Analytics. Google is one of the famous provider of that service. Analytics helps webmasters like me to  understand visitor dynamics over various metrics and dimensions. In short metrics are numbers like bounce rates, visitors, time on site etc… Whereas dimensions are context specific and shows based on report. In case of geography report various dimensions will be different countries a visitor belongs too. In case of traffic source report dimensions will be referrals, social, search, direct etc.. Analytics requires one to place the tracking codes on each page of the site. Since CMS have powers to create pages on the fly, plugins are needed to make this easier.

(Read moreDecision Making and Google Analytics. Explains various features of this profound tool)

1.2 Social Era: Building Social Media Infrastructure

Once analytics is set up and running properly the next one to come is communities and followers of the website. For this a social media strategy needs to be in place. For that website content need to be made shareable. Which  means images must be of higher quality. There has to be compelling headline and some excerpt accompanying article, which would display on social media sites and search engines. And not to mention role of share buttons play in this regard. This sets basic social infrastructure on the website.

The social media picks image called featured image for display on their sites. This image is the representative image for the article, hence it has to be appropriate. One can use high quality stock images too for this featured image. Since its featured image, the resolution and quality of image cannot be skimped at all. In an article, first impression is always made by image featured and the title of story. This quality constraint of website means images shared on whats app or ones pasted in word document will always become low quality images to be featured images. This also results  click not happening at all despite compelling headline and excerpt.

After the image and headline it will be excerpt that decides whether user wants to read or not. Hence its worth while to get the first impression right by featuring a high quality image, a compelling headline and a custom drafted excerpt for the article. Note that Yoast SEO plugin allows custom excerpts for the different networks like Facebook, Twitter and Search Engines. Once can write custom excerpts for article by using excerpt dialog box in WordPress. if its not displaying then use screen options drop-down in new article window to display this box.

2. The present:

As described in previous sections. The major learning were controlling 3 levers, analytics and sharing friendliness. All these things were present in past site too. The presence of above 3 factors aided in brand building of SKDRDP. The current site now shows off a full sized images, sharing is easy for blog articles and success stories. All these things have some underpinning for being there. Without further ado lets dive into rationale for larger images, call to actions etc..

2.1 Role of Websites and Analytics

Many companies view website as dummy information source, a white elephant, expense center. But in reality, its an asset in social terms. If a company needs to build its credibility its expected to have its own up to date website. In internet world website is the face of the company. Social Media add digital marketing arm to a company along with website. Websites having blogs are considered as engaged in content marketing, and shows off soft-skills a company has.

Since website is part of marketing campaign, like every marketing campaigns it should be tracked for effectiveness. And in tracking the things that play important role are the campaign reach, campaign engagement and campaign conversion. Likewise a grand purpose every campaign has relative importance given to reach, engagement and conversion metrics. For example, if campaign wants online sales to be maximized it needs to focus on conversion numbers. If building awareness about the company is important then reach has to be higher. The tool used for measuring these is analytics package. But the first thing is defining problem statement – what you want to achieve.
In case of SKDRDP website, It was set way back in March 2014 to increase the reach.

Reach of website and that of company grows only if it gets visibility in mediums that have larger audiences. The mediums can be paid mediums, owned mediums or influencing mediums. Example of paid medium is advertising medium. Owned medium can be blogs, news letters etc… Social media is type of influencing medium, even search is another influencing mediums. Apart from medium it needs to be focused that awareness building requires retention of the user on the site. So the analytics is used to make things friction free for the user.

2.2 the game of Images, CTA’s

Analytics can help you tell about friction points in user experience. But there is one such thing which is always visible and done very badly by novices. That mistakes happen in images and call to action aspects. In a quest to reduce image sizes novices reduce the resolution to such an extent that microscope is needed to view the image. Also novices totally ignore the Call to Actions on images which is the thing that generates all the engagement on the site.

apple website

If one observes all the big websites be it of apple, or amazon or others. The first thing they see is a large image covering the face of website. The image contains a small Call to action to get the person act on it. This CTA and large images have set themselves as standards for websites. If an image is too small, it will look ugly and pixelated on larger screens. Images sent from whats app and MS word suffer from this problem. To manage the size of images, these programs chop off the quality. The site image must not fall below Full HD resolution i.e. 1920 x 1080 which is impossible to get on apps like whats app, MS word.

2.2.1 Image thumb rules:

To aid people here is list of thumb rules to be observed with images:

The images sent has to be directly taken from camera and editing must be done by person supposed to post it to the site or his team.

The person taking image must only ensure image being taken is not shaken up badly making restoration of it difficult. This rule doesn’t apply for professional photographer.

Images are better shared to the web manager via dropbox, google drive or by mail attachments. Things like Facebook, Whats App, MS Word should not be used at all. Internal company tools for sharing are most preferred if they don’t alter the images.

Facebook, whats app, flickr, google photos,twitter are better mediums to reach end consumers of images and data.

Whenever images goes thorough a conversion it always loses some quality. hence its best to avoid conversion of image into other forms in inner works and transfers. Some image conversions are – image file to website image, image file to printed photo, image file to whats app photo(highest loss of quality), printed photo to scanned image.

2.2.2 Call to Action (CTA):

The CTA is also an integral part of website. It can be used to inform the visitor, or make him buy your product on your site, and many more. Every professional website has it, and every novice website doesn’t have it. If site is for information purpose then CTA will normally be embedded in the image itself. If site wants to drive an action on the site itself, then the CTA will be separate from the image and highlighted – to make the user conduct the action. And as quoted earlier the CTA to put comes from what one wants to achieve with the site i.e. vision statement.

3. The future:

In the previous section I explained about role images, CTA and analytics play in the website. These things lay a solid foundation for engaging the visitors of the site. But often times we want our site to advertise and sell our products too. The roles of advertising and e-commerce will bring out additional complexities in site design. The pre-requisite for e-commerce is HTTPS being enabled by default. It also helps in getting the site being HTTP 2 compliant leading to faster site. Advertising and e-commerce being more important branches, even analytics focus on these aspects too. The Goal tracking is an analytics feature which is used for digging deeper into e-commerce sales funnel.

3.1 The advertising play:

The advertising has 3 players in the fray. The Advertiser, The Publisher and Ad Network. In case of company blogs they do not carry advertising but they might be keen to host images of products of their on their sites side bars and related content etc.. to boost visibility. So in case of company blogs, the advertiser and publisher will be the same, hence they wont be needing an external ad network. If the above 2 are different then only ad network is needed. One such example of ad network is Google Ads. Under Google’s Adsense program a publisher can allow google ads on his site. Google in that case will manage ads on that site by displaying ads of advertisers who have signed up on it ad network via its AdWords program. Similarly sites like Bing, Facebook, Twitter too have their own ad networks to manage ads.

The billing of of ad networks also varies a lot. Some charge for every click received on the ad called as Pay Per Click (PPC) model. Some bill based on impressions i.e. displaying of the ad. Its called as PPM – Pay Per 1000 Impressions. M in PPM is based on roman letter for the number 1000. Since these ads require one to pay for acquiring the customers this falls under purview of Paid Media. Also this paid media which is accessed by an ad network also has really good click through rates, making it ideal for e-commerce sellers. Ads on these networks are categorized as Text ads and Display ads(image ads). Normally text ads have PPC billing and Display ads have PPM billing.

Normally companies advised to be signed up as advertiser on ad networks despite having their in-house content marketing platforms. Its so because the digital advertising provides a much better click though rates.

3.2 The commerce on internet – e-Commerce:

Before beginning on e-commerce, its important for the sites to implement a robust security infrastructure for the website as it involves real money being used in transaction. Its recommended for e-Commerce sites to have HSTS and HTTPS enabled to prevent troubles. HSTS stands for HTTP Strict Transport Security which enhances security level of HTTPS protocol. The word HTTPS stands for Hyper Text Transfer Protocol Secure. With these 2 implemented, an e-commerce seller could go knocking on doors of payment gateway.

(Read More: Website loading: Basics of Authentication and Encryption – Part 2. Explains about security)

The work of payment gateway is to link the e-commerce seller to the customer’s bank. And this entire process of making 1 transaction happen is a series of handshakes, and the entire transaction would fail if one of handshake fails. To visualize this process, when a customer enters his bank details and checks out the seller first sends the bank details to payment gateway. Then payment gateway redirects customer to bank’s server for customer to log in. After logging in transaction processing server processes the transaction and gives transaction confirmation message which is passed all the way back to the seller. If one has experienced e-commerce transaction he would know a timeout or error any 1 of this step would lead to entire transactions being failed. For this service the PG’s charge money for transactions routed by them to sellers.

3.2.1 Goals and conversions:

Since the transaction process happens on external websites, analytics will focus a lot on check out and thank you pages for goal tracking. These pages mark the end of sales funnel and carry a monetary value for each transactions. Its also considered as successful conversion as session which started by logging in to the website ended in converting into sales. In this regards analytics packages help one to identify hard and soft conversions.

When a user is supposed to be made aware of product in marketing terminology its called as generation of lead. soft conversions measure these leads. Events or URL tracking can used for soft conversions. Its also ideal to assign a value for soft conversion called as goal value. Some soft goals can be signing up for news letter, using a promotional voucher etc…

A hard conversion is like actual sales which is supposed to have a direct financial impact. In case of banks this goal will be of closing loan account by paying off last EMI rather than loan disbursal. In case of e-commerce seller it will be thank you page which is loaded after transaction is completed. The value attached to successful sales is normally set to be the sales amount of transaction. Also a hard conversion can have a sales funnel to track how users are proceeding with the sales process. In this each step of the process will have a goal attached to it.

Conclusion:

In this we read about making sites mobile friendly, analytics, role of social media, the game of images,CTA, advertising, and e-commerce. All these are considered as basic building blocks of a site. Unfortunately these things are not part of university curriculum. Hope you enjoyed reading through this huge article which gives the bird’s eye view on the world of 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 ↑