Page 1 of 1

Responsive Web Design RWD and conditional content

Posted: Mon Sep 02, 2013 12:16 pm
by KBleivik
1. The mobile revolution.

Take a look at my home page http://www.kjellbleivik.com/. There you see a page with responsive web design and Ken Burns animation from a rafting tour with my family in Sjoa i Norway.

... many users will likely only ever see the mobile version of your site. That’s an astounding revelation isn’t it?

Source: http://designshack.net/articles/css/mobilefirst/

Since drupal is our preferred CMS, you should note the following feature of the next version 8 of drupal that will be released in 2014.

Mobile-friendly

In Drupal 8, all built-in themes are responsive. Even administration pages work much better on mobile devices. Tables shrink properly, and the new toolbar included in Drupal 8 is mobile-friendly from the start.

Source: https://drupal.org/drupal-8.0

You can develope advanced sites using drupal as your CMS without knowing HTML, CSS and php, the scripting language used to develope the drupal platform.

Many of the worlds bloggers prefer WordPress as their blogging platform and there are a lot of responsive themes for WordPress.

Smartphones and tablets have changed the way we surf the web, put content on the web, shop on the web and build relationships on social networks. With those new platforms came the need for sites to be user friendly on desktop computers, tablets as well as smart phones. The first solution was to supply at mobile friendly site in a sub folder http://www.mysite.com/mobile or on a sub domain http://www.m.mysite.com. The domain name mobi, a top-level domain (TLD) in the Domain Name System of the Internet emerged. Its name is derived from the adjective mobile, indicating it's used by mobile devices for accessing Internet resources via the Mobile Web. A lot of new framework also emerged, Some of the best know will be mentioned in this thread.

KW search: what is .mobi

Related forum threads:

viewforum.php?f=10

viewforum.php?f=62

You find most of the content in this post in this http://vimeo.com/32143919 excellent video.

Related links:
http://www.the-haystack.com/2011/01/07/ ... obile-web/

http://mobithinking.com/mobile-marketin ... bile-stats

2. Mobile or content first?

Here http://www.digitalpunkt.no/ is my mobilized :-) mini network. Hopefully in about two years, every site in that network will be responsive. Our marketing site http://www.scandinavianmarketing.net/ is also mobilized for those that are looking for a great marketing opportunity.

The Reason For The Mobile-First Hype

All of these are reasons why the approach of building mobile first is so hot right now. If you start thinking about your Web experience from a mobile standpoint, you will be forced to devise and create a sharp, focused communications strategy and UX design that cater to multiple interaction mindsets and user goals. Once you have these fundamentals in place, it will be much easier to scale up to other devices, which in turn will inherit this focused thinking, helping to create a One Web that is intelligent, useful and worth experiencing.

Let’s starting thinking about how to create seamless online communications, irrespective of device.

Source: http://www.smashingmagazine.com/2013/02 ... -internet/

Related links:
http://www.abookapart.com/products/mobile-first

http://www.pcmag.com/article2/0,2817,2359752,00.asp

http://www.ibm.com/mobilefirst/us/en/

http://designshack.net/articles/css/mobilefirst/

http://blog.mobileesp.com/

3. Responsive webdesing and CSS3 media queries.

As early as april 07, 2000 John Allsopp wrote this A Dao of Web Design article and it’s more relevant today than ever before.

First of all you should be aware of this article: Media Queries Are Not The Answer: Element Query Polyfill

Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size.


There is two important distinctions:
  1. Serving the same content seamless to different platforms.
  2. Serving different content to different platforms.

The two technologies can of course be combined for different parts (pages) of the site. What CSS3 media queries do, can best be illustrated with this site: http://mediaqueri.es/ You should immediately get the idea. If not, here http://www.projectseven.com/products/te ... out-01.htm is another example. With the help of media CSS queries different styles sheets are delivered to different platforms.

Media queries bring a lot of power to the Web designer's desk and they are supported by the vast majority of mobile devices currently offered for sale. The concept of using media queries to create responsive pages is a hot topic in Web design circles. Everyone, it seems, has written an article. As you read about responsive design and media queries you will find different methods—some of them good, others not so good. While we can't say with certainty that the method we employed for Adaptations is better than any other you might find, we can say for a fact that it's been thoroughly tested on the most popular devices currently available and that it affords a finer level of control than many other methods we've seen.

Source: http://www.projectseven.com/products/te ... a-queries/

On that example page they use the following media queries that we have included in the following file:

media.css

Code: Select all

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 679px) { ... }

/*Exception rules for Smartphones in Landscape orientation only*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) { ... }

/*2 Column with top spanning menu for Medium Browser Windows and Portrait Tablets*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : portrait) { ... }

/*Portrait Tablet Exceptions to adjust padding in content areas*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { ... }

/*Additional Rules for Medium Desktop Browser Windows and Landscape Tablets to reflow the inner 3-column structure*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : landscape) { ... }

/*Landscape Tablet Exceptions to adjust padding and reduce font size*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ... }

/*3 Column for Medium-Wide Browser Windows*/
@media only screen and (min-width: 980px) and (max-width: 1420px) { ... }


Design is often more art and philosopy than sience, so what is the optimal number of break points (with accomponying style sheets) may vary from site to site and person to person.

External links:

http://daverupert.com/2013/04/responsive-deliverables/

http://tangledindesign.com/deciding-wha ... ts-to-use/

http://www.1stwebdesigner.com/design/ov ... eb-design/

http://www.smashingmagazine.com/2013/03 ... ve-design/

http://cssmediaqueries.com/overview.html

http://alistapart.com/article/responsive-web-design

http://www.abookapart.com/products/resp ... web-design

4. Fluid images, video and the Ken Burns effect

Fluid image combined with the Ken Burns effect get more and more popular on web sites. The Ken Burns effect can also be combined with the well known WOW slider. Some examples are collected on this page.

Video demonstrations: https://www.youtube.com/results?search_ ... ffect&sm=3

http://en.wikipedia.org/wiki/Ken_Burns_effect

http://www.premiumbeat.com/blog/how-to- ... cut-pro-x/

http://alistapart.com/article/creating- ... -for-video

http://fitvidsjs.com/

https://github.com/davatron5000/FitVids.js

http://css-tricks.com/NetMag/FluidWidth ... hVideo.php

http://www.iandevlin.com/blog/2012/08/h ... tml5-video

5. Media queries or components?

Modular CSS is already hard enough, and media queries provide very little to no help. Truly modular layouts need to respond to the sizes of containers, not just to the viewport’s size.

Source: http://coding.smashingmagazine.com/2013 ... -polyfill/

In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser.

Source: http://en.wikipedia.org/wiki/Polyfill

http://ianstormtaylor.com/media-queries-are-a-hack/

http://tjholowaychuk.com/post/27984551477/components

https://github.com/tysonmatanich/elementQuery

http://css-element-query-experiments.ha ... yfill.html

https://github.com/scottjehl/Respond

https://github.com/Modernizr/Modernizr/ ... -Polyfills

https://github.com/Mr0grog/element-query

6. Fluid grid layout, DreamWeaver and RWD

And I don’t just mean the WYSIWYG editors like Dreamweaver, FrontPage, all these things: it’s easy to pick on them, they’re clearly in the wrong because WYSIWYG as applies to web design doesn’t make sense. But I kind of mean all the visual design tools.

Source: http://adactio.com/articles/5826/

Regarding DreamWeaver CS6 and CC that statement is partly right - since there is new functionality like fluid grid layout, multiscreen view etc.

There has been a discussion on the internet whether it is best to serve one big style sheet or different style sheets for different platforms. Informal tests have been run to see what is most effective, with no final conclusion in my opinion. In Adobes Dreamweaver CS6 it is very fast to bulid responsive web sites that uses one big style sheet. Go to Adobe.tv http://tv.adobe.com/ or YouTube and search for:
  • Dreamweaver CS6 fluid grid layout
  • Dreamweaver CS6 responsive web design
and you will see for yourself. You can of course make the same queries on a search engine without the term Dreamweaver CS6 or start on the page http://www.adobe.com/devnet/dreamweaver.html. You don't need to use Dreamweaver. There are a lot of other free platforms. But since I have used Dreamweaver for about ten years I know how easy it is to make responsive sites using that platforms inbuilt functionality. It is also easy to build sites and hybrid applications using Dreamweavers jQuery mobile and PhoneGap functionality. For years we have known the site http://www.projectseven.com/ that sells excellent DreamWeaver solutions.

Links:
http://www.projectseven.com/products/te ... a-queries/

http://24ways.org/2011/conditional-load ... e-designs/

http://www.adobe.com/devnet/dreamweaver ... rnizr.html

http://www.adobe.com/devnet/dreamweaver ... eries.html

http://www.adobe.com/devnet/dreamweaver ... s-pt2.html

http://www.youtube.com/watch?v=3p_MZsnUENc

http://www.youtube.com/watch?v=HNmRInH3Ftg

http://www.youtube.com/watch?v=KkAoo3M6cDA

7. Conditional CSS

http://adactio.com/journal/5429/

8. Setting and checking breakpoints.

http://jquerymobile.com/demos/1.0a4.1/d ... lpers.html

http://stackoverflow.com/questions/1644 ... eak-points

http://seesparkbox.com/foundry/breakpoi ... ser_values

KW search: media queries optimal number of breakpoints

9. Matchmedia and RWD with JavaScript

http://www.sitepoint.com/javascript-media-queries/

http://christianheilmann.com/2012/12/19 ... iaqueries/

http://andydavies.me/blog/2012/12/29/th ... ylesheets/

http://wadmiraal.net/lore/2013/04/11/qu ... y-with-js/

https://www.ibm.com/developerworks/mobi ... ve-design/

http://wicky.nillia.ms/enquire.js/

http://intentionjs.com/

https://code.google.com/p/css3-mediaqueries-js/

http://view.jquerymobile.com/1.3.2/dist ... o/rwd.html

http://modernizr.com/docs/#mq

http://jquerymobile.com/demos/1.2.1/doc ... pting.html

http://jquerymobile.com/demos/1.2.1/

http://stackoverflow.com/questions/1639 ... ery-mobile

10. Conditional content.

In terms of mobile web design, this meant that a full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system simpler (no Flash support, etc.).

Source: http://designshack.net/articles/css/mobilefirst/

http://adactio.com/journal/5414/

http://alistapart.com/article/creating- ... -for-video

http://24ways.org/2010/speed-up-your-si ... d-content/

11. Resources.

Image optimization for the web:

http://imageoptim.com/

http://www.irfanview.com/

http://www.gimp.org/

Video optimization, compression and recovery:

There are two techniques when you compress videos (and images) for the web, looseless and loosy compression. You should know the difference. With looseless compression you keep the same quality as the original video, but the files gets bigger than with loosy compression the as the name indicates reduces the quality but at the same time the file size more than with looseless compression.

http://easyhtml5video.com/

http://www.wondershare.net/

Java Script libraries:

http://jquerymobile.com/

http://modernizr.com/

http://xuijs.com/

http://javascriptlibraries.com/

Other resources:

http://www.embarcadero.com/products/rad-studio

http://phonegap.com/

http://skybuilder.net/discovery/

http://www-03.ibm.com/software/products ... worklight/

http://www.ibm.com/developerworks/downl ... worklight/

http://www.colorpicker.com/