Additive Content. An alternative to the display:none problem in Responsive design

Categories: General, General Design, Programming | Tags: None

The Extra Cupcake Mentality

chocolate_cupcakeRoundedTrans.png

Recently, responsive or adaptive design seems to be all the rage. However, I've noticed that one is forced to make certain choices.

Think of a modern website, not as a cake, but as a collection of cupcakes. Some are tastier than others. Ideally, we'd like to serve them all. Unfortunately, sometimes we can't.

These are what I call your Extra Cupcakes.

Previous approaches

  • Serve the same content to your desktop visitors as on your mobile or other devices but perhaps change the layout depending on the viewer size.
  • This is moving the cupcakes around.
  • Hide Extra content from non-desktop users by using the css property display:none.
  • The problem with this method is that non-visible content is still being downloaded. Invisible calories. Grrr...!
  • Decide to cut non-essential content from the site.
  • This is a sort of super-diet "mobile first" attitude. It's hard to let go of the "Extra Cupcakes" though....

I've come up with what might be a fourth way to NOT have your Extra Cupcakes and EAT them too.

Hmmm...what adds things in at runtime or after an event and it's all over the web? Java script!

I know that using javascript to add things into the HTML is not exactly an original idea. The way that CSS3 uses @media queries is different from traditional browser/device sniffing. It uses feature sniffing instead and, for example, looks at the display size to determine what gets served. This got me thinking... How do you truly Progressively Enhance content structure?

What if you could sniff for sizing using javascript as well?

It turns out you can.

I turned to jQuery, because it's pretty handy and allows me to deploy certain functions without worrying about cross browser compatibility as much.

How is it done? We dynamically progressively enhance the content and its structure.

  1. Essentially, we sniff for the actual content size by referencing a div that contains everything and determine what the current size is.
  2. overallWidth = $("#containerWrap").width();
  3. I suspect this is more flexible than sniffing for the viewport or document size but those work too.
  4. Then we dynamically add in the the div or divs that will hold the Extra information if the container is large enough.
  5. $("#mainContent").after('');
  6. Then they're filled with Extra Cupcake goodness via AJAX...mmmmm.
  7. $("#secondaryContent").load("sidebarInfo.htm");
  8. We also resize or rearrange the other content to accommodate the new content.
  9. $("#mainContent").css("width","75%");

What happens if the container isn't large enough?

No Extra Cupcake Content! The visitor sees only the Essential Cupcake Content that was always there and is none the wiser.

Is there a way to give visitors on smaller sizes the Extra Cupcakes too?

Sort of. This is why there's an Extras link in the footer. Although you could place it or more like it pretty much anywhere. Maybe in a plus sign next to the main content?

If visitors click it, they can view the content in a separate page or it could trigger the content to be downloaded and put in after all.

It's only hidden dynamically if people can view the large content.

Will the search engines not index javascript added content?

No they won't. And that's a big downside. But that's one of the reasons we include the regular links so they and non-javascript/small viewer sized visitors can see the extra content.

Give it a shot!

Click here and resize the window below 1024px and Reload it.

I've currently got the javascript adding the content at any view size at or above 1024px.

View the Source and the Generated Source if you have the Web Developer Toolbar for Firefox. I've added the javascript below inline for ease of viewing, but you could externailze it too.

I'm also working on a dynamic php based version that shares variables and uses a css sheet that's made to process php, so we can get those variables in there. I'll post it when it's ready. I'm also looking at pulling the variables into both via JSON.

You could also use this method to add content that would show up on super large HDTV screens as well which would screen the site beyond normal desktop dimensions.

I'm still working on the recipe

Frankly, I may find some gigantic bug that makes this all moot. I'm also not the best programmer in the world so I'll probably get advice from those who are a lot better than I and let them take a crack at it. Maybe someone's already done it. Yay! That would save some work... What I'm describing isn't even a full fledged technique but more of an approach. Use it at your own risk!

Hey, your example page here isn't really responsive/adaptive!

Yes, I know. This is more a test to see if the Additive Content approach can work and if we could add in content on larger viewer sizes and keep it removed on smaller ones.

What about media queries?

I think they'd be very handy to continue to manipulate Extra added elements. The Additive Content approach is geared towards providing an alternative to the display:none problem (see point 7 on the linked page - most of their concerns are actually addressed elsewhere) where non-visible content is still downloaded to the browser. It's not meant to do heavy style lifting.

Is this performance intensive?

We'll need to benchmark this technique and see if it is. One of the nice things about HTML5 and CSS3 is that they do many things that Javascript used to do. This can leave us with a bit more wiggle room to include the Javascript that we need to get certain things working using the latest methods.

Isn't this a gigantic pain to translate into our dynamic site template?

Possibly. I'm just presenting this a starting point and approach to dealing with the Extra downloading problem.

Couldn't you use a mobile template or mobile site sub domain directory to get around the problem?

Sure, but we're trying to go for the Write Once, Publish Anywhere ideal. Creating a separate site or template might be the way to go for many people though.

Back to top

October 24, 2011  |   Share:

Discussion

Posted by Pharmc377 on
Hello! dkeeekk interesting dkeeekk site! I'm really like it! Very, very dkeeekk good!
Posted by Pharmf592 on
Very nice site! cheap viagra
Posted by Pharme722 on
Very nice site! [url=http://ypxaieo.com/oooasvy/2.html]cheap cialis[/url]
Posted by Pharmf674 on
Very nice site! cheap cialis http://ypxaieo.com/oooasvy/4.html
Leave a Reply



(Your email will not be publicly displayed.)


Captcha Code

Click the image to see another captcha.