Web Development - and why simple sites are better

Web Development has been a vital part of any company's job description for a long time now. Any product, service, or business needs to have a website to 'make it big' in this world of technology. But do we really need over-engineered, slow, and messy websites? Usually messy code is a result of people copying templates or other websites blindly without properly separating parts of the code to other files. Just because that one XYZ site uses stupid nesting of divs and a thousand class names, doesn't make it cool or easy to work with.

Code like these are pretty easy to find nowadays, when no one learns to develop websites from scratch and blindly copies templates into their own project. In this picture below, the information given is 7-10 words, but the crazy nesting takes up rest of the page.

Not only is this incredibly hard to maintain and modify, its slower to load as well. Thoughtful structuring of HTML and naming of classes go a long way in saving the time of the programmers you are collaborating with and the users who have to load your 1MB webpage.

A great demonstration of just how much bloated the modern web is, and how simple it is not to bloat your page: A Demonstration of Modern Web Bloat - Luke Smith

Does it need XYZ?

No, your webpage doesn't need to have special animated sidebars and different background colors on different paragraphs. No, it doesn't need to be connected to XYZ API to get JKL information. No, it doesn't need tabs, navbars, breadcrumbs, and a million asset files. A web page needs to be simple to use, and understand. It needs to provide the information it wants to convey in a presentable manner and let the users perform the needed actions in the least intrusive way possible.

I am not saying that your page should look like https://www.stroustrup.com/, just dont bloat your page with unnecessary cosmetics or mind-boggling nested divs. Just keep it simple, separate your HTML, CSS, and script into separate files.

Using frameworks like React.js is also a good idea, as they let you structure your code even more and provide you with tools to make boilerplate stuff much more easily and less redundantly. 

Who's guilty?

Schools and colleges are also the culprit here. The institutions teach old outdated technologies like PHP which no one should use and dont teach the new additions to the pre-existing tools like HTML5 or CSS3 features. We are not taught how to use cool CSS layouts like flexbox, and JS frameworks like Angular, React, and Vue. Or how to create and manage an actual project, rather than just a few web pages. So the students turn to pre-made templates which are riddled with bad coding practices, but look good. As messy code is directly handed to them, they take complex page structures with a million different pieces moving and interacting and responding to media queries for granted, and prefer them over simple and elegant codebases. Templates are just that, templates. They are not meant to be a fully managed project, so the developers dont care to make it legible or use good conventions. So students should be taught how to make things by themselves and maintain actual projects, to teach them how most of the times, keeping it simple is better. 

Responsiveness

The internet is viewed on mobile phones 48% of the time. The remaining doesn't go to desktops totally, but is split between tablets, desktops, and TVs. So it makes sense that the most frequently used web-viewing devices should be kept in mind first while making a website. Unfortunately, this is not the case for amateur developers. As web developing is done almost 100% of the time on a desktop, the developer is used to viewing sites in a wide aspect ratio, and thus makes their site with that in mind. After they have made their eye-bleach with a million different pieces all interconnected and interacting with each other, they suddenly realise that the page needs to be responsive as well. And then the page becomes 2x as big. Thousands of new lines of CSS are written to patch up the website and make it mobile friendly, or even worse, a reactive (totally new site just for mobile) version is written. All this makes the project hard to maintain, debug, and load for people with slower internet. 

This wasted time and effort can easily be saved by simply building your page for mobile-first. A mobile friendly site is far-far more easy to scale up to be desktop-friendly than the other way around, and requires addition of less lines of code, as you are aware of the scalability from the beginning, the initial codebase is not written poorly. For most of the simple pages (which you should make more of) almost no extra work is needed to make a mobile friendly page desktop friendly. With a proper modern layout or smart center aligning and margining of elements, almost everything just works out in desktop mode as well. Even my own website is made this way and looks just as well in desktop mode as in mobile.

How to get started?

1. Just start with a small project.

Don't aim too big, or the burden will spoil your appetite to learn. Think of a cool tool or project that you want to make, even if it already exists, make it yourself.

2. Make it ugly, Make it Work

Make the bare minimum for the thing to work. Remember, you are not making a page to look pretty, you are making it to solve some problem. Just add all the elements needed, the content, and the scripting if required. Add minimum styling and CSS. Don't worry about responsiveness, just make it easy to alter later. 

Tip: never use absolute values of pixels for positioning stuff in CSS. margins etc are fine, but if you are positioning every element with CSS, you are doing it wrong. Let the core HTML structure dictate the order of elements, and do basic positioning with CSS. Try to style elements with respect to the width of the page being a variant.

3. Don't use templates, don't even look at them

Templates and things like website builders would taint your creativity forever, making you feel the more razmataz a page has, the better it is. Remember - keep it simple (KISS).

Build your page from ground up, however tiring it be. This teaches you how things actually work and how small changes have their impact on the page. Making a simple page on your own will teach you more than making a complicated 10 page project from templates.

4. Google is your friend

Don't hesitate to look stuff up. Don't look up how do I build my project, look up how do I do this particular thing. Although the previous point says no templates, this doesn't mean you can't use other's code at all. If you are stuck and can't figure out how to center that one div inside that other div, or something like that, Google it. There's no shame in copying a example from w3schools, but you need to understand the solution and how it works first, so that the next time you need to do that one thing, you know what to do (or where to search).

5. Build in versions

This point piggybacks on point 2. Your site doesn't need to be absolutely perfect the first time around. That is not how webpages are made anyway. In the first version, just make it work, and add minimal styling needed. In the next iteration style it appropriately. Fix bugs and edge cases in the next one, and so on. Building the thing perfectly in the first try is an impossible task, and something no one is expecting from you. All industrial projects work the same way as well, just make it work and fix small problems in the next iteration. This also helps you stay sane and gives you immediate feedback on how much work you have put in. If you spend the entire weekend on just making the navbar look and feel just right, then you will soon lose the interest to make the rest of the page, thinking that if such a small part took you so long, the entire page will take ages.

Improving on an already built product is also easier than trying to get everything right from the first.

6. Get Help

Ask your friends, family, and anyone who's opinion you respect about your progress and how the site looks/feels. Take the constructive criticism as advices and improve on the things accordingly. After working with one thing for a long time, we get biased and everything feels perfect one way. A fresh pair of eyes helps get out of this.

7. Make for fun

Finally, remember that you are just making this for fun, or to solve that one problem you always wanted a tool to solve. It doesn't need to be perfect or have hundred other features. The main goal is to learn and acquire experience of building stuff.

---

Sayan
Feb 18, 2021