Website Design

Now that websites have evolved to be web applications that enable users to perform several tasks of varying intensity, they have also become heavier and laggier; for which, there are many reasons, but bad design and development is responsible for most.

With the advent of faster personal devices, developers transfer much of computation to the browser—which is a sensible decision in most cases. But much of this implementation is done with no prudence whatsoever. Many developers build software using shortcuts spending less time coding1 and choosing a language or framework that just works. This has led to inefficient websites often making me wonder the point of hardware improvements in the first place, when software is poorly designed to hog these improvements.

A product is the designer's vision, not the developer's; therefore, it must be developed to the designers' vision. If it is one individual doing both the design and the development, the developer ego must build the product to the vision of the designer's ego. Personally, I give utmost importance to speed, efficiency, maintainability and user experience which I will not compromise for cosmetics, low development cost or time. Website development2 must be approached with the mentality of doing what it takes to meet the design expectations fully, even if it is effortful and time consuming.

I understand the need for making products fast to hit the market first and capture the market share. But in the quest to become first, let us not use magic potions that make the software bloated, layered and resource intensive. Let us remember that we must cook the rice until it's cooked. Development must not compromise product design goals for convenience either. Programming is an art, all programmers know this, but only few programmers are artists.

Many think of a workaround: quickly construct a product with bad code, hit the market, and refactor it later... or even rewrite the entire product the right way later. This is a path I will not suggest. You can hit the market quite early with a badly developed product, but with it, you also lose your reputation, which is more valuable than time in our context, because rebuilding reputation will require more time than what would have actually taken to release a properly developed product.

It is true that if you are the first mover, the solution you provide would be valued more than the quality of your product, since no one else is providing the solution. Customers will continue to use your product giving you room to make improvements without risking market share. But only an entrepreneur with a background in business operations may choose such a strategy; those with a background in marketing and product design may not unless it all comes down to the factor of survivability. Good product sells whether it arrives first or second.

Now, speaking of designing a website, one must first realise that websites are interfaces for users to perform a task. Therefore each webpage must serve a purpose and they must be designed such that users achieve that purpose easily, quickly3 and in the most pleasing manner; easily—because people don't like to be in a state of confusion; quickly—because a second is too valuable to be wasted figuring out what to do or waiting for a page to load; and in the most pleasing manner because we interact with our world using our senses and anything that soothes our senses creates a liking in our mind for that thing. Based on this realisation, I follow some website design principles as follows.

Because websites are designed for users, every element involved in the using of the website must be factored in for designing—such as the Internet speed, devices, platforms, screens, the sense organs of users and even the common sense of users. Indeed, that's a lot of work, but designing isn't easy.

Websites must be designed to run seamlessly with the slowest Internet speed that your target audience uses. This principle also serves as a motivator for developers to develop light weight webpages in the first place. It would appear at first that what we do on the Internet today, cannot be done on low bandwidth. But on closer inspection, one can find that this is not true. Most of what we actually do on the Internet does not require high speed Internet at all, unless you are consuming large files such as media files. Everything else involves the exchange of only few kilobytes of data. Ironically, many websites are designed such that lot of bloat is exchanged each time a user navigates, and therefore they do not work with low Internet bandwidth. Websites must be designed to achieve what a user wants with the least data transmission. And this I say for two reasons—efficiency and to cover all bandwidth, of which the latter is relevant to our discussion.

People still use low speed Internet users across the world. In fact all prepaid 4G users in India are potential low bandwidth Internet users because their plans have a FUP (fair usage policy) that provides 4G speed only up to a limit, after which the speed reduces to mere 8kbps. The instinctive response is to ask how many people will experience this speed? But the fact is, it's not how many people will experience that speed, but how many people can experience that speed. And the answer is—almost all, since their plans allow it. The only thing that is between the users and post FUP speed is their Internet usage, which although is in their hands, is primarily driven by their work and leisure activities on the Internet. So, a product designer must never ignore the possibility that users will exhaust their Internet—can overpowers will. Will overpowers can only when the cost is extremely high. In our context, the cost of developing a website that works with low bandwidth is not high at all.

It is an acceptable to wonder how can one design modern websites that perform multiple tasks for such speeds. That's why design and development are an arts. The ground rule is to optimise everything that can be optimised. And those that you can't—such as videos or heavy applications—leave it as it is.

Moving on, webpages must be responsive to different screens and built using fluid breakpoints. Currently, only the screen resolution account for the calculation of screen size, but I wish that screen PPIs (pixels per inch) are accounted as well in order to help designers bring optimum legibility to all screen sizes. The responsive web design we use today does not take care of physical size of the screen. A 1rem font looks smaller in a 12 inch 768p screen than in a 15.5 inch 768p screen. You can't target physical size with resolution. So, perhaps someday, PPI can be accounted for.

Websites must be designed to work with all devices and platforms in use, irrespective of how many users use them. Often product managers compromise certain devices and platforms—either old or sparingly used ones—in order to save the inconvenience of development, time and cost. While this may make sense and in certain cases can be a part of product strategy as well, from a design perspective, such compromises aren't ideal. A designer should be flexible and design for all active platforms instead of being rigid and dictating users what platforms or devices to use.

In the interest of usability and performance, websites must be designed to work seamlessly with the web's fundamental later—HTML and CSS. Only features that cannot be implemented with HTML and CSS are exempted to be implemented with another technologies such as JavaScript. JavaScript engine is an additional engine to the browser and JavaScript is an additional computation for browsers, thus slowing the rendering than otherwise. This additional complexity and dependence is one of the reasons why it is stupid to use JavaScript for features that can be accomplished with HTML and CSS—the fundamental layer of web. It is even more stupid to implement features in JavaScript without any HTML and CSS fallback, if possible. Don't get me wrong. I am only suggesting a sensible use of JavaScript without compromising usability.

They say that anything that can be written in JavaScript, will eventually be written in JavaScript. And this is a good catchphrase to promote JavaScript; but I vehemently disagree with that. This has led to a design culture of rendering even the basic features such as the website's navigation using JavaScript, which has made such websites with no CSS fall back completely useless in JavaScript disabled browsers . Instead, I follow the principle that anything that can be achieved with HTML and CSS must be achieved with HTML and CSS because they constitute the core of the web. And what is a design if it is not designed for the fundamental layer!

I will agree that JavaScript has made web and desktop application development a piece of cake, especially with Electron which enables cross-platform software making from a single code base. Electron has been an excellent tool for developers, but a nightmare for users. I have used several Electron based desktop applications and I have never been satisfied with any—either they are slow and laggy or keyboards shortcuts don't always work. Nothing extra-ordinary comes without due work!

A design has the elements of functionality and aesthetics. Aesthetics is largely proportions, but colours, textures also influences aesthetics. In most cases, functionality and aesthetics go together, but with the use of JavaScript, they can become mutual adversaries. You can achieve a soothing visual experience on certain user events using JavaScript, but if implemented with a myopic outlook, it can hamper the functionality with certain users. If you cannot write a fall back, never achieve aesthetics at the expense of functionality. The biggest disservice a website designer can do to users is the beautification of a website at the expense of functionality. Most designers have the misconception that design is all about how the website looks—it is way more than that. As already explained, design is all about enabling the user to perform the task in the simplest, least confusing and the most sensorily pleasant manner. In the quest of pleasing the senses, do not compromise on the first two.

One of the biggest setbacks in the domain of user experience is that user experience designers look at a project through the eyes of a graphic designing rather than psychology, aesthetics and functionality.

Moving on, never use dark patterns. Design wise, they suck. Functionality wise, they serve a purpose and in most cases achieve it, but they make users mad. Dark patterns are not the ideal methods to achieve what the intended goal.

Never use pop ups. Interrupting user experience is a shitty way to grab attention. Instead, the content must command attention and drive users to do what you wish to achieve with a pop up. Design wise, pop ups suck too. Functionality wise, they achieve their goal quite often, but also interrupt users' experience, which is a design crime. Some users don't even know what a pop up is, and unable to close the pop up, thus leaves your website.

Never use colours or colour combinations that strain human eyes; unless you actually intent to strain human eyes. If you are not a colour expert to customise a colour combination (most of us aren't), stick to the commonly accepted colour combinations—complementary, triadic, tetradic, analogous, etc.

Understand the convenience of our eyes, neck and hands—they do not like to work much. So design websites for effortless accessibility. All webpage elements must be accessible without much effort of our eyes, neck and hands.

Understand the nature of our eye and neck movements for different purposes. For reading, our eye and neck movements are vertical in nature. A dark font on light background, left aligned text in a narrow column centred on the screen is a blessing to the eyes and neck. Use legible and comfortable fonts whether you use serif, san serif or monotype. Legible font size will be an issue until PPI is accounted for calculating the responsiveness of the design; but until then, consider high PPI screens while designing.

Always use as many Unicode characters and vector graphics as possible in lieu of raster images. Logos are best served with fonts, and if they are too complicated for fonts, use SVGs.

Do not design webpages that scrolls an entire fold in a single mouse scroll. Such designs interrupt the user experience as users are used to a particular way of scrolling (the normal way), and they scroll every new page as per this muscle memory. Only few web design ideas are worth compromising this memory.

It is best to leave the experience of links to the default convention because visitors are used to it. If you are forced to modify the experience, do not sway too much away from the convention. Many websites are adopting thick colourful underlining of texts that resembles that of a highlighted text, as a cue for links without changing the colour of the font. This formatting indeed looks good, but confuses the link for something emphasised; because in many languages—both written and spoken—underlining denotes an emphasis. The traditional display of links uses underlining too, however the colour of the font is changed to blue, thus giving enough visual cue to be a link.

There is an open secret about designs. The very goal of good design is to create such levels of immersion with the product, that users don't notice the good design at all while using it. Good designs are only noticeable when bad designs are contrasted—when you migrate from bad design to a good one, in which case good design is slightly noticeable; or when you migrate from a good design to a bad one, in which case the good design is evidently noticeable.

The reason for the difference in the degree of noticeability is the fact that you are already used to a particular design before the migration. So both migrations will confuse you; only that the degree of confusion will be varying. When you migrate from a bad design to a good one, there is confusion but it is soon eliminated because you figure out the design and then get immersed in the effortlessness of the good design; thus making good designs less noticeable. Whereas, when you migration from a good design to a bad one, there is indeed a confusion, which alleviates as you gradually figure out the design. But the effortful use of the bad design will remind you always of the old good design; thus making the good design more noticeable.

These are my ways of designing a website. Small websites can comply with these guidelines perfectly. However, larger websites and web apps that performs a lot of functions may not. And so pragmatism should be exercised.

  1. not to be confused of less number of code, which is in fact a good sign of maintenance. 

  2. including software development 

  3. I have scaled this principle to an extreme form on this page, where I want users to only read; or leave. And so the design of this page is optimised for that purpose with just the content to read and a back button to leave the page.