We’ve just completed overhauling the Movie-Mine web site to achieve what’s referred to as Responsive Web Design (RWD). Put simply, this means the site now is reasonably usable on a wide range of browsers and devices, such as smartphones, tablets, and desktop computers. As the screen or window size changes, Movie-Mine pages automatically rearrange themselves to make sensible use of the available display space, while keeping the sizes and spacing of various elements clearly organized and legible.
Now you can use Movie-Mine with your smartphone to help select a movie in the comfort of your bed, or at your local video rental store – if you are lucky enough to find one. When you are at your desktop computer you can use the extra screen space to build and massage your own watch list of potential viewing candidates, and review various sources of ideas, top movie lists, etc. Also use your phone or tablet to quickly make note of personal recommendations and tidbits of information you happen to run across. Regardless of how you get to it, Movie-Mine keeps track of your own notes and annotations, attached to any of the more than a hundred thousand movies in its datase.
The technology for Responsive Web Design
In the olden days, the more sophisticated web sites tended to use highly styled, fixed width layouts, designed to look best at some particular page size, e.g. 640X480 pixels, and then progressively larger sizes as typical displays evolved to higher resolution. To view those sites in a smaller window, you’d have to scroll or pan to see the rest of the page, or zoom to a smaller font size. Then browser-enabled smartphones came along, and things got more complicated. At first, only companies with big budgets could afford to create alternative mobile designs and deal with complex browser and device dependencies.
Fortunately, by the time we confronted this problem, the concept of Responsive Web Design and readily available technologies supporting it had become well established. Google is pushing RWD in a major way, understandably since it’s very much in their interest. Google provides some very useful assistance to developers, including these indispensable tools:
Also note that Google Chrome’s built-in Inspect tool is extremely helpful, especially with regard to understanding CSS, and it has a handy tool for previewing a web page as it would display in a variety of mobile devices. For a good introduction to RWD, start here:
I should add that W3Schools is an excellent general reference on a wide range of web technologies. I found it very helpful in getting acquainted with RWD, and it was worthwhile to have gone through the RWD topics in the sequence they presented them. But I almost missed the somewhat understated grand finale that follows their simple RWD framework called W3.CSS. No, W3.CSS is instructive, but what I really want is Bootstrap! As it turns out, W3Schools is built on the Bootstrap framework, and they have plenty of documentation about it here:
For the most complete and authoritative reference, get it straight from the horse’s mouth:
Naturally, this is a Bootstrap-based web site.
It is reassuring that Bootstrap is very widely used, and it has evolved over a number of years as a framework for building web user interfaces and dealing with cross browser compatibility. It’s much more than a solution to the RWD problem, which was my original motivation for looking into it. With Bootstrap, you get the tools to easily build higher-level constructs like menus, modal dialogs (aka modals), and other essential web components that go one level beyond what you get from basic jQuery. Since I hadn’t yet decided on a set of UI components, I was delighted to discover that I got those for free from Bootstrap!
Bootstrap is a relatively “lightweight” framework, providing a high degree of flexibility without imposing undue complexity and constraints on the developer. By contrast, a framework like WordPress is not what you’d call lightweight. I quickly discovered the morass of complexity one must deal with to create WordPress templates, which are required for any serious degree of customization of WordPress – even the addition of a single line of JavaScript. That isn’t intended as a put-down of WordPress – after all this is a WordPress-based blog. But Movie-Mine would not have been better or easier to build with WordPress.