Open Discussion - Separate content versus CSS for mobile sites

This post is more than 2 years old.

This is a topic I've kinda covered here before, and it is certainly a topic I think will have many different opinions (and will change over time), but what do people think about the question below?

Can you recommend a best approach or best practice for developing a website for multiple devices? Should I try to detect screen sizes and basically have two or three sets of pages each dedicated to a range of display sizes. Or should I instead use the CSS approach? I predict that prevailing wisdom with say CSS but I tend to want to use the first approach.

Personally my gut tells me that while CSS allows us to gracefully handle desktop versus mobile (at least sometimes), it doesn't always make sense for a mobile site to mimic a desktop site. For example, a RIA like a site administrator might not make sense to have 1-1 feature equality on mobile. There are some tasks I can't imagine needing or wanting to do on a mobile device. So I'd rather the mobile application focus on a subset of things that make sense to do on a phone versus trying to fit everything in. On the flip side, I fully expect simple content sites, like blogs, to have the same feature set on desktop versus mobile.

In other words - I would not automatically try to force the exact same site onto other devices - possible or not.

Thoughts?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Daniel Sellers posted on 11/7/2011 at 8:17 PM

A good place to start is with Ethan Marcotte's Responsive Design http://www.abookapart.com/p...

This is really a complicated question, and the answer is it depends. Ray your totally right that a 1 to 1 for an admin panel is probably the wrong approach. Barring that though you shouldn't cripple the functionality of the site. I had to leave the mobile version of this site to leave this comment, as an example.

CSS is the way to go in my mind. Hide the content that doesn't make sense and rearrange gracefully the content that does. I hate, hate, hate being redirected to a mobile.somedomain.com unless they are really amazing.

Comment 2 by Raymond Camden posted on 11/7/2011 at 8:20 PM

I don't mind being redirected -if- they allow a way out. I _hate_ visiting Gawker blogs on a mobile device. They think my 10 inch Xoom tablet is the same as my small phone.

Comment 3 by Dave Ferguson posted on 11/7/2011 at 8:32 PM

Great topic for discussion Ray. I might "borrow" the idea and talk about it on CFHour.

Being someone who has created all types of sites I have some personal insite on his. I have worked this from a few angles.

I have worked with media queries to create a site who's layout changed by device / screen size. I have also created mobile specific versions of sites. I have created sites where mobile viewing was not considered.

Working on the media queries site was, in a word, difficult. Yea, if I were a css guru it probably wouldn't have been as hard but there was still a lot of work to do. For instance everything had to be a css class. Painstaking detail had to be taken to make sure that all sections of the site loaded and worked perfectly across all desired screen sizes. Also, I have heard media queries referred to as "fools gold" in reference to how it handles image loading.

Creating a mobile version of a site has it's challenges as well. First you have to decide what functionality you want on your mobile site vs what makes sense. For example if you want your site to work on iOS the flash is out. The form factor is also smaller so you have less visible space to pack information. Then the navigation, oh the crazy navigation. Thankfully there are mobile frameworks (jQuery Mobile, Sencha Touch) to help with a lot of it.

The site that does not concern it self with mobile layout may wish they had. If it is a consumer site there should be some care taken to have a mobile version of something. At the very least make sure it at least loads on a mobile device. If it is not consumer based and an in house app you have to remember that many employees are now more connected then ever. Allowing them to work anywhere is a big plus.

In the end I think it all boils down to what you want the user experience to be. Do what makes sense for your users and your market. For me personally, I think that a site built for the target screen is a better experience. Trying to shoehorn a site not built for mobile into a mobile environment probably won't run the best or be optimized for it.

My 2 Cents...

--Dave

Comment 4 by John Pullam posted on 11/7/2011 at 8:36 PM

Jakob Nielsen has written a ton of good stuff on usability and most recently on mobile phones and tablets. Bottom line he says for mobile, if in doubt, leave it out. I suggest that those interested take a look at his website: http://www.useit.com/alertbox/

Comment 5 by Doug posted on 11/7/2011 at 8:57 PM

I have to second John's link. Nielsen's reports on Mobile usability have been very well researched.

My impression is that mobile sites really must differ drastically from desktop sites because mobile users are not just expecting a different experience but even different content.

Also, per Ray's comment about some sites treating 10 inch device the same as a small phone, Nielsen also mentions that too. Apparently in their studies most large device users use their device more like a desktop than like a mobile device. My guess is that you'll be using the small phones while you're stuck on a subway so you want short-instant gratification content, while the larger devices you'll be doing more in-depth activities, like on a desktop.

Comment 6 by Tyson posted on 11/7/2011 at 8:57 PM

In a lot of cases it doesn't make sense to offer all the same features/content on a mobile device. With media queries you could hide the extra content, but it would all still be downloaded to the client.

In my case, I have the desktop site already built. My plan is to redirect small screen clients to a mobile version of the site (with an option to switch back to the desktop version, of course). I'm using fw/1 as my CF framework, so if they're on a phone I'll just changing the view & layout that gets displayed.

Our desktop version actually doesn't work too bad on a tablet, so this is a case where I may just try and tweak it w/ media queries. Of course, I haven't actually worked with media queries before so this may not work out as well as I'd like.

Comment 7 by Mike posted on 11/7/2011 at 9:12 PM

I am going through the same types of questions right now and the css vs different page topic comes up all the time. I am more on the side of a having a different site or agent variables to tell the page how / what to render for the device.

I think it defeats the purpose of having a mobile view if all you are doing is hiding some of the other content but the page is still downloading that data

Comment 8 by John Whish posted on 11/8/2011 at 1:16 AM

As someone who is not a CSS expert, I found that using CSS grid frameworks which support responsive design incredibly useful. There are two that I've used: http://getskeleton.com/ and http://www.columnal.com/. They are slightly different to use but both pretty easy to get started with. I really liked working with Skeleton CSS.

Recently I've been looking at http://foundation.zurb.com/ which is another grid based CSS framework, but it also has some default styling built in if you want RAD with CSS.

I hope that's useful :)

Comment 9 by Robert Tobys posted on 11/8/2011 at 4:33 AM

I would have to agree with Dave Ferguson's last paragraph. It really depends on quite a few things such as industry, target audience and general user experience.

Like Dave, I too have created both and have found developing RWD sites takes twice as long. However, having to only edit content in one CMS saves a lot of time. Works great for my website and for many of my clients.

Comment 10 by Leigh posted on 11/9/2011 at 7:46 AM

my CSS framework would depend on my goals of the site/project. I am currently using jQuery mobile as i feel its best platform web app architecture that fits my ability to create (with some customisation).

I don't have an android device to test on, so i'm basing my design on iOS with the hope jQuery mobile is taking care of the rest for Andriod users.

If i had the time i might make a version for each platform, but that is even more hours of work.

Ray (thanks ray) has recently taught me PhoneGap so i have moved from web apps to phonegap as I was creating basically the same 'app'. Now i can access native features although i have to re-create my data access into proper components (i suck at cfc's).

At this point i can now go buy an android device to test on an have awesome native apps through phonegap on both iOS and android.

I agree with all the above points on functionality.

I believe a mobile web app/native app has a different purpose than your main site and should contain features specific to the device usage.

Another point: I have an ecommerce site. I can't offer ecommerce sales through an iOS app due to the 30% apple tax, i'd make no money.. so i want to create a web app free of app tax. I would build for iOS initially (knowing customer base use iPhone to order already).

i'm definitely having alot of fun with mobile

Comment 11 by Jason Fisher posted on 11/9/2011 at 8:08 PM

Since some people have turned to Flash to be a cross-platform solution, @Ray, any insight into this?

http://blogs.computerworld....

Can't tell if it's true or not, although I suspect it may be another "X is dead", overblown issue.

Comment 12 by Raymond Camden posted on 11/9/2011 at 8:10 PM

Right now I'm just sharing this URL:

http://blogs.adobe.com/conv...

Big day - so I'm being quiet and digesting things myself.

Comment 13 by billy bob posted on 11/23/2011 at 1:37 AM

Gotta go w/ Daniel Sellers on this one.

I ahte when I am forced over to the mobile version simply because I'm on a phone and it's reading the specs upon page load.

Many times over the mobile version is a light and watered down version of the main Site.

The flip side again is that the mobile version does not need and/ or cannot handle the extra fluff and content (there is no reason for it).

The Responsive Design approach lends to a nice solution. One aspect that I like is that you can build out a full page for the desktop w/ all sorts of extra fluff and junk on it - but then as the same page is reszied down to fit for a mobile device the extra and unneeded content elements are removed and hidden (and possibly not loaded) based simply on screen-width.

I have just recently discovered a few articles on the "responsive design" concept (even tho it does not entirely seem to be a new technique) just a new approach as was AJAX - and have had very little play time with testing the limits and capabilities out. Finding drawbacks - etc.... So we'll see how it goes.

Looks promising and if it keeps me from having to use detect scripts - maintaining an ongoing list of devices and building out several versions of the same website - then I'm in favor of it.

Comment 14 by Kevin Powell posted on 11/23/2011 at 9:19 PM

Regardless of the approach you take, make sure you're putting your user experience first. Your site and its experiences should point back to the same message regardless of the device you're using. Don't get lost in the implementation of "mobile" vs. "desktop" and the land of "mobile first," media queries, and user-agent detection. Put your experience first and the right solution will present itself. I go into this in more detail here: http://underthebedstudios.c...