How We Redesigned BinaryBoot Website From Scratch In 3 Weeks
It took us 3 weeks, but we did it. We turned a blank slate into a dynamic, responsive website. Result? The New BinaryBoot Website.
Websites are an integral part of a company’s virtual presence. Especially when you’re in the website and software development business, it’s important to have a website that stands out and showcases your work.
That’s why we at BinaryBoot decided to update our WordPress powered website to a full-fledged native website. The aim was to develop a modern, fully responsive website which illustrates our expertise in the field and brings in spotlight our diverse portfolio of projects.
Developing any project systematically from scratch means going through the complete software development life cycle. Following is the detailed approach we took to catapult the project to completion:
- Requirement gathering
- Content preparation
- Designing
- Front-end development
- Back-end development
- Deployment
Requirement Gathering
Before starting a new project (or phase), it is important to focus first on gathering all the requirements. Having a clear understanding of requirements and possible edge-case scenarios beforehand, enables you to save development time and effort.
For this, the team sat together and brainstormed what should be the main focus of the website. What all needs to be highlighted and what all is the secondary information.
We agreed to focus on our work and how it can provide value to the customers instead of focusing on ourselves. We went over the projects we have done, and created a list of all the different pages we need to develop and their hierarchy within the site.
Content Preparation
Unless you can convey your message clearly, your information and data cannot create a deep impact. Instead of good-old copywriting, we wanted to give our content a human touch.
We prepared brief case studies of all our projects, describing the problem statements, tech stack used and the key results achieved. We shot small videos of our projects underlining the flow, designs and main functionality.
We added animations and graphical cues wherever possible instead of plain text, to provide a more intuitive user experience.
Designing
While designing, we set out to build a unified user experience, according to the latest web standards. We chose blue as the prominent theme color of the website.
Since we are experienced in a long list of technologies, including all of them in a single place without causing an information overload was a complex task. We decided to go with auto-scroll animations and implemented a combination of vertical and horizontal scrolling in different sections of the home page. Getting the scroll sections working properly took some time, but all the effort was worth it.
Front-End Development (Sass, Bootstrap 4)
A smart developer knows when to use advance technologies and when to rely on basic ones. For front-end, we decided against using a JavaScript framework/library such as Angular, React or Vue. Since our website’s content is primarily static and no dynamic data binding is required, it made sense to avoid the unnecessary overhead of using JavaScript frameworks.
We implemented Bootstrap 4 for website responsiveness and styling. Bootstrap’s simplicity, reliability and out-of-box styling of majority of basic HTML components makes it the go-to option for front-end development.
Apart from Bootstrap, we wanted to use a CSS preprocessor to make writing and maintaining the stylesheets easier and scalable. A CSS preprocessor is a scripting language with its own syntax which later gets converted into normal CSS.
Using a CSS preprocessor has advantages such as:
- Ability to write cleaner code with reusable components and variables.
- Allows adding logic to the styling.
- Easier to understand and maintain code.
- Saves development time.
Since we have experience with using both Less and Sass, the decision was a toss-up. The fact that Sass is based on Ruby which we used in the back-end (more on this in the next section), tipped the scale in its favour. This allowed us to maintain a uniform tech stack in the project.
Back End Development (Ruby on Rails)
Our company is seasoned in using back-end platforms like ASP.NET, PHP and their variants such as .NET Core, Laravel, CodeIgniter, Zend. That’s why when given the opportunity, we decided to use another leading framework which we weren’t really experienced in. Enter Ruby on Rails.
Ruby on Rails (RoR) is a web framework based on Rails language. Some of the things which sold us on using RoR:
1. Faster development
Ruby on Rails is famous for it’s faster development due to its object-oriented nature and it’s closeness to the English language.
There are a lot of open source libraries available for Rails called as ‘gems’ which make it easy to add additional features to your code without much hassle.
2. Dynamic Community
It’s always fun to use open source technologies. You get to be a part of something bigger where you can contribute freely. You can also start coding and deploying right away.
Ruby on Rails also has a dynamic community in addition to being open source. It’s easy to find answers to your questions or additional libraries (gems) that you can integrate into your code. This vibrant community also makes sure that the overall framework remains stable and bug-free.
3. Self-documenting
Ruby has a simple syntax which resembles the English language. This enables the programmer to focus on writing the code rather than on adding documentation and comments. Its readability also makes it easier for the other developers to understand and work on the same project.
Overall, Ruby on Rails is a solid framework for developing your websites. It falls short compared to more famous platforms like ASP.NET and PHP in some areas, but that is the topic for another post.
Deployment
For deploying the website, we had various options like Azure, AWS and Heroku. We went with AWS due to its durability, easiness of use and reliability.
Using an EC2 server instance for running the code and an S3 bucket for any additional resources, we were able to deploy the website effortlessly.
We tried both the Nginx and Apache servers on the EC2 instance to measure for performance differences. After examining the results, we chose Nginx with Phusion Passenger for production since it provided better performance in our setup. Nginx works well with static content and can handle heavy loads easily.
Conclusion
Developing the company website again from the scratch was a joyful experience and you can see the final result here: http://www.binaryboot.com.
It took us about three weeks to complete the project, with one developer involved in core development and others within the company pitching in with the design suggestions.
The project helped us to better understand our own company and all the awesome projects we have done over the years. Adding new technologies like Ruby on Rails to our Arsenal was icing on the cake :)
BinaryBoot is a software development company founded in 2015. We strive to build efficient and scalable applications like Websites, Mobile Apps, AI Bots or Desktop Applications. We offer end to end technology solution so you can focus on your business instead.
