Finally getting time to make significant improvements to the UI of my business web applications.  One of the top priorities on my projects is UI Transformation using Responsive Web Design (RWD).  Should we have done this years ago???  Sure!!!!  So much to do so little time…

There are many different aspects to tackling UI improvement and RWD.  A lot of what I see on the web is about making web sites (IE. online stores, blogs, etc) responsive which is fine, but I live in the world of business web applications.  Lots of data, lots of backend processing etc.  Where to begin?!?  Especially with so much legacy code…  Right now, overall my company (like every other one) has been pushing for Mobile First.  Well that is a GREAT strategy but not all aspects of my business application will be implemented on a smart phone.  Main components of my application should be able to run on a iPad, Windows 8 Surface, Laptops with varying display sizes, and all the way up to desktops with large monitors.

Depending on your scenario, one great benefit of business applications is that you can determine what browsers you support.  Officially, we will be supporting IE, Chrome, and Firefox.   I don’t have to worry about supporting all browsers since not all are approved or installed in a corporate environment.  In addition, my applications should work on Safari but there is only so much time in the day and so much money in the budget so testing would be limited for that.

Where to start…

Now, how do you go about building out a business application to support RWD…  In my experience, most business web applications don’t have a Design team but rather one or two team members who are pretty good at laying out pages.  So for most business web developers the obviously place to start is learning the various technologies…

First, make sure you have or started learning HTML5 and CSS3.  If you are completely new to RWD, a basic but great article to kick-start with is the following:

• An introduction to HTML5, CSS3 and responsive design/

If you have a PluralSight membership or a FrontEnd Masters membership, watch Ben Callahan’s video called “Responsive Web Design”.  Lots and lots of hours of learning.

In addition, there are many GREAT articles to read.  I found these useful:

• Responsive Design by Brad Frost
• A non-responsive approach to building cross-device webapps by Boris Smus

Next, follow some folks on Twitter

• @ResponsibleRWD
• @RWD
• @Real_CSS_Tricks
• @bencallahan
• @paul_irish
• @chrislove

Then follow a Usability Engineer or two…

• @alicia_hat
• @ajderosa

Check out some real live Sites

• Penn State
• College of Mount St Joseph
• Sparkbox
• ABC
• MSN on a Windows 8

All of these sites are responsive and as you resize the browser the content is resized, modified, and styled based on the screen size without having to refresh the page.  Pretty awesome!!!

Here is Penn State’s website responding based on the browser being resized:

All that is great except for one thing.  Those sites are content driven, not business apps.  But the same principles can be applied.  Showing samples of business applications is a little hard since most business web applications are behind login pages…

But Kendo UI does provide a demo site that is fairly nice to see how a potential business application could be tailored using RWD

• Kendo UI Bootstrap Demo

Here is a screen shot showing how the same page resizes so easily…

Then, start picking your technology

Well you need to start with HTML5 and CSS3.  Learn about Media Queries, ems versus pixels, transitions.

Then, pick a framework.  So many to choose from.  Lots of good open source and lots of great third-party products.  Since I write business application, I tend to concentrate on the core which is the business and customer needs instead of how to write a currency control or creating a grid from scratch or tweaking an open source project.  Therefore, I bought a copy of Kendo UI.  It gives me a lot of controls that adhere to RWD making my life a lot easier.

Rules to live by when implementing RWD

• Avoid inline styles at ALL costs.
• Depending on your scenario, avoid using the ViewPort and use media queries.
  • Don’t forget — older versions of IE do not support media queries.
• In addition to media queries, modern browsers also support matchMedia.  This allows you to bind to JavaScript callback but be careful since older browsers do not support this.  This can be very powerful.
  • window.matchMedia(“(min-width: 400px)”.addListner(function (e) {…}))
• Start styling for your smallest supported width first.  In my case, that will be 1024px for an iPad in landscape.  Later, certain portions of the application will be style specifically for smartphones.
• Use Percent on your widths instead of pixels or ems.
• When necessary, use ems instead of pixels.
• Use Transitions in your styles to handle resizing smoothly
• When necessary, use shims like Modernizer and or Polyfills.
• If you are writing JavaScript to handle resizing, step back, review what you are doing and see if CSS3 will solve your problem.  It’s amazing what CSS3 does!!!

Conclusion

Hopefully you found this rather helpful to start understanding how to build your business apps using RWD.  More to come soon on this topic.