Web Development: What and how to prepare?

What is web development?

Note: The target audience for this post are the individuals and businesses who are not tech savvy and need an entry point to understand what is web development all about and in turn helping them to realise and prepare what they want and how to talk to a web development company or a freelancer. So to be very clear if you are a pro in the field of web application development, I would advice you to leave this page now.

 

What is web development

 

Technically, web development is:

A broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just ‘web apps’) electronic businesses, and social network services. [Source: Wikipedia]

What does it mean for you? It basically means presenting your business idea with the help of web technologies to your clients via the internet. Now maybe I have created some jargon here, but I am trying to explain it as simple as I can. Let us take an easy example:

Let us say that you have an incredible idea of selling customised coffee mugs. Your business specialises in custom printed coffee mugs and is located in the town of creative land. Its name is ‘Get Mugged’ (Help me lord!). The business is as usual and you are willing to expand to neighbouring cities and even countries. Although, currently, it is not financially viable for you to start new physical stores everywhere. You discuss with your business buddies and come to the conclusion that the best way to expand is by having an online presence. Voila! Now you know that you need a website or in nerdy terms: you have to develop a website.

Ok! So online presence is beneficial. How do I go about it?

So now comes the hard part. Just because you have decided that you need to be online does not put you online. If you do not have computer geniuses around or have that nerdy cousin who can do amazing things with a computer; you are basically lost. Now, I suggest you that before you go looking for that “amazing nerdy cousin” get your business requirement straight. Talk to someone who is experienced in your field of business. Or you can learn from your competitors and other business carrying out similar activity. This is known as spying on competitors. Finally a use for all the James Bond movies that I have watched. And then decide what features you want in your website.

  1. Collecting the data

    So coming back to our “Get Mugged” business example:

    So you have suited and booted yourself with the James Bond theme song playing in the background, you are now ready to go on your first spying mission. You are nervous but you keep steady. Then you move out of your house, close the door and check if no one is following you. You go to the nearest cafe and fire up your laptop. The browser is in incognito mode and type in the website url of your competitor. Now you are in. You get all the needed information before they can find out that you were there. You finish your coffee, pay the bill, smile to the lovely cashier and go out as if nothing happened. 

    Wow! that was some thrill. Let us have a look now on the information that you have collected from the website of your competitor (also make sure that you check all the possible competitors you have in the field. There is no law that you can only spy on one competitor):

    1. The website has a clear landing page where the competitor mentions about his products and services.
    2. It is the month of February and he is running a Valentine-day promotion with 25% off on all products and services.
    3. You can upload the image. This prints an image of your choice on the mug. 
    4. You can select the kind of mug you want. You can choose from multiple colors, different material and even different sizes.
    5. And finally you can pay for your product with your credit card.
    6. Afterwards you receive an email of confirmed payment and that your order is in process and also the approximate date of collection from the store.
  2. Implementing the data into your business model

    This kind of online presence has impressed you. You know that this is going to expand your business far and wide in the Creative Land. This paves the way for you to become the next business tycoon. You have a few sleepless nights conceptualising your plan and you come out with the following requirements for your business:

    1. My website will also have a clear landing page with photos of my products and some starting prices.
    2. I will also run special discount promotions on my website to attract more customers during festive seasons.
    3. The process of able to print a mug should be similar to that of the competitor but I need to ask around for more ideas on how it will be a unique experience for my customers.
    4. All my users can pay by credit card too.
    5. I will also ship to my customers so that they do not have to visit my shop. And the customers can also ship to other addresses too as a surprise gift. (You, sir are a true businessman or a businesswoman).

So what does doing all this research do for you and your business? All this research helps you enlist a clear set of objectives required for your website development. It keeps a fluid communication and clear understanding between you and your web developer or a web development company. Now let us try to understand what does it entail to develop your website with the above functionalities.

The branches (sub-branches) of web development

Now, you have to realise that there are two very important faces to a website. The first face is the visible-to-all face also known as the front-end. Back-end development is the second face that happens behind-the-scenes. In simple words, the front-end is more concerned with the looks of your website and the back-end is the brains of your website. Let us understand all this is a bit more detail:

Front-end

Front-end is very simple to understand. This is the part presents the website to a user to see and interact with. For example, while reading this article or surfing the web you always see the front-end of a website or web application. In the past, when web development was mentioned it was mostly referred to the back-end development but recently with the advancement of HTML and CSS, front-end development has gained a powerful position not only in web development but also in branding, marketing, user experience, etc. I will discuss these aspects of front-end development in another article.

Front-end has two major parts: web designing and front-end development. Let us understand these.

  1. Web designing:

    Web designing is all about graphically representing your web page. A web designer typically uses an image processing/editing software such as Photoshop or Gimp to create a visual representation of the various pages of a website. In this phase, they define the colour palette, fonts, font-sizes and other such graphical details to make a website stand out of others in the league. This is absolutely necessary to attract and gain trust of your visitors. This phase also contains the details about specific details of user interaction and user experience on the website. For eg: when user clicks a button , the button should change colour and then the content should slide-in from left to the center of the screen. Or how the website is going to look on a mobile phone.

  2. Front-end development

    After the design process, the front-end developers program all that graphic design into web readable format. When I say web readable format it means that the developer writes code that any browser that you use can show the website to you in a similar way as depicted in the graphical representation by the web designer. The skills of front-end developers includes proficiency in HTML, CSS, JavaScript and various other related libraries and frameworks such as Bootstrap (CSS), Foundation (CSS), React (JavaScript), Angular(JavaScript).

 

Code of web page using html and php

 

 

Back-end

Back-end is all that happens behind the scenes. Let us come back to the example of “Get Mugged”. A user places an order on your website. Then the system processes a lot of things behind the scene like generating an order, creating an invoice, a request for payment, an confirmation email, storing the image, etc. This is the back-end which handles all the complexity for you and your user.

Back-end has three major parts: server, application logic and database. Let us understand these.

    1. Application Logic

      Application logic is the brain of your website and back-end developer writes this logic. The logic ensures what actions have to be taken after receiving an user input. For example, when on your website a user enters their shipping address, the logic will tell the application to store that address in a database for future use. This logic can be written in various programming and scripting languages. For eg: Php, Python, C#, JavaScript or frameworks such as Laravel, Django, .Net, Node etc.

    2. Database

      In simple words, database is like a huge excel sheet for a web application to store dynamic data. More technically, a database is a data structure that stores organized information. Most databases contain multiple tables, which may each include several different fields. For example, a company database may include tables for products, employees, and financial records. Each of these tables would have different fields that are relevant to the information stored in the table. For web development a developer may use database management systems (DBMS) such as MySQL, MongoDB, etc.

    3. Server

      Simply put, a server stores all the above application files and database(s). If you want the title of nerd amongst your friends then, a Web server serves the users the appropriate files to the user in response to their request. Web server uses HTTP (Hypertext Transfer Protocol) to accomplish this. Dedicated computers and appliances may be referred to as Web servers as well.

 

Wow! you are still here! You are the next tycoon.

The Next Steps

For front-end web development:

  1. Create a wireframe of your design.
  2. Design the different pages of your web application on a graphic software. you can also just use a simple pen and paper to design it.
  3. Choose the appropriate framework or library that you would use to develop the front-end.

For back-end web development:

  1. Register a domain name. Make sure it available.
  2. Next look for a good hosting.
  3. Choose the appropriate programming language to develop the application in.
  4. Conceptualise and create your database and connect it with your application logic.

Hurray!! the “Get Mugged” website is now online.

Somethings to note post web development process:

  1. Search Engine Optimisation: Developing a website is just a beginning. Your customers have to find you online. Let us say someone searches for “printed mugs for gift” on Google. It is absolutely important that you rank on the first page of the search results and that you rank before your competitors. Only then can your website earn money.
  2. Paid Online marketing: Competing on search engine against old competitors can take time. By using paid advertisements you can let the online world know about your existence almost immediately. This is a quick way to reach more people in an instant.

Now that you know what web development is all about. There are two paths that you can choose:

  1. Choose a company or individual and outsource your web project. Or
  2. Choose to be a full-stack developer and develop all of it by yourself.

Leave a Comment





Privacy Preference Center

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?