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.
The web application was for MAC systems only and its fluid design was provided by the client in .sketch 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.
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.