Paul Hammant's Blog: Angular Instead of Media-Queries
If you’re a developer or a UX person, unless you’ve lived under a rock for the last few years, you understand Responsive Web Design and it’s implications for site construction.
It’s clever stuff of course, and there are many examples of sites that adapt between desktop and mobile without a redirect. There’s also a backlash. I’m intrigued by that. I feel there is an element of “tail wagging the dog” about CSS driving more sweeping experience changes. I’m not sure CSS is the place for something that feels like conditional logic.
- Whether the viewport size was best as a single ‘content’ column, or multi column: Navigation affordances in the left and right ones, and ‘content’ in the center
- The width of left and right columns being 15 pixels OR more that that, and implicitly how wide that central ‘content’ column is.
By the way, the source on GitHub is - https://github.com/paul-hammant/angular_instead_of_media_queries. The actual deployed site is https://paul-hammant.github.io/angular_instead_of_media_queries (be sure to try this on mobile devices as well as desktop … and try resizing the window).
There’s content that disappears from the left and right columns (as they get smaller). There’s also a point at which those columns function as margins (min width 15px). It all works quite well. The three columns are implemented in regular HTML tables. Yes that technology, that was superseded by <div> elements (and CSS) some ten years ago.
The page as we have it today looks fairly bad though. We detached the CSS that the GitHub Pages site generator gave us in the initial commit. We will add that back incrementally, as it’s likely that we don’t need all of it any more. We definitely want the fancy fonts and colors back. Where we started and where want to circle back re themes:
Where are now (1993 called and wants it’s style back):
What that looks like if we reduce the size:
Yet to test / drilling into the code
How does google index this site? What does it look like in preview?
The Angular attributes will be ignored by the search-bot. Take a look at the main source file and look for things prefixed with ng-. Specifically hg-hide, ng-show and ng-style. Here, let me do an ‘ack’ for you:
ph7785:angular_instead_of_media_queries paul$ ack " ng-" index.html 2:<html ng-app> 28: <body ng-controller="ResponsiveDemoCtrl"> 31: <td ng-style="leftMarginStyle"></td> 38: <td ng-style="rightMarginStyle"> 39: <a ng-hide="oneColumn" href="https://github.com/paul-hammant/angular_instead_of_media_queries" class="button"><small>View project on</small>GitHub</a> 43: <td ng-style="leftMarginStyle" style="width: 40%"></td> 44: <td ng-style="middleStyle" style="width: 20%"> 91: <td ng-hide="oneColumn" ng-style="rightMarginStyle" style="width: 40%">
OK, so that’s not 100% clear, so take a look in the source, and scroll around.
I’ve also put the word ‘cachinnation’ in the page, so that I can search later for it in Google-Search. Well, search for “Paul Hammant cachinnation” perhaps. Cachinnation means ‘To laugh hard, loudly, or convulsively (guffaw)’.
Here’s what that preview screenshot looks like:
Looks OK, right? I’m not sure what’s happened to the left-hand column. Maybe the preview maker trims whitespace at the margins. By the way, it took the Google search-bot about seven hours to find it and make the preview picture.
There is some suggestion online that the word ‘responsive’ should mean Media-Queries solutions exclusively, so I’ve been careful to minimize use of that.
Feb 9, 2013: This article was syndicated by DZone