vteams was hired to develop a fully responsive website with fluid layouts. The website should adjust with all the varying resolutions for different devices ranging from desktop to tablet. The tricky part of this project was to achieve this requirement without duplication of HTML content for mobile and desktop view. Animation and interactivity was required almost everywhere on the website. Using Bootstrap framework, HTML structure should be developed.
Development Phase
The web application was for MAC systems only and its fluid design was provided by the client in file format. For slicing purpose, Avocode tool (which provides viewing of sketch files under windows platform) was used.
Basically, Avocode tool allows you to export images in multiple formats and shapes them in SVG file format. Additionally, it provides a CSS code for the already used style and fonts, etc. These features of Avocode helped vteams engineer Muhammad Zubair to avoid typing most of the CSS style properties.
Bootstrap framework with HTML5 was used for document structure. Furthermore, Bootstrap Customization feature was used on Bootstrap website at first to modify its default Theme so that it could match up to the maximum extent with the provided fluid design. After that all the CSS, JavaScript and images were optimized to make the page speed faster and keep the document structure more flexible.
For animation and interactivity feature, animate.css was used to:
- Apply most of the common and similar type of animation
- Create custom animation (where complex animation is required) using CSS and jQuery
Every web page required a different layout and different behavior of similar elements. Conditional JS was used to achieve this functionality.