This stage kicks off with opening the project and assigning the team. development environment is setup and deployment/ collaboration plans are discussed.The actual coding and building of the product happens during development. Prototypes and Iterations are carried out along with regular client feedback especially at key milestones. Once the project is ready to go for testing the QA team starts working together with developers to debug any issues in the deliverables.
Slice and code HTML/CSS
During development we start slicing the final Photoshop mock-up, and coding the HTML and CSS for the basic design. We use HTML5 and CSS3 technologies for coding. HTML5 Boilerplate is the basic HTML template we use when coding HTML from scratch. As far as front-end frameworks are concerned Bootstrap is our favorite but we are familiar with Zurb Foundtation, Yahoo Pure and uikit too.
Here are the basic coding standards we follow:
- HTML5/CSS3 standards for coding web pages.
- HTML5 Boilerplate is our standard HTML template.
- Grunt JS task runner for front-end automation
- SASS preprocessor to generate CSS.
- Validate HTML/CSS code
You can find the full list of our programming practices and coding standards here.
The real development work starts with the slicing of the PSD files. Implementing the CMS, programming the web framework and adding functionality and features are covered in this stage too.
After slicing the individual graphic elements, they are converted into HTML code to make them functional web pages. If it’s a blog or CMS or an e-commerce system, installing the planned product in a local environment (or in an intranet) with a version control system (e.g. Git) is the starting point. This includes setting up the database as well. We use relational database MySQL mostly because it’s open source, secure, fast and it runs on almost all operating systems.
If our aim is to develop the system with a reputed framework (e.g. Laravel, Symfony etc.) or CMS (WordPress, Drupal etc.) our next step is to install needed add-ons/extensions and integrate functions and features to the system. This is because making big changes in the code later in the process is not a good practice as it causes many difficulties.
Once the functionality implementation part is done, we move to the theming/template integration step where the site’s content, it’s forms, call-to-action buttons/sections get their desired layout positions and branded coloration. This is one of the most important and value adding processes in the development stage, because all the user interaction interfaces get styled at this point. And given the highly mobile nature of web users these days we pay extra attention on making the sites responsive during this process.
PHP is the main programming language we use for development, however we have developed websites using a wide range of programming languages such as Ruby on Rails, ASP, Java. We are capable of developing web apps based on popular php frameworks such as Laravel, Symfony, CodeIgniter etc.
As we move forward with development, we keep pushing changes to our staging server at demo.villvay.com [If the client doesn’t have their own staging environment]. Modifications can be immediately reviewed on this server.
QA and Testing
Testing and quality assurance is an important process that begins in the development phase. We use tools like JIRA, Bugzilla, Flyspray to track bugs and assign fixes.
Once each task is completed by developers, they are tested by the QA team. Testing is carried out in parallel to development to reduce lead time and to make the development progressive.
To learn more about our quality assurance process, click here.
GIT for code collaboration and version control
Code collaboration is an essential part of development. When working on projects we often face the requirement to collaborate with other development teams. Using a good version control system (VCS) plays an important role in such situations where we have to collaborate with internal teams as well as third party teams. A VCS also makes it easy to track changes to the source codes, and roll-back to a previous stable version in case of a discrepancy or mistake. Our VCS of choice is GIT. We maintain our own Git server and also use BitBucket as a GIT hosting platform. If required we can also set-up a GIT repository system on a clients server or a dedicated/virtual/cloud server.
Once set-up Git makes version control and deployment a breeze. Updating a web application to a new version from a staging/repo to production is like any system software – it is consistent and predictable.
Even though we recommend GIT for your development project, we are familiar using other VCS as well. we have used Subversion (SVN) as the VCS for many previous projects.
Once the development stage is completed, it is time to launch your website which is the next stage of our development process.