Things You Should Know About Web Development as a Business Owner

Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

• Web: It refers to websites, web pages or anything that works over the internet.
• Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

• Frontend Development
• Backend Development

How websites work

Technology is constantly advancing, but the operation of a website still follows the basic process as follows:

1. Users access the browser, and the browser's task is to analyze and render CSS and HTML into content, formatting them into what we commonly see as a Web Page.
2. Execution of JavaScript code to create various functions, including modifying the website's structure.
3. The browser sends requests to the server to retrieve the rendered web page. At that point, the server automatically searches for the content and sends it back to the browser.
4. Upon receiving the response, the browser analyzes and executes the content to display it on the web page for users to see.

Frontend Development

The part of a website where the user interacts directly is termed as front end. It is also referred to as the ‘client side’ of the application.

• HTML: HTML stands for Hypertext Markup Language. It is used to design the front end portion of web pages using markup language. It acts as a skeleton for a website since it is used to make the structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. It is used to style our website.
• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website.
• Jquery: jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.

Backend Development

Backend is the server side of a website. It is part of the website that users cannot see and interact with. It is the portion of software that does not come in direct contact with the users. It is used to store and arrange data.

• PHP: PHP is a server-side scripting language designed specifically for web development.
• Java: Java is one of the most popular and widely used programming languages. It is highly scalable.
• Python: Python is a programming language that lets you work quickly and integrate systems more efficiently.
• Node.js: Node.js is an open source and cross-platform runtime environment for executing JavaScript code outside a browser.

No Code Web Development

In the recent years, no-code web development has taken the market by storm. Platforms such as Wix, Squarespace, Editor X, Framer, and Webflow are all no-code platforms. They reduce development time, cost, and allow you to publish your new website in no time. Plus, they are super easy to use without the need of the developer after hand over.

That said, most businesses require custom built websites using these no-code platforms. This is where Webflow shines. Most people would say Webflow is a no-code platform, which it is for simple site, we'd say it is a low code platform and can be more advanced depending on what you want to build.

With no-code, the backend will be managed by the third-party company (Editor X, Webflow themselves). This means you would only need to find a front-end developer to develop your custom website design. For most small businesses, the backend isn't something they care too much about as long as the site performance, CMS performance, security, server up time is all taken care of by these third-party companies (which they are doing a very good job at).

Regardless of being no-code, it is important that you know some of these terminologies, which can greatly help your communication with the front-end developer to get everything resolved swiftly.

Web Development Terminology (Simplified)

1. Layout/Structure: A website layout is the arrangement of all visual elements on a webpage. The most common layout includes header, body, and footer.
2. Hero section: The very first section that you see on a webpage. Each webpage will have 1 hero section.
3. Header menu: The navigation bar at the top of the page to help users navigate between pages within a website.
4. Footer menu: The footer is located at the bottom of every website. You can add other secondary links that are not added to the header. The best practice is to always have a footer for better user experience, and for the search engine.
5. Hamburger menu: This is a responsive version of the header menu for mobile devices. On desktop, it is a long bar that spans across the website. On mobile, the menu needs to adapt to the vertical form factor of the phone. The best hamburger menu is usually full screen when it opens.
6. Breakpoints (Media Queries): A point at which the content of a web page changes its layout, usually to accommodate a different screen size. The top 4 most common breakpoints are desktop (991+px), tablet (767 - 991px), mobile landscape (478 - 767px), mobile portrait (320-478px). Most common smartphone screen size is around 420px.
7. Fluid Typography: A responsive typography technique where the text scales automatically with the screen size. As the screen size increases, the typographic values such as font size, line height, and letter spacing increase, and vice versa.
8. Navigation: There are 3 types of navigation - global, hierarchical, and local. Global navigation refers to the header and footer menu as they are presented on all pages throughout the site. Hierarchical navigation refers to the sub menu or anchor menu within a page usually used for blog (table of content). Lastly, local navigation refers to the internal linking of your site, from one page to another (usually within the content to encourage users to read more and stay longer on your website).
9. Forms: A website form that a person can use to send information to the business or individual who runs that website. Forms can appear on the Contact page, footer or within a popup anywhere on the site for users to contact or subscribe.
10. Responsive Images: This means the images can stretch to fill out a designated area or retain its aspect ratio without getting distorted.
11. Accessibility: a11y or Accessibility, the concept of whether a product or service can be used by everyone (color blind, screen readers, font sizes, etc)
12. SEO: The process of taking steps to help a website or piece of content rank higher on search engines like Google, Microsoft Bing, and others.
13. Cross-browser compatibility: Ensures that a website or web app looks and works seamlessly and consistently on every browser.
14. Web hosting: a service that makes the website accessible to the public. Most website building platforms offer a premium web hosting plan that you need to purchase before you can connect your custom domain name.
15. Domain hosting: Domain hosting is a service that hosts and manages domain names. A domain name itself is the address of your website. Users type a website’s domain name in the address bar of their web browser to visit that site
16. Video hosting: A digital service that includes uploading and storing videos on a third-party platform. These platforms, also known as video-sharing websites, keep the videos on their servers secure and enable easy distribution to your desired audience including Youtube, Vimeo, Wistia, and more.
17. Website Speed: Website speed is how fast a website loads for users, based on an average of multiple page speeds. Website speed affects the ranking, traffic, and conversion rate of a website.
18. Google Analytics: A platform that collects data from your websites and apps to create reports that provide insights into your business. With sufficient data, you can make informed decision that positively affect your business.
19. Google Search Console: A free tool from Google that helps you understand how Google crawls, indexes, and serves websites
20. Call-to-Action (CTA): CTA is a prompt that tells the website audience to take a specific action. It can be a command or action phrase, such as “Sign Up” or “Buy Now” and takes the form of a button or hyperlink. CTAs can be used for sales, sharing content, signing up to databases, or exploring related content.
21. Mobile optimization: The process of making a website user-friendly when accessed by mobile devices. This creates a user experience tailored to a specific device type.
22. Parallax scrolling: A technique that creates an illusion of depth in a 2D scene by making background images move slower than foreground images. Using it correctly can create an interesting effect that would keep your users scrolling.
23. Scroll-based animation/interaction: Scroll-based animations are a common UX pattern on the web. They are initiated by scrolling and linked to the mouse wheel scroll position of a scroll container.
24. Time-based animation/interaction: A time-based web animation is an animation on a web page that is controlled by the duration of time it takes to complete one cycle.
25. Debug: Also known as bug fix. Debugging is the process of finding and fixing errors or bugs in the source code of any software¹. When it comes to web development, debugging refers to the process of finding and resolving errors in the code of a website or web application.
26. SVG (Scalable Vector Graphics): A standard graphics file type used for rendering two-dimensional images on the internet. SVG is great format for icons and logos since the images can scale up or down without losing quality.
27. Image Optimization: Image optimization for the web is the process of providing high-quality images in the right format, dimension, size, and resolution while keeping their size as small as possible. This can be done by resizing, caching, or compressing the images. Image optimization helps to improve user engagement, web performance, and SEO rankings.
28. Website maintenance: The process of keeping a website up-to-date and running smoothly as well as performing optimally. Website maintenance involves regularly checking your website for issues and mistakes and fixing them.
29. Website backups: A website backup is a copy of all your data, files, and databases that prevents data loss if your site breaks down. Most website builders include automatic website backups on a regular basis so you can always go back if something is broken during your edit.
30. First Contentful Paint: is a performance metric that measures the time it takes for a browser to render the first content (text or image) on a page. This is an important metric because it indicates to users that the page is loading and gives them some visual feedback. FCP evaluates how users experience a website’s page load speed by measuring what people actually perceive, rather than the results of a speed test tool.
31. Preloader: A preloader is a visual element that appears on a web page while its content is being loaded or data is being processed by the server. Typically, it consists of an animated graphic that represents the loading progress and helps to keep visitors engaged and entertained. The goal of a preloader is to retain visitors on the page and capture their attention during the preloading phase. This is often used if your website is animation heavy.
32. Content delivery network (CDN): A geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

‍