«

»

Responsive Web Design and Development with Bootstrap and AngularJS

What is responsive UI and why do we need it?

Responsive Web DesignBecause the websites and web applications we develop these days are available from a range of devices with different screen sizes and on various platforms, responsive web design allows us to ensure that our web applications will automatically adjust to look great whether it’s accessed by a laptop, tablet, or phone. Media Queries, a CSS3 module since 2012, has been the cornerstone for responsive UI design allowing specific cascading style sheets (CSS) to be served up based on the results of media queries. Media Queries are used to essentially determine the capabilities of a given device viewing your web content. Knowing the target device’s capabilities allows your web page to render in the most appropriate format to give your users the best possible user experience. This can be anything from how grids on the screen are laid out to changing the font size to enhance readability.

How do we implement responsive web design?

On many recent projects our teams have found that by leveraging Bootstrap we can quickly build dynamic and responsive UIs for our web applications. The robust Bootstrap framework provides HTML, CSS and JavaScript support to create grid-based layouts that have a modern look and feel on all devices. Bootstrap was created by the folks over at Twitter to solve a number of problems. The supplied Bootstrap code libraries allow for consist design throughout the application and provide a rich set of features and support which limit the need for additional 3rd party libraries to help increase the maintainability of the code. Additionally, Bootstrap is lightweight and does not introduce additional images, Flash, or JavaScript to provide its core features. At the end of the day Bootstrap is simply CSS.

Going one step further with UI Bootstrap and AngularJS

UI Bootstrap adds powerful AngularJS support to the already robust Bootstrap framework. We recently used UI Bootstrap and AngularJS to create an enterprise application with a responsive UI and found that the two frameworks really enabled our development team to build a modular and easily testable application. Angular’s strong model driven design using a Model View Controller (MVC) approach allows for developers who are new to Angular to quickly pick it up and to be productive. There is a bit of a learning curve, particularly around understanding how Angular’s directives work, but the overall reduction in code required for two-way server binding is much less than what we were used to with jQuery.