Over a million developers have joined DZone.

Angular Instead of Media-Queries

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

Tables, JavaScript and Angular

In a group activity at a GeekNight Meetup in Dallas on Wednesday, we took a stock GitHub Pages page & theme, and pared it down to be fairly minimal, and added in AngularJS and a spattering of form-factor detecting JavaScript to update some of the model variables. In the page, we bound some dynamic styling and if/else conditionals to the model. It’s just a hack really. Specifically:

  1. 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
  2. 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 http://paul-hammant.github.com/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:

iPhone screenshot:

Yet to test / drilling into the code

How does google index this site? What does it look like in preview?

The Google search-bot has not found the site yet. I’ll update this blog entry when it does. Even if it did, Google’s search-bot is presently not going to load up Angular in a VM browser to take the screen-shot. It’s going to do screen-shotting (and indexing) with JavaScript turned off. Whereas normal Angular apps load JSON, we’ve deliberately chosen to have tactical Angular directives on an otherwise plain HTML page. This makes it eligible for search indexing.

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-"
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.

In order to help the Google search-bot and screen-shotter, we’ve also put in attributes of “style” AND “ng-style” on the same elements. That seems to be a conflict. It’s not. When JavaScript is turned on, Angular using the latter, will overwrite the former within a split second of page load. The former, however, is enough to make the preview screen-shot format OK.

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.


Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}