Creating a website that is both functional and aesthetic is not an easy task. In this article, we will guide you through the process of preparing a site outline step by step.
Previously, in the part 1, I looked at the subject of back-end development and promised to more closely examine how to build a website from scratch.
Building a website from scratch
This is the approach you need when you want to build something that solves a unique problem, or a common problem in a unique way. Being able to define every aspect of a web development project has a certain appeal, but with great power comes great responsibility. Going this route, you may fall into a trap and over-engineer features that your users expect to work in a certain way.
Warnings aside, where do you start? At Nopio, while building a website from scratch, we usually start by asking what technology you use to run other services in your company. Introducing new platforms adds complexity to server management, so it’s best if this can be avoided.
If everything runs on Windows, for example, it makes the most sense to choose a technology native to that stack, such as C# .Net MVC. Of course this is not the only option, but it’s what we would advise in most cases.
If your current infrastructure is built on Linux-based systems, there’s a variety of solutions to choose from. To be precise, quite a few of these will work on Windows as well (eg. PHP, to name one of most popular). We’d go with Ruby on Rails in almost all cases. It’s fast to develop, offers plugins that add common features with very few lines of code needed, and integrates automated tests out of the box. Again, it’s not the only option (far from it), it’s just the one we find works really well for most of our customers.
A final word here about existing applications:. Sometimes it seems like starting fresh and rewriting an old app from scratch is an opportunity to improve it. Think twice, then think again, do some reading on why it’s bad idea, and then drop this foolishness. You really need a good reason to ignore all the warnings.
Front-end development
By front-end we mean the parts of the project that end users see in their browser window. This includes the HTML, CSS and JavaScript that is processed by the browser and results in the beautiful and interactive pages that are now so common.
The main challenge here is to make the website work equally well in all browsers and on all devices. Like I mentioned in the design section of my previous post, mobile traffic is becoming a bigger and bigger portion of all requests, on some sites reaching 50% or more.
Browser/device compatibility is a never-ending effort for front-end developers, but there are a lot of tools to make this process easier, faster and therefore cheaper. Some of them are created to build HTML/CSS templates that render well on all browsers and devices. An example is Bootstrap, which is our primary choice when working with any HTML/CSS build.
Quite often, on top of libraries like Bootstrap you’ll find a JavaScript framework (such as AngularJS or ReactJS) that is used to create a super-interactive website that responds to user input as fast as possible. In recent years there has been an explosion of such frameworks, and new ones appear almost daily. The problem is, while some (like the two mentioned above) are supported by big companies (Google and Facebook in these cases), others disappear as often as they appear. I would advise you to choose a well-established framework. If one that you decide to use ceases to be supported your project may need a serious rewrite.
Finally, choosing a well established framework makes it easier to find developers who have experience with it. That is important not only when you try to hire people for your team, but also when searching for support or solutions on the Internet. The bigger the development community of a given framework, the easier it is to find help if you get stuck during development or experience problems later when the website is live.
Next time, I’ll further examine key elements of every web development project. Stay tuned.
As usual, I’m interested to see what you think. Leave a comment below or tweet us @nopio_studio
If you like this series, see also the next parts:
– testing and hosting (Part 3),
– performance optimization (Part 4),
– website caching (Part 5),
– ssl certificates (Part 6)
– code deployment (Part 7)
