Hi everybody,

 

I'm a newbie on these forums (in fact I joined today) but I thought I'd just write a short post to throw out a question for discussion and debate and see what everyone has to say on the subject; Adaptive design and its use.

 

By adaptive design I mean a fluid grid system that can adapt to differing screen sizes, reorganising the layout of the page accordingly. A good example of this is the 1140px Grid by Andy Taylor (cssgrid.net).

 

I like the idea that a designer only has to design one site - no need for a separate desktop and mobile version - hopefully saving development time and future updating costs.

It also means the necessity for dedicated smartphone apps is diminished.

 

The 1140px Grid strikes a good balance between fixed width (if the browser is 1140px wide or greater it centres the design) and fluid where the columns resize dynamically.

I've designed for both in the past and much prefer fixed, but that's just me...

 

Like I say I can see the benefits of using a system like this, but what if you had a complex design which wouldn't easily translate to a smaller screen, for instance a home page with a large banner graphic? Why take up valuable screen real estate showing this graphic to someone on a smartphone? It makes sense to either turn it off or replace it with a smaller version, so perhaps a hybrid which combines the 1140px Grid with the ability to access differing stylesheets based on screen size (like this example by Kevin Hale) would be ideal?

I'm not aware of such a system but if anyone has come across one I'd love to hear about it...

 

Then on a slight tangent there's jQuery Mobile.

Although I've not used it myself I've read some of the documentation and it looks powerful, I especially like the way it emulates a native smartphone-like environment with chunky buttons designed for a touch interface.

Again this reduces the need for a dedicated app and speeds up development time/costs, but you wouldn't necessarily want to present this type of interface to a desktop user since it's not what they're used to.

 

So to summarise I guess I'm proposing a system that employs a fluid grid based environment like the 1140px Grid but which also allows the referencing of different stylesheets at different screen sizes and which can turn on and off the use of jQuery Mobile.

 

Does anyone know of such a system?

 

I'd just like to close by saying I'm nothing more than average where web design is concerned. It's not my 'day job' and although I've got a fair bit of experience I'd never claim to be knowledgeable on the subject. I've only written this post to provoke a bit of debate about Adaptive Design and the issues involved.

 

All the best,

Tony.

"Responsive Web Design" is a hot topic at the moment, there are methods being developed with do away with the idea of 'Graceful Degradation' and instead, opt for 'Progressive enhancement'

 

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth, more advanced browser software or more experience an enhanced version of the page.

 

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

 

There's also methods that take grid based frameworks from a different perspective, working from the lowest screen resolution first, which means resources aren't loaded unless they are required, one example is '320 and up':

 

http://stuffandnonsense.co.uk/projects/320andup/

 

Then we go the other way, such as with the less framework, which starts off at highest resolution and reduces based on media queries:

 

http://lessframework.com/

 

Here's a few useful resources:

 

http://www.alistapart.com/articles/responsive-web-design/

 

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

 

 

 

Where I currently work, we're still struggling with finding the right clients to work with on this.

So many clients really don't understand the web at all - we're still faced with questions like "can you make it so it doesn't scroll" and "why haven't you used all the space on my screen, there's lots of blank areas"

 

If you then try to explain to them about responsive web design, your going to confuse them even more.

 

I'm not convinced responsive web design will easily apply to large, complex membership type sites, which is what my company tends to build. The only examples I've seen of responsive web design 'in the wild' so far, have been micro sites.

 

It *will* start to catch on more and more, but requires a mindset shift both from the developers perspective and more importantly, from the clients.

I'd agree with the fact that adaptive web design is the way forward. However it comes to a point where the monitors will continue getting bigger but the smart phones and tablets will not (due to their very nature).

 

This, if we're are not careful will lead to a very convulsive web of different sized and badly adjusted websites... this is where media queries come in and will be the saving grace.

 

There's a quick introduction to them here but if you are serious about adaptable design then this are a must!

Another resource:

 

http://easy-readers.net/

 

Reasonable price for an e-book, I got my company to buy me a copy.

A lot of it I was already aware of, but if your fairly new to XHTML/CSS, it's well worth a read.

 

I think the other book resource I posted above is probably a better buy - there's an excellent free excerpt that deals with fluid images:

 

http://www.alistapart.com/articles/fluid-images/

Hi Teecee,

 

Welcome to WDF.

 

Whereas I haven't done much in the way of adaptive design yet, I have used JQ mobile before. For me, the choice comes down to the clients requirements as well as a few other factors, but ill get onto that later. If the requirement was, for example to have mobile site completely on brand and basically mirroring their existing site, then using adaptive design makes perfect sense. If a client is going for a simple approach then using an existing framework like JQ mobile is in my view the best solution.

 

Like I say I can see the benefits of using a system like this, but what if you had a complex design which wouldn't easily translate to a smaller screen, for instance a home page with a large banner graphic? Why take up valuable screen real estate showing this graphic to someone on a smartphone? It makes sense to either turn it off or replace it with a smaller version, so perhaps a hybrid which combines the 1140px Grid with the ability to access differing stylesheets based on screen size (like this example by Kevin Hale) would be ideal?

I'm not aware of such a system but if anyone has come across one I'd love to hear about it...

 

If a site has been built well then you should have full control over each element, re-working a complex layout shouldn't be an issue. In regards to the header image, there are many workarounds for this, either don't include it, or use something like jquery to maintain the aspect ratio of the image, that way it is fluid on all screen sizes.

 

I like the idea that a designer only has to design one site - no need for a separate desktop and mobile version - hopefully saving development time and future updating costs.

 

Both JQ mobile and adaptive design have these principles in mind. If your website is database driven, there is no reason why you can't use the existing database to also power the mirco-site, you can then plug in JQ and style the site up accordingly.

 

Adaptive design is not necessarily cost-effective. What if the website is complex and has been built using a fixed structure. It could be very time-consuming to convert these elements into fluid ones, as well as re-test. If you were starting on the website from scratch then it makes sense to build in an adaptive way, if it was a requirement from the client, or could be in the future.

 

So to summarise I guess I'm proposing a system that employs a fluid grid based environment like the 1140px Grid but which also allows the referencing of different stylesheets at different screen sizes and which can turn on and off the use of jQuery Mobile.

 

I'm not to sure what you mean about this? It is possible to use a fluid based design and elements of JQ mobile, but then again, why would you want/need to.

 

I'd just like to close by saying I'm nothing more than average where web design is concerned. It's not my 'day job' and although I've got a fair bit of experience I'd never claim to be knowledgeable on the subject. I've only written this post to provoke a bit of debate about Adaptive Design and the issues involved.

 

I'm not highly skilled when it comes to this either, this is just my two cents. Its always good to hear the opinion of other designers.