Nov 17, 2021. Updated: Jul 15, 2022.

Building Good Websites

There is an open secret about designs. The very goal of good design is to create such deep immersion with the product that users don't notice the good design at all while using it. Such good designs are only noticeable when bad designs are contrasted with: 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).

When you migrate from a bad design to a good one, you will get immersed in the effortlessness of the good design after figuring it out, thus making good designs less noticeable. Whereas, when you migration from a good design to a bad one, the effortful use after figuring out the new design will always remind you of the old good design; thus making the good design more noticeable.

The following are some of my tenets on website/webapps design — some of which are also applicable to system software or apps.

Designers and developers often conflict over their opinions on the final product. A product is the designer's vision, not the developer's; and it must be developed to the designers' vision. If the designer and the developer are the same individual, the developer's ego must build the product to the designer's ego, even if it is effortful.

In haste of hitting the market first and fast, do not offer a laggy, bloated, layered and resource intensive product to consumers. While it is possible to build a product with bad design, hit the market first, and then design better, you risk losing your reputation in the process. Reputation has more time value: rebuilding reputation will cost you more time than what would have actually taken to release a properly developed website.

Websites are interfaces for users to do a task. Therefore each web page must serve a purpose and must be designed for that purpose, such that users do it easily, quickly¹ and in the most pleasing manner; easily because people don't like to be in a state of confusion; quickly because even a second is too valuable to be wasted figuring out how to use a feature 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 makes us like that thing. To achieve this, every element involved in the using of the website such as the Internet speed, devices, platforms, screens, users' sense organs and even their common sense, must be factored in for its design.

Websites must be designed to run seamlessly with the slowest Internet speed that your target audience will come across in order to ensure usability. People still use low-bandwidth Internet. In fact all prepaid 4G users in India are potential low bandwidth Internet users because their plans have a daily 4G speed quota, after which their speed is throttled. It's not how many people will exhaust their quota and experience the throttled speed, but how many people can experience that; and the answer is — almost all of them since most apps are designed for addicted use and their Internet plans have a quota. Can overpowers will. Will overpowers can only when the cost is extremely high. And the cost of designing and developing a website that works well in low bandwidth is not high at all.

Designing for low bandwidth also motivates developers to develop light weight web pages. The fact is, barring the consumption of media files, most of what we actually do on the Internet does not require high bandwidth, but only few kilobytes of data per second. Ironically, many websites are designed such that some bloat is exchanged each time a page is navigated, and therefore they do not work with low Internet bandwidth.

Web pages must be responsive to different screens and built using breakpoints that are specific to the elements on the page. Different screens can be either different resolutions and different physical sizes too. However, only the resolution of the screen is factored in for responsive web designs currently. This makes a 1rem font looks smaller in a 12 inch 768p screen than in a 15.5 inch 768p screen. Therefore, screen PPIs (pixels per inch) must be factored in too to help designers bring optimum legibility to all screen sizes. CSS currently does not support this though.

Websites must be designed to work with all devices and platforms in use, irrespective of the number of users using them. Often product managers compromise certain devices and platforms (mostly old or sparingly used devices) in order to save the inconvenience of development, time and cost. While this can be a great tactic in the product strategy, such compromises aren't ideal from a design perspective. A designer should be flexible enough to design for all active platforms instead of being rigid and dictating users what platforms or devices to use.

With powerful client side devices, it is understandable to transfer some of the computation to client side browsers. Certain websites may even demand client side validation for better architectural design. But this must be done with prudence without affecting performance and usability. And if users have turned off client side computation (such as blocking scripts), there must be a fall back to process that computation in the server, or at least ask the user to allow the computation.

In the interest of usability and performance, websites must be designed to use and be compliant with the web's fundamental layer — HTML and CSS. Only features that cannot be implemented with HTML and CSS must be implemented with other technologies such as JavaScript. JavaScript is an additional computational layer to the browser, thus slowing the rendering compared to pure HTML and CSS; and being a redundant layer if the outcome can be achieved through HTML and CSS.

I vehemently disagree with the popular saying that anything that can be written in JavaScript (in the front end), will eventually be written in JavaScript. This has led to a design culture of rendering even the basic features such as the website's navigation menus using JavaScript with no fall back, which has made such websites completely useless in JavaScript disabled browsers. Instead, the saying 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, is a much more agreeable saying.

Design has the elements of functionality and aesthetics. The former is the degree of usability and the latter is mostly proportions, colours and textures. Functionality and aesthetics must go together. But if it cannot be achieved, function over form must be chosen over form over function. The biggest disservice a website designer can commit to users is the beautification of the website at the expense of functionality. One of the biggest setbacks in the field of user experience is that designers approach a project through the eyes of graphic designing rather than psychology, aesthetics and functionality. Design is all about enabling the user to perform the task in the simplest, least confusing and the most sensorily pleasant manner.

Never use dark patterns. Design wise, they suck. Functionality wise, they serve a purpose and in most cases they achieve it too. But they make users mad. Dark pattern is not the ideal method to achieve the intended goal.

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

Never use colours or colour combinations that strain human eyes; unless you actually intent that. If you are not a colour expert to incorporate a colour combination, stick to the commonly accepted colour combinations such as complementary, triadic, tetradic and analogous combinations.

Understand the convenience of human eyes, neck and hands — they do not like to work much. So design websites for effortless use. Understand the nature of human eye and neck movements. For reading, the movements are vertical in nature. Left aligned text in a narrow column centred on the screen with dark font on light background is a blessing to the eyes and neck. The colour scheme can be inverted for darker environments. Use legible and comfortable fonts whether serif, sans serif or monotype. Designing legible font size for all screen resolutions will be an issue until PPI is accounted while calculating the responsiveness of the design; but until then, consider high PPI screens while designing.

The information requested should load fast, above the fold and without any beating around the bush. One of the common mistakes while designing for wide screens is the irresponsibly fixed positioning of thick elements in the screen, such as a thick header bar that almost takes up 20-40% of the vertical screen real estate. After factoring margins and paddings, this leaves only about half the screen real estate for content. This is a design blunder both aesthetically and functionally. While designing for wide screens and low or scaled resolutions, responsible vertical space utilisation is a must.

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

Do not design web pages that scrolls an entire fold in a single mouse scroll. Such designs interrupt the user experience as users are used to the normal way of scrolling. Only few web design concepts are worth compromising this muscle memory.

It is best to leave the experience of URLs or links to the default convention because visitors are used to it. If you are forced to modify the experience, do not sway too much from the convention. Many websites are underlining links using thick colourful lines and various font colours. 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 convention for links should be thin underlining and a font colour of blue variant.

Every design decision is a trade off, usually between cost, developer experience and user experience. This isn't a case about which among them is important, but rather which among them is indispensable to the sustainability of the project. And the answer is that all of them are. It is a good thing that cost and experience is not a binary metric but rather a spectrum. It allows you to find a sweet spot between the three. A good website is one that has made these design compromises wisely.