What is responsive UI and why do we need it?
Because 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?
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.
Adam D’Angelo is Dev Technology’s Senior Director of Technology & Learning