17 Elements of Successful Website

A modern website has a lot going on under the hood. Here are all the aspects of a website that need to be carefully considered.

User-Interface Design

Knowing How People Behave on Website

How people interact with screens evolve over time. As new devices are introduced to the market, new ways of interacting become possible. As people master a certain level of complexity, they become ready for the next level. In this way, UI design is a moving target. Each site or app should choose a specific psycho-demographic segment in the technology adoption curve (i.e. early adopter, early majority, late majority, etc..), and optimize the experience for them.

Responsive Design

Adapting to Multitude of Screen Sizes

Before the introduction of smartphones, the average screen size was steadily increasing every year. Now the trend is the increase in the diversity of screen sizes. This means the design must dynamically adapt to any and all screen sizes. This is a big challenge for graphic designers; it’s like trying to decorate your room with pieces of furniture which are constantly moving. Visualizing responsive design is also challenging; you need a strategy for communicating it with your clients.

CSS and HTML

Bridge Between Art and Technology

Most designers do not know how to code. Most programmers do not know how to design. These two worlds tend to live in their own silos. CSS and HTML is where these two worlds must be bridged, and it takes a special kind of talent to achieve it. To designers, the difference in a few pixels may mean the world, but to programmers, it is beyond comprehension how a few pixels can matter. On the other hand, designers often have little to no understand of what is technically possible. They are unaware of highly impactful possibilities that can be achieved relatively easily, while they try to push the engineers to do something with little impact but is a significant amount of work to achieve.

Javascript Framework

App that Runs in Your Browser

The days of static web pages are coming to an end. A modern website is expected to behave like an app where transition from one page to another is seamless and instantaneous (as opposed to clearing the browser window and waiting for the next page to be loaded from the server). When the user interact with one element, other dependent elements dynamically update without having to load a new page. Use of Javascript frameworks—like AngularJS, Backbone.js, and Ember—enable websites to act like a native smartphone apps.

Social Media

Managing How People Share

The vast majority of websites these days have social media components. When someone shares your web page, how does it look on the Facebook Wall? This is controlled by so called Open Graph. Your website must accommodate it. It’s easy enough to link to your social media pages from your website, but that would not be enough to encourage people to share your content. Your site needs social media widgets for Liking, sharing and Tweeting.

User-Interface Animation

Small Touch That Can Make a Big Difference

With the advent of CSS3, animating page elements has become feasible without requiring plugins like Flash. The use of CSS animation to enrich user experience is becoming increasingly popular.

Buy Now

Web Fonts

Managing Technology Behind the Face

The days of having only about a dozen fonts to choose from is over. However, a specific technology must be chosen to deliver the fonts to the users, like Typekit and Google Fonts. There is also licensing issues to be aware of in using fonts.

Freight Text Pro

Aa	Bb	Cc	Dd	Ee	Ff	Gg	Hh	Ii
Jj	Kk	Ll	Mm	Nn	Oo	Pp	Qq	Rr
Ss	Tt	Uu	Vv	Ww	Xx	Yy	Zz	?!

Search Engine Optimization

How Your Site Looks to Google

There are two aspects to so called SEO: technical and marketing. The first part is getting your site technically up-to-date with what Google recommends so that your ranking would be fair and accurate. The second part is necessary only if you want to push beyond it. The technical part includes creating sitemap.xml, registering with Google Webmaster Tools, making sure every page has appropriate title set, making sure important words appear towards the top of the page and are used in headings, in bold, or linked, avoiding duplicate contents, etc..

Analytics

Understanding User Behavior

The de facto standard of Web analytics is Google Analytics. It’s free and feature-packed. It can tell you a lot about how your site is performing and what the users are doing and where they came from. If your site has specific goals you want to achieve, it is possible to track them. Setting up Google Analytics properly from the start is important because there are certain types of data you cannot capture after the fact.

Domain Name and DNS

Managing the Key to the Castle

The process of buying a domain name is easy but you should do it right from the get-go, otherwise it can be a pain to change later. This starts with which domains to buy, where you buy them, which ones to use as your primary, who is going to be responsible for renewing it over the years, and so on. Some people buy the domain names from their website hosts (ISPs), but this can become a problem if you need to move the site elsewhere. If your business rely on many services offered by Google, it might make more sense to buy it from Google. Surprisingly many factors are involved.

SSL

Secure Communication Between Browser and Web Server

Ever since Edward Snowden exposed what NSA was up to, a secure way to communicate over the Internet has become a big concern. Google now recommends that you use SSL for all websites. Buying an SSL certificate and installing it on the web server gets rather technical.

Hosting Platform

Strategy for Scaling Your Site

Ten years ago, being able to scale your website (being able to handle millions of users) required a team of experts. Now with the services like Amazon Web Services (AWS) and Heroku, it is relatively straightforward. However, the vast majority of websites do not need highly scalable websites. Since the services like AWS still do require significant technical overhead in managing them, and because migration is relatively easy, it is wise to weigh pros and cons and evaluate other options.

Server-Side App

Where Your Business Logic Is

This is probably the most technical part of all. These days, a completely static website is very rare. At the minimum, everyone has some form of content management system. The most popular one by far is WordPress. It is a server-side app written in PHP. If your website does nothing more than serving articles, then WordPress might be good enough, but if you need to do something beyond it, and if you have a plan to grow and evolve over time, WordPress may not be a good starting point.

The 80/20 rule applies to these off-the-shelf content management systems: You can get 80% of the job done in 20% of the time, but it takes 80% of the time to do the rest of 20%. If everything you need to do is contained within the first 80%, these systems are perfect; otherwise it would be wise to consider other options. There are many server-side frameworks that allow developers to build custom systems quickly (e.g. CakePHP, Ruby on Rails, Django, Node/Express, Laravel, etc..).

Database

Modeling Your Data

If you have custom data you need to store, it is critically important to design them properly from the start. How you design them dictates what you can do with them later. Now there are two very different options available. SQL (structured data) vs. NoSQL (document store). Depending on the nature of your data, and what you need to do with them, one is more advantageous than the other. NoSQL is quickly gaining in popularity but there are some serious pitfalls you need to be aware of.

Code Repository

Maintaining the Source Code

Every project should have a code repository set up at the start so that you can record the development history and effectively coordinate multiple engineers. Currently Git is the de facto standard but Git by itself has no central mechanism to manage it. Github provides that role. It allows you to control the ownership of the source code as a business.

Documentation

Ensuring Sustainability

Engineers are high in demand these days, so it is unrealistic to assume that the original engineers would forever support and maintain your system. Without documentation, the original engineers will go away with critical information locked up in their heads. What you are left with would be a black box that would take someone else weeks or even months to figure out. Investing in documentation therefore is critically important.

Backup and Security

Preparing for the Worst

This is the invisible and the most boring part that nobody wants to think about, let alone pay for, but if the worst case scenario happens, it would be the only thing you would be thinking about for many days or even months. Things fail. You need to be prepared for it. You need to have a process in place to routinely backup everything off site. You also need to be vigilant about security, especially if your database contains confidential information. As it happened to SONY Pictures, many people do not see the value of investing in security until it actually happens to them.