Mobile theme themes

Hi,

Just wondering about best practice and peoples opinion really as I imagin it’s not a popular scenario and I can’t find much on the subject. I have 5 sites currently, which I’m rewriting in Yii. They’re all extremely similar at the minute and I’m creating them as themes on top of a main “skeletal” application, so the CSS, JS, images and some views override the main source.

This is all well and good, but I need mobile versions of these sites. This is essentially another theme, as it will do the same again, but my question is:

What’s the best way to provide mobile views, layouts and scripts that override the default ones (like a theme) without repeating all of them 5 times for the 5 mobile themes of the sites.

Thought number one passed through my mind, and was immedietly thrown out for the headaches it might cause later. To symlink 4 of them to one main on. This could get very awkward though, as when I do actually want to override something in a specific mobile theme, and not mobile wide, I can’t without directory structure changes :S.

Idea number two is to provide mobile views along side standard ones, this fits with the normal view and layout model and provides a good structure for overriding with themes. However, the code ends up being filled with:

If (mobile)

   viewName = 'mobile-product'

else

   viewName = 'product'

Which again will be harder to maintain in the long run.

Thought three is the greatest and best, it is however, as far as I can see, not possible. Theme inheritance would solve my problem, if themes could be specified as $theme = ‘normaltheme.subtheme’ (parent.child) not a path alias) and apply the same overriding rules to this, just recursively, it would appear to solve everything.

If anybody has any other solutions I’d love to here them as I can predict a world of headaches with implementing this. If not, i’m going to give it a go over the next few days and may even submit it as a feature if it’s solid enough.

Thanks

Google ‘responsive web design’, browse Twitter for #RWD …

It is the latest craze these days.

Check out http://www.zurb.com/...nt-work-anymore

and their web framework Foundation:

http://foundation.zurb.com/

Ethan Marcotte is a name you will encounter as he coined the term ‘responsive web design’ - he literally wrote the book on it.

Andy Clarke is also another major player.

He wrote ‘Hardboiled Web Design’:

http://hardboiledwebdesign.com/

Which basically (hard)boils down to this:

‘Don’t expect websites to look the same across all browsers. Design for the best and let it gracefully degrade, instead of trying to compromise on the lowest common denominator.’

You can probably find a talk or two with Clarke. Recommended.

This is a dedicated Mobile framework made for modern HTML5:

http://www.lungojs.com/

Worth checking out too.

Personally, I use Sass/Compass through my custom version of 320up:

http://www.stuffandnonsense.co.uk/blog/about/320_and_up

What I am trying to say is:

What is ‘mobile’ ?

iPad, iPhone, *droid, large desktops, small desktops, …

One site can serve all that.

A common trend now is to serve the smallest resolution first, and then go up by means of media queries (css3) to larger resolutions.

I find it works great in practice.

<edit>

Read this too:

http://interfacethis…html5-part-one/

</edit>

And here’s Boston Globe:

http://bostonglobe.com/

The first real-world responsive web site.

Resize your browser to see it happen…

<another_edit>

HTML5 Boilerplate is another thing to Google for.

And the HTML5 Mobile Boilerplate sister project…

Hi,

Appreciate the reply and info, but it’s really not that relevant. If I was designing from the ground up and also responsible for the design it would be great, it would scale down to devices as they come along. But I happen to be rebuilding the entire site keeping the “desktop” design exactly the same and building a mobile version from scratch. The design of the desktop version it’s self doesn’t lend well to anything below 900px wide on most pages, so we’ve opted for a web app (jQuery Mobile) feel as the scaling would be way too much work to port all the functionality across at once. This obviously subverts any “flexy” designs and also means the design process is straight forward; as it’s handled by graphic designers and layers of bureaucracy.

Just to be clear, even in the relatively meaningless sense of the term this is a “Web 1.0” site. It’s basic design principles with the functionality being ported over into a mobile platform. Yii helps a great deal because of the structure, it means we only have to overwrite the layout and css and keep the same url stuctures and all. It’s just the theme structure that I’m struggling with.

Thanks

It’s actually highly relevant.

Create a media query for min-width 800px and put your existing styles in it.

Then create styles for smaller screens.

If you do it properly, you would end up with a site which works on devices ranging from 320px (smart phones), via iPads to full resolution (over 800px).

You don’t have to switch to another web design framework, just use media queries.

If you follow that advice you won’t have to create and maintain different themes.

Of course, if you want to cater for mobile, then you could create a mobile app instead.

It’s more work…

I can appreciate the value of having it flexible and for 80% of the site it would be perfect, just scale the elements down move functionality in to hidden menus and other pages. Except that the only way to conform to the designs I’ve been given using this method would be lots of wasteful "display: none"s on large portions of every page .

They’ve designed an “application” look for the website, header bar navigation and all. Plus they want to omit many of the features to cut down on development time to get it looking right (many, many revisions ) so there’s still the issue of overriding views in a nice way, to remove certain functionality and to change the structure of data.

I’ll definitely explore this tomorrow however, prototyping and presenting never hurts …much

Are you using a grid?

If you are, then it’s fairly easy to rewrite the grid per media query.

I use Sass/Compass and Susy to create a different grid for each transition.

That way I can control the flow of the elements and I don’t need toggle visibility (much).

Skeleton is a good alternative:

http://getskeleton.com/

By the way, check this topic out:

http://www.yiiframew…-self-rejected/

If you are worried about lots of display hide/show, then Foundation from Zurb does have handy classes which auto-toggles elements:

http://foundation.zurb.com/docs/layout.php

Alright, I’ll stop blabbering.

But the bottom-line is:

Please do look into this.

You are future-proofing yourself.

OK thanks, once I’ve had some fun with it I’ll post in your other topic about switching it for blueprint.

The problem I see is that you use standardized CSS frameworks to create clean standard code, future-proof designs that scale well and all round better usability…that’s just not what designers always want then it gets messy making workarounds. So I’ll see how it goes.

For the short term though:

Can anyone provide a hint or opinion on theme inheritance? Even outside of my use case it would be very useful IMO.

If you are using Blueprint already, it’s really easy to switch to responsive using Sass/Compass as Blueprint is built right into Compass as a module.

I’ve used that and it’s great.

And less work for a Blueprint-using Yii-user.

Can’t comment on theme inheritance though…

To be honest, I am using my own personalized (and messy) code.

You don’t even have to use a grid to be ‘responsive’.

At the very basic level, it’s media queries and/or javascript detect scripts.

Check out http://css-tricks.com/ - resize to see some really cool transitions.

Okay. I promised to stop.

Hi, just an update.

I’ve switched from jQuery Mobile to a 320andUp based method to test, using stages of width and reworking major layout sections or just hiding them all together. Everything is going fairly well so far, it certainly looks better in the middle ground between below 480 and 1000px wide and gives a lot more flexibility in layout for the different size.

I’m still not entirely convinced about the efficiency of it, by design, it still sends the whole HTML page whether your on a mobile or desktop as it only relies on screen width. This can obviously be overridden by checking for mobile but I’d rather not go that route as a mobile on WiFi vs a Laptop on 3g completely breaks this rule of mobile being slower. In a perfect all our content should be easily adaptable for mobile and therefore not a waste to send down, and as yet this remains true, but I don’t have a lot of faith it’ll stay that way and could get quite wasteful.

Flexibility in JavaScript is also a bit of an issue, obviously there’s plenty we can do in terms of designing for features rather than platform, but its a huge step down from jQuery Mobile and I’ll be exploring some other JavaScript solutions.

Thanks for the suggestion jacmoe it’s working out well so far.

Cool that it works out for you!

Check out this article:

http://24ways.org/20...ponsive-designs

as well as this:

http://24ways.org/20...ponsive-designs

This is still a wet paint technology - no one really knows the answers yet.

Very nice links, especially the adaptive images. I will definitely be using that method for some of our very image heavy pages. I have a very high mobile hit rate and some very image heavy pages with large resolutions so this will be perfect. I’d never though of setting a cookie value with the page width to generate images from.

And yes I’m still trailing it and as most of it’s front end code, it’s not going to be a major re-work to abandon this method should it turn out to be in the way of progress further down the line.

Thanks