Mobilize.js versus responsive web design (RWD)
Mobilize.js versus responsive web design (RWD)Both mobilize.js and responsive web design offer solutions to having a mobile and desktop site from the same codebase. This is a comparison and evaluation of the 2 approches
mobile-optimised css. However mobilize.js is no longer being developed - the developers now recommend using responsive web design instead. In one of the comments to my original post I said I would check out the relative merits and report back - this is me reporting back
Responsive web design works by detecting the size of the display and rendering differently using css (css3) media queries. The screen size can be set in the css (or different css files loaded) - this means that for small-screen devices a mobile-optimised css can be used, for larger screens a different css. There can be multiple configurations for different sizes and configurations. The css for that configuration is the one that is loaded and therefore the site rendered using that css. I found a really useful guide which formed the basis for my approach
|responsive web design rendering|
I was pleasantly surprised at how easy it was to adapt the site to use responsive web design, so I tried another one I'd created for Becky Whittaker Counselling. This one was much more complicated - mostly, I feel, due to it being static-width whereas mine was elastic-width. However since a mobile css needs to be created in both cases, the resulting css would likely be the same for both approaches. I did make a schoolboy error whilst doing this which is that I forgot about the viewport. This is IMPORTANT as I discovered when I had weird varying results due to the viewport on any given devices
<meta name="viewport" content="width=device-width">
|Before responsive web design|
- What types of configurations are available?
- How many configurations can you create?
- How is the page rendered?
- Which technologies are used?
- How flexible is it for changing the page?
|After responsive web design|
mobilize.js uses the brower's user agent to recognise if the page should be rendered as a mobile site or not - if a mobile user agent for example
Mozilla/5.0 (Linux; U; Android 4.0.3; en-gb; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
is detected then mobilize.js kicks in and renders the page using the mobile css. This essentially means that a 10 inch tablet will render the same as 2 inch mobile phone
RWD uses resolution (in effect, screen size) to optimise the page regardless of what is being used, so a tablet with a larger resolution may render differently to a small mobile phone screen. The user agent is ignored. This may mean that a large resolution phone renders the desktop site or that a small resolution netbook renders the mobile site
It might be that what you really want isn't to optimise for screen size but for touchscreen devices. In this case mobilize.js might work, but there are probably better solutions for this particular case
Number of Configurations
mobilise.js has only 2 basic configurations - desktop or mobile. As described above this is decided by the user agent
RWD has as many configurations as the creator decides - I don't know why you'd want to
but you could have hundreds if you wished. I've gone for 2 to most emulate what I did with mobilise.js
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 767px)" href="stylesheet.mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 768px)" href="stylesheet.css" />
which cuts over to the desktop site at a width of 768 pixels. However you could have a smaller one for really small screens for example, or a tablet sized one etc
RWD renders the page based on the required css which means it is only rendered once and only with the content required by the page and css. So if the mobile css doesn't specify an image usually used in the desktop css it won't be loaded
Flexibility of design
As mobilize.js relies on you specifying the location of existing <div> tags it is pretty easy to reorder them and apply new styles. This means that, if I so choose, I could display the footer <div> at the top or whatever as the page will be re-rendered. This provides a lot of flexibility for creating a page that is optimised for small screens
ConclusionIt is important to note that in both of the cases I tried I have been adapting an existing desktop site to render nicely on mobile devices. If I were designing a new site I would certainly go with responsive web design and design it accordingly. I feel this is more in the spirit of designing mobile sites which isn't specifically to create a site for mobile devices but to optimise for the screen size
For an existing site mobilize.js has some advantages that may make you consider it, especially the ability to reorder the page. I think your choice depends on how easy it is to adapt your website to be responsive - if it isn't possible then mobilize.js may provide your answer