How I work
Hi, I am Jason, the owner of The WebDev.
This page gives you an idea of how I work and what sets me apart. Warning though: it is very "techy"!
I will write it in a way so that non-tech people can also understand the basic idea.
If you're an agency who is considering hiring me, this will be very interesting to you.
Read below to see examples and reasoning behind 4 principles behind how I develop.
Clean Code
The biggest mirage in all of web development is that a good looking website is the same as a good website. Clearly, we want good looking websites – but that doesn’t need to be at the expense of a well built one.
A common problem with many page builders is that they create an exhorbant amount of unnecessary code (often in the form of “divs” – or, in other words, boxes for website content). I use a page builder (called Bricks Builder), so I am not against page builders. But the amount of unnecessary code that 99% of them generate is objectively unnecessary and bad for the website’s performance.
Let’s take a look at this Navigation Bar in the header of https://ulah.es/en/. (Click on the images to make them larger)
ULAH Header
Looks very clean, modern and inviting. I like the design.
Header Code
Look at all of these divs between the header and the element we see. When looking closer, one can see that some of them are not needed. This can hurt performance.
Another Way
There are 3 fewer divs used here. When clean code is used throughout the website, these differences can make a large difference. (Also note the use of the header element, rather than the use of attribute).
Accessibility
Accessibility in a challenging topic. Especially accessibility in the online world. There are ever increasing standards and most people do not think in these terms when building websites.
And yet, it is important. If it isn’t innately important for someone, then it should at least be important because of the thousands of lawsuits that happen as a result of websites not meeting accessibility standards.
I genuinely do not fault anyone for not having a complete understanding of online accessibility and how to build accordingly (I doubt there are few out there who have a true grasp in this area). It is, though, important to be constantly learning and improving.
Link open in new tab
This is a beautiful looking link that rightfully opens in a new tab, to keep users from completely leaving the main page.
No aria-label
this target="_blank" tells the browser to open the link in a new tab. When this happens, screenreaders need to be notfied about it. There are no attributes here to notify them.
Another Way
Here you can see some extra code written next to the link that is called an "aria-label." That immediately makes this accessible (this is the link found in the section above about clean code).
Maintainability
One might build an incredibly beautiful website, but if it becomes complicated to maintain, it will soon look old and incongruent with your brand.
When most people build a website, they make it look really good. Many of them are even quite impressive! But what usually happens is they style each element on the page individually. That makes it challenging and expensive to make small changes to the color scheme, font styles, how the pictures show up and much more. The sites are built this way because they are
- faster to build
- developers don’t know any other way
But there is another way. It does take a little bit more time to build. It is therefore more expensive to build the site – but maintaining the site is much faster and, therefore, signficantly less expensive.
Color Scheme
Ulah has created a site that has an intriguing and appealing mix between orange, black and grey colors.
Color variable
Here is a global variable used for color. This is already better than what most do. But when someone wants to change the color in this variable, who is going to remember "cd6b244" and that this is associated with the heading color?
Another Way
Use a naming convention for variables that is methodical and easy to remember and organize. This allows for faster maintainance and updates with much less headache (and lower cost to the client).
Proper HTML
A lot of developers do not use proper html. They simply use html tags for any use. Many also use HTML to style their text, rather than CSS.
For example, one may like the want to make their text snippet to look very big and bold. Instead of using proper CSS to do this, they click on a Heading 1 button in their page builder or they use the HTML tag of <h1>. That messes up their code and has a huge impact on what Google can understand.
There is also the topic of Semantic HTML, where the HTML tells Google or other machines what kind of content will be within that code snippet (like if there will be an image, an article, header, footer, navigation menu, etc). This is the new standard, but few people have embraced it.
All of this make a very big difference in both the subconcious experience for the website visitor as well as how search engines process the information and ultimately rank it in search rankings.
Never underestimate the importance of proper HTML code.
Page title
This is a great looking page title. It is well styled, fits with the overall feel of the page and it gives the reader the sense that the website is owned by someone who knows what they are doing.
HTML Tag
The heading above is the title of the page and should therefore get an h1 tag. This title is like the title of a book; and that title should always be the h1 tag. The h2 tags are reserved for the chapter titles.
Another Way
The title on the page you are looking at now uses an h1 tag at the top. Imagine Google needs to know what a book is before it can start looking at what each of the chapters are. Tip: ensure your heading tags are always in the proper order.
Conclusion
Bringing it all together
These are just a few of hundreds of items that are thought about when working with a professional developer. I agree, some of them are small and seemingly unimportant. But remember, a lot of small elements put together create big results.
If you want to see what we can do with your project(s), just let us know.
