DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Join us tomorrow at 1 PM EST: "3-Step Approach to Comprehensive Runtime Application Security"
Save your seat
  1. DZone
  2. Coding
  3. Frameworks
  4. Angular Instead of Media-Queries

Angular Instead of Media-Queries

Paul Hammant user avatar by
Paul Hammant
·
Feb. 09, 13 · Interview
Like (0)
Save
Tweet
Share
9.07K Views

Join the DZone community and get the full member experience.

Join For Free

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

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.

footnote.

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.



AngularJS Media queries

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Load Balancing Pattern
  • OpenID Connect Flows
  • Distributed SQL: An Alternative to Database Sharding
  • Web Application Architecture: The Latest Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: