More improvements on the Backchannel App this week! One that I especially like is the addition of responsive web design. Its more than just a web design principle with a fancy name. What responsive web design means is that the App will be displayed differently depending on the size of the area its being viewed in. For example, if it is being viewed on a laptop it will show the full app, but if an iPhone is the device being used a more mobile friendly version will be displayed. The app will have 3 styles: Desktop, iPad, and iPhone.
Its interesting to see how this works. If tech-talk frightens you just skip down to the next paragraph. All of the styling is still in primarilly one stylesheet (other stylesheets are for plugins and such). Responsive web design uses media queries in the CSS to establish parameters for when certain CSS rules should be applied. These queries are related to screen resolution which allows us to target the different mobile devices and style accordingly.
This part of the Backchannel App has been fun for me. When I first heard we would be implementing responsive web design I thought it would be very complicated. Instead, its been suprising to see what all can be done in less than 100 lines of CSS.