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.
Source: http://designshack.net/articles/css/mobilefirst/... many users will likely only ever see the mobile version of your site. That’s an astounding revelation isn’t it?
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.
Source: https://drupal.org/drupal-8.0Mobile-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.
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:
http://www.oopschool.com/phpBB3/viewforum.php?f=10
http://www.oopschool.com/phpBB3/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.
Source: http://www.smashingmagazine.com/2013/02 ... -internet/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.
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
There is two important distinctions: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.
- Serving the same content seamless to different platforms.
- Serving different content to different platforms.
Source: http://www.projectseven.com/products/te ... a-queries/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.
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) { ... }
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?
Source: http://coding.smashingmagazine.com/2013 ... -polyfill/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://en.wikipedia.org/wiki/PolyfillIn web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser.
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
Source: http://adactio.com/articles/5826/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.
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
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.
Source: http://designshack.net/articles/css/mobilefirst/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.).
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/