On responsive theming

Lately I worked on the relaunch of my company website zopyx.de. The site is based on Plone 4.2 and uses Twitter Bootstrap for the public website. Using Bootstrap made the site out of the box responsive. But having a responsive site can mean all and nothing. Bootstrap tries to reach responsiveness basically by using CSS3 media queries (and partly Javascript). The default result using Bootstrap was nice but far away been perfect or ready for production.

Issues I had with Bootstrap:

• The site uses IFRAMES for embedding YouTube videos and Slideshare presentations. In general it is necessary to specify a fixed width or height for the IFRAME. This is not much acceptable for a responsive a design. Using some Javascript code it was possible to adjust the width and height of the IFRAME upon orientation changes or resizing of the browser window in relation to the width the outer container.
• At the bottom of the zopyx.de front-page there is an image section with reference customer logos. The number of images to be displayed depends on the width of the browser windows (for desktop browser I am using six images, iPad in landscape mode shows up with five images and iPad in portrait mode displays 4 images). By default Bootstrap on iPad moved two references logos into a second row because six images did not fit into one row...working but ugly....as a workaround I added some media queries just hiding the 5th or 6th logo depending on the width of the browser window.
• For iPhone I made the decision to disable parts of the front-page e.g. the large image slider and the customer references do not show up  (display: none). However the images are still being loaded although not loaded...nasty and a waste of bandwidth.
• Image sizes - different devices require different image sizes/resolutions. This is a limitation of HTML. Although there are some Javascript approaches available as workaround or some people are using CSS tricks....this is all tinkering. There is perhaps relief available in the future since the W3C is discussing a proposal (I think it is called "image sets") in order to specify different URLs representing one image when using a particular screen width or so.
• Loading of resources: on a mobile device you are perhaps using a stripped down version of the original site (e.g. without sliders as stated above). In such a case I don't need to include related resources like Javascript/CSS for the slider for iPhone or iPad. Right now it is hard  bring this in line with media queries. Using media queries I can decide what to display or not but the decision to include a particular Javascript or CSS for rendering can only be done on the server.

Although I am pretty happy with the result so far I am convinced that the current programming model for responsive sites is partly broken.

Decisions when to render what and how is scattered among different places

• CSS (with media queries)
• client-side Javascript code
• backend code

I also did further investigations on the topic and sniffed into related frameworks like Foundation or other Grid systems...none of them addresses or resolves the problems mentioned above. Next I will look into more Javascript-driven frameworks.