Responsive Webdesign

Chris Lord

Senior Member
I've been researching a lot into responsive web design recently for a project that I'm working on at the minute. I was wondering what other peoples views are on it, or if they've worked on any sites using this approach? Is it another band wagon gimmick or is it the future?!
 
more than likely it's the future as mobile browsing is becoming a lot more common.

I may look at it next year but I'm just going with a 'mobile' site for now :)
 
It's pretty interesting and in my mind, I have no doubt that it will become ever more prevalent for each webdesign project. A mobile site is a good start, though one of the disadvantages is maintaining two websites, then the issues with tablets!
 
There are a few approachs that I have come across, some I like, some I hate.

I've seen HTML5 and CSS3 approachs and I've seen jQuery approaches, I prefer the HTML5 route as it is more stable and one well written style sheet should do it, but it is not widely supported yet. Don't get me wrong, with a forward thinking client, you could be laughing, but you might have to create a second non HTML5 site for older browser.

jQuery, its not as cool as some of the dynamic resizing that can happen with the HTML5 route, but it is more stable across older browsers.

I keep thinking that an awesome HTML site and a jQuery mobile site is the best route, but that takes more time.

Have you looked into jQuery mobile yet?

The biggest problem we have encountered with our clients is selling it as an approach. Most of them just don't care! They don't see the point in spending the extra money and often prefer the idea of a site that looks the same across the board, I realise it is my job to sell it to them, but we all know how it is.

Our contract is current and previous 2 browsers, so we have agreed that we aren't going to really start working towards fully responsive until the browser math is in our favour.
 
Hey Chris/ MrP,
I have been looking at this in depth very recently, and I think there are a few considerations to make, but in a nut shell I would suggest responsive web design is the way forward, but not yet, well not at least until technology is better placed at serving web assets (imagery/video/content) on a device by device & resolution basis.

The second point about responsive webdesign, is even if you forego the conditions of desktop assets being delivered to mobile devices, is pre planning of the projects architecture, for simple sites this isnt a problem, but try planning a website as complex as say the BBC/NASA, which would need to react to differing resolutions and devices, based upon a stylesheet is not practical.

Where a more practical and maintainable solution is to serve a separate template and style sheet with device/res dependent assets served based upon device sniffing. A good source of information on this would be http://wapple.net/

I hope this helps?
 
I think your last point MRP is probably the right approach.

I haven't looked into mobile jquery no! But I can guess that I'm going too...

In regards to selling it, obviously they have to have a budget that will allow, so there's the first hurdle! If you can sell them the idea of a mobile site, then you should be able to persuade them into consolidating their websites into one responsive one.

The whole logistics is very interesting, even if I don't understand a lot of it! A big problem seems to fit both pixel width, but also sizing the text correctly for different resolutions. So using ems to measure fonts instead of pixels.

A few useful tools for testing and sizing are:
Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions
Responsive Design Testing

Both could be improved and elaborated on though, but could for a jist.

What pixel width in stages would you 'redesign' for? 1024 - 800, 800 540, 540 - 300 etc...
 
I made my site responsive to a degree, its not fully fluid due to my images being a fixed width.

A few years ago there was a battle between designing for 800*600 and 1024*768 - Now that people are viewing the same site on their phone, their 20" imac and their 50" TV its definately not a gimmick.

You cant expect the user experience to be the same on each device.
 
Chris Lord said:
I haven't looked into mobile jquery no! But I can guess that I'm going too...

The plus of jQuery mobile, combined with HTML5 and CSS3 is you can make apps with it. It doesn't quite reach the level you might expect using native language, like a lot of the swipes and pinches aren't reliable, but if you've got an info based app, it is great.
 
This thread had quickly gotten buried!

Sounds interesting MRP! Have you been working on projects with this or just researching into it?

I think there are image fixes br3n, but I'm not sure on how effective and supported they are at the moment.
 
How do you mean image fixes?

You can make pretty much every element responsive, for images you can use img{max-width: 100%;}. But I didnt :)
 
To be honest I'm not a developer so I couldn't give you the proper code, I just try and remember what I've read... But not very well. I remember reading about a fix to do with loading just one image and having a variable that loads the image at the correct size based on the set Media Query... Or something like that!
 
Chris Lord said:
Sounds interesting MRP! Have you been working on projects with this or just researching into it?

We've got an android app ready frame work built and just waiting on content to get finished. We built the same app on iPhone in Titanium (javascript fed app developing platform), but there is some inconsistency in the handsets built on android, pinches and things like that, so we built the android version in HTML5 and just used some creative design shortcuts.

We've got a full mobile site in the pipeline, in conjunction with main site, but I can't talk about that at length until launch.

The main site is just too heavy on the design elements to work effectively on a mobile screen.
 
Sounds good, make sure you let us know when it's up!

An issue I'm fighting with at the minute with a responsive layout is around the navigation. The sites we're working on have quite a lot of navigation and the designs use a variation of lists down the side and across the width. This is fine on a normal browser, with a width of between 800-1000.

An iPad portrait width is 768 px wide, so with this, the navigation and layout need changing slightly in a 'responsive way'. The most logical solution for this project is to put the navigation into a drop down menu, which is fine. But then when the user turns their iPad to landscape, the width reverts to a 1048 wide, and with a responsive layout, takes the user to a normal desktop view. I'm wondering how confusing this would be for the navigation and layout to slightly change when they go between the two ways of viewing?! Any opinions or views? (apart from minimising the change!)
 
Chris Lord said:
To be honest I'm not a developer so I couldn't give you the proper code, I just try and remember what I've read... But not very well. I remember reading about a fix to do with loading just one image and having a variable that loads the image at the correct size based on the set Media Query... Or something like that!

Chris you dont even need the media query - you can literally just use max-width 100% and it'll scale to whatever is containing it, so as long as thats fluid/responsive

Needs a fix for IE but its pretty widely used. Another option would be to have a selection of different size images and use a media query to apply them - saves loading a big image and sizing it up/down more than necersary.
 
Personally I can't wait for proper 3D pop out of screen effects to arrive, they will and then the web will truly open up. Its still so 90's at the min. :cry:
 
Back
Top