Additive Content. An alternative to the display:none problem in Responsive design
The Extra Cupcake Mentality
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.
- 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!
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.
- Essentially, we sniff for the actual content size by referencing a div that contains everything and determine what the current size is.
- overallWidth = $("#containerWrap").width();
- I suspect this is more flexible than sniffing for the viewport or document size but those work too.
- Then we dynamically add in the the div or divs that will hold the Extra information if the container is large enough.
- Then they're filled with Extra Cupcake goodness via AJAX...mmmmm.
- We also resize or rearrange the other content to accommodate the new content.
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.
Give it a shot!
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?
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.
October 24, 2011 | Share: