10 Things I Wish I Knew Before Starting Web Development

Visualwebz
12 min readJun 6, 2023

--

A valuable and instructional guide to starting a career in web development

As with any endeavor, being able to apply previously learned personal experiences is something we wish we could all do. Still, sometimes we can learn from others’ experiences and use those in our own. We wish we had known many of these when starting, but looking back (and forward), we are happy to share our experiences with you. In the Top 10 Things You Should Know Before Starting Web Development (or The Hitchhiker’s Guide to Web Development), we will share our experiences to help walk you through some tips and tricks before starting in Web Development.

https://seattlewebsitedesign.medium.com/a-seattle-web-designer-6b3689faf8ad

1. The History of HTML

With the history of HTML, as a total beginner who knew nothing to start with, I am glad to see that I can now identify that Tim Berners-Lee was one of the “founding fathers” of the internet, along with a group of about three others. Starting in 1980, the start of HTML was conceived by Tim when he was a contractor with a company named CERN. In collaboration with a co-worker named Robert Cailliau, Tim and Robert tried to acquire funding for their idea, though CERN did not officially support the idea. HTML’s early public conception was called “HTML tags”, found in a document on the internet later in 1991. Tables HTML is based on a concept CERN used called SGML, or Standard Generalized Markup Language. A couple of years later, as HTML evolved, a task force known as the Internet Engineering Task Force, or IETF, HTML, was formally defined as an application of SGML. With this, a person by the name of Dave Raggett, who had a similar type of format called HTML+, or Hypertext Markup Format, had come up with a design that would uniformly standardize features already included in HTML, such as tables and fill-out forms. In 1994, a group called the HTML Working Group was formed, and a year later, in 1995, the group finished HTML 2.0, the “standard” for the basis of future HTML implementations. Over the years, HTML implementation, use, and standards have been maintained, with HTML becoming an international standard in 2000. 1999–2001, HTML 4.0 was released, with the development of HTML5 in 2004, which was finished and standardized on October 28th, 2014.

2. The Science Behind a Good-Looking Web Design

As a first step to beautiful web design, one should know and understand wireframing, the first step in web design. In addition, looking at the future and what your website wants to do to help your intended goal or purpose will help. Expanding beyond your own needs to the needs of the users of your site is essential, which can include things such as aesthetics, usability, and not too overly done. As a tip, if you are starting on website design, a “style guide” can be very helpful, as it will help you better understand how to create your website layout based on how visitors will interact with it. The next step is the most important when finding a domain and host for your website. Getting hosting while you start building your site is a good idea. When deciding on a hosting company, opt for one that prioritizes customer service. In addition, monthly billing is also good to get to keep your website up and running. After deciding on hosting, an excellent next step is determining which Content Management System (CMS) you will need for your website. For example, using WordPress as opposed to other CMSs can be beneficial.

3. How to Know Which Content Will Go Well with Your Web Design

When it comes to knowing what content goes well with your web design, the main thing to know is Search Engine Optimization (SEO), which helps with being found on the web and search engines more efficiently, ensuring your content is optimized. Hence, it rates higher on Search Engine Results Pages (SERPs), which helps your web page show up in the top listed results when a search is conducted, and knowing which keywords help with SEO and SERP. By focusing on these three main areas, your website can draw in more traffic and visitors from around the web by being listed higher, keeping your website in a high ranking for the competition.

4. How to Mix Web Design Aesthetics with Content

When looking at how to mix web design aesthetics with content may seem tricky at first, but it all comes down to knowing who your target audience will be and understanding what is aesthetically pleasing to them. The different aesthetics are divided into nine items: Color, Images, Content, Navigation, Alignment, Consistency, Layout and White Space, Typography, and User Flow. If an audience you are looking to target is interested in flashy colors, such as kids or the younger adult population, the color would be an excellent aesthetic choice to focus on. If you want to target an audience interested in reading words or text, written content is a better choice to attract visitors. Generally, using a mix when selling a product or service is good. Color, Images, and some mixed Content are advisable for a business website. If you are creating a website to entertain, focus on which target audience you want to present your content to.

5. The Why of Website Design

Regarding the “Why” of why web design is essential, eight reasons break it down. The first reason is being able to create a website design that can enhance and improve your SEO, which comes down to how your website design interacts with a search engine. Suppose your web design is clean, well done, and utilizes content throughout. In that case, it will significantly impact your SEO, allowing visitors to find your site more easily without digging too deep to see what they seek. The second reason is based on impression. If your website is not user-friendly when attracting visitors, such as having information that is not current or is slow and clunky, the impression you could leave on your visitors may not be a good one. If your website content is recent, easy to interact with, and feels warm and inviting, the impression you may leave on your visitors could be excellent. The third reason is branding. To ensure your company website has good branding, a big thing to focus on is making sure your website looks professional and does not give off a “one size fits all” feeling.

The fourth reason is staying competitive. To help your website stand out and attract more visitors to help your business stay competitive, brand identity and high-quality web design can help with SEO, enforce your company’s image, and strengthen the trust you gain with your visitors. The fifth reason is getting your website to turn visitors into customers through conversions. Increasing conversions can be achieved through a professional web design, providing visitors with a higher quality experience and a friendlier user interface. One example of improving your user-friendly interface can be accessed, such as expanding your website. Hence, it is accessible on mobile devices as well, which in turn, can reach more visitors to help your website conversion rate. The sixth way is based on usability and ties back into the user interface. If your website lags, buffers, is just slow overall, difficult to understand or make sense of, or has too much going on, it could be more of a deterrent for visitors because the usability of your website has been diminished due to any of these factors. An excellent way to help improve these issues is to have a professional layout with attractive colors that work well together, elements of styling, and buttons that allow visitors to navigate your site easily. The seventh way is to have consistent branding. Branding consistent across the board, including with your offline and online content, will help keep your branding and overall message efficient, help your visitors understand your main message or theme, and present your visitors professionally. Website design is essential and helps improve general visitor and customer satisfaction. The more time you take and put into designing your website, the more the design of your website reflects the care and compassion you have for those visiting your site.

6. The Basics of Knowing Which Colors Flow or Clash with Your Web Design Content

When it comes to selecting the right color(s) for your website, one of the main things that can help is basing the colors you are going to use on the colors you are using in your logo. Although many steps go into choosing and using colors, it can be broken down into two main areas. The first area covers the central part of understanding colors and what they can do for your website, brand, and overall memorable image for the website, which is called Color Psychology and Brand Recognition. Color Psychology helps link great colors (and shapes) to branding that can help spark a connection when someone sees the particular color and relates it to your product brand. The other is called Color Theory. Color Theory focuses on a Color Wheel and the interaction of colors based on where they are on the wheel that can be used in a design. Under these two main areas, four sections focus on colors. The first is tinting and shading, which can fall under the Color Theory portion due to how tinting and shading affect different aspects of how base colors interact with darker colors within a color wheel. The second is known as the 60–30–10 rule, which can also fall under the Color Theory, which involves using 60% of a primary or dominant color, 30% of a secondary color, and 10% of an accent color. Although this is recommended, it is not required, though it can also fit in the aspect of the color wheel to help determine which colors are appropriate. The third is contrast, which can fall under either Color Psychology or Color Theory.

Contrast can be utilized on the color wheel and is an effective tool in making your brand recognizable and memorable. The last is Working with Images. This can be found mainly in Color Psychology. Using images appropriately can spark the connection between your brand and the colors in your photos, helping your visitors recognize that this is your brand.

7. Knowing How to Create a User-Friendly Interface to Navigate Your Website

In creating a user-friendly interface to help navigate your website, you should keep ten main things in mind. The first is to reduce surprises for your visitors by having your website act as a predictable guide, focusing your navigation menu so it directs visitors to the pages they seek, and reducing overall website navigation confusion. The second is to keep your website layout and navigation menu simple. By keeping your navigation menu straightforward, predictability will fall hand in hand with simplicity, giving visitors a more user-friendly experience. The third is not to underdo the information or layout on your website. This can happen when trying to create a website, but the content you want to include needs to be longer or longer, leading to your visitors needing help finding what they are seeking or needing help accessing your website quickly. The fourth is based on consistency. With consistency across all your websites being uniform, navigation can be a breeze for your visitors, which can significantly improve their user interface experience. The fifth is having a hierarchical navigation structure that is clear and easy to use. Suppose the navigation structure is laid out and placed into searchable and sub-categories. In that case, it will reduce the frustration for your visitors of having to switch to a different page when looking for another product on your site.

8. Knowing How to Link Multiple Pages to Your Home Page Efficiently

The best way to link another page to any other page, mainly your home page, to another internal connecting page is to use an anchoring property. This can be done using the tag <a>, which allows the coding to see that it is an anchor to the connecting site. When coding, the proper complete tag to anchor a connecting page should be <a href= “website.html”> Company Info. <a/> This tag allows the anchor of one site to another, which helps navigate through the connecting anchor link to the other site.

9. Listing Core Information and Other Content that will be Relevant to Your Viewers

When it comes to knowing what information or content to include on your website that will be relevant to your viewers, there are eight items to know when looking to identify that content. The first item is identifying your best-performing content. If your content performs well, this may be one of the best ways to help gauge which content is best for your website. If you are unsure or are using unfamiliar content, analyzing which types of content draw in the most visitors can be another way to go. The second item is to recycle content you find has worked before, specifically by taking the content in one format, such as audio from a video, and reposting it in the new format while keeping the original message. The third item is having your content interact with your audience. This can include polls, reviewing and responding to comments your audience has made in response to content you have posted, email or communication surveys, or “suggestion box tips”. The fourth item is using and utilizing analytical tools, which analyze data that has been collected. Some of these include Facebook or Instagram Insights or Google Analytics. With the analysis of collected data, these tools can help you know your audience and what content is appealing to them. The fifth item is understanding and identifying your audience’s persona. In other words, knowing your audience’s electronic profile. Understanding this insight can help you determine which direction to go when designing, updating, and creating content for your website. The sixth item is using social media and its multiple platforms to analyze user data. This can give you a deeper insight than regular analytics due to social media’s broader outreach to those who use it. Depending on your social media tool, some can give you more specifics or other information, such as Google Trends or WhatsTrending. The seventh item is using competitive comparisons. This means observing and studying your competitors and applying your observations of what works well for them to you and your visitors while adjusting these successes. Hence, they work well for your business. The eighth and final item is to experiment to see what works well when figuring out what information or content to include on your website. This includes using content you have used before, weeding out less popular content, and adding additional content that appeals to your audience.

10. Knowing How to Troubleshoot Issues and Find Ways to Improve Your Web Design Over Time

With troubleshooting and website design improvement for future performance, seven steps can be taken to help troubleshoot a website’s issues while helping improve the overall performance of your website in the short and long term. Step one is identifying DNS and network connectivity issues. These issues can lead to problems for people visiting your site, including 404 and pathway errors. Step two is identifying server speed to help improve load time. One way to do this is to find out if the servers your website is on are hosted under a shared account; in this case, it could mean your website has to compete for speed that hundreds to thousands of websites also have to share. If so, you can request a dedicated server for your website, though it will probably cost more if you do this. Step three is ensuring your code is up to date. Regarding website coding, several issues that could arise and be fixed could include inefficient code, memory leaks, or synchronization issues. It could also have such problems as ineffectual algorithms, web app degradation, or outdated software versions that can affect your website’s performance. The fixes to these could be as simple as keeping your website coding up to date, including using optimal coding practices. Step number four is being able to deal with load balancing. With this issue, a visitor not assigned correctly to a server when visiting your website can cause it to slow the response time from the server, even when the server is not at maximum capacity, and more so if the server is experiencing too many requests. A good fix is to spread the load among various servers instead of a single server assigned to handle the heavy lifting. Step five is preparing your website for traffic spikes. If your website experiences a high volume of traffic at a particular time, either time of day or due to an event, this could cause your servers to slow down. Although it may not cause damage to your servers or website, it could cause damage to your brand and impression of your company. A quick fix to this is to implement simulated user monitoring systems that can alert you before a website traffic rush, allowing you to adjust your operations and make the changes needed to help address the negative impact that could happen without the system monitoring. Step six is the usage of HTML title tags and specificity. This can cause your website to show up less in searches and be less visible to those trying to find it due to specificity lacking in your domain name, or you could use the same title throughout your website. One way to help fix this issue is by manually going through your site tags and making sure all the information is there, not duplicated, or using a program to check and double-check the information used in your website to ensure that the tags and other information are complete and highly optimized. The seventh and final step is utilizing bandwidth to get the best optimization and usage, and so can your visitors. With this issue, it can seem like your local network may run fine regarding bandwidth. Still, when it comes to visitors or users from an external source, bandwidth becomes an issue due to the bottleneck when a visitor or user tries to access your website. The other high-volume data is using up all the available data to operate. A way to help improve bandwidth speed could be to use as little data as possible through minification, optimization, and compression of as many codes and applications as possible.

--

--

Visualwebz
Visualwebz

Written by Visualwebz

A Seattle web design and online marketing agency that delivers high-end websites. A passion for web development and SEO.

No responses yet