Responsive design shiz.

Responsive design shiz. Started by Antechinus · December 16, 2012, 07:25:37 pm · Read 28810 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Responsive design shiz.

December 16, 2012, 07:25:37 pm

Been looking around a bit lately. This thing looks interesting, in part because it's so light. It may be possible to only load all the jQ stuffz for desktops, and just handle phones with this thingy.

http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

http://wickynilliams.github.com/enquire.js/

What would be totally cool is if it could be tweaked to set php conditionals on the basis of media queries. That would be getting in to awesome power territory.

Re: Responsive design shiz.

Reply #1 – December 16, 2012, 09:03:29 pm

Oh check this for scary.

On my current pet guinea pig, just playing around with loading one only mobile css sheet for teh fonez, and a standard sheet for t'others, with an extra sheet only called if the default variant is not set. These are for layout variants, not colour variants.

Antechinus haz done colour variants to death innit

Code: [Select]

	<link rel="stylesheet" media="only screen and (max-width: 900px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 1140px), only screen and (-o-min-device-pixel-ratio: 1.5/1) and (max-width: 1140px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1140px), only screen and (min-device-pixel-ratio: 1.5) and (max-width: 1140px)" type="text/css" href="', $settings['theme_url'], '/style_Mobile.css?116" />
	<link rel="stylesheet" media="only screen and (min-width: 901px), only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 1141px), only screen and (-o-min-device-pixel-ratio: 1.5/1) and (min-width: 1141px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1141px), only screen and (min-device-pixel-ratio: 1.5) and (min-width: 1141px)" type="text/css" href="', $settings['theme_url'], '/style_Standard.css?116" />';
	if ((isset($options['theme_layout'])) && ($options['theme_layout'] != 1))
	echo '
	<link rel="stylesheet" media="only screen and (min-width: 901px), only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 1141px), only screen and (-o-min-device-pixel-ratio: 1.5/1) and (min-width: 1141px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1141px), only screen and (min-device-pixel-ratio: 1.5) and (min-width: 1141px)" type="text/css" href="', $settings['theme_url'], '/style_' , $settings['theme_layout'] , '.css?116" />';

Re: Responsive design shiz.

Reply #2 – December 17, 2012, 03:48:07 am

A nice informative, while basic (and a bit old for the speed of them webz), article on responsive design:
http://www.alistapart.com/articles/responsive-web-design/

Re: Responsive design shiz.

Reply #3 – December 17, 2012, 04:26:03 am

emanuele thinks loadCSSFile needs a param to handle media-like <link> attributes

And maybe loadJavascriptFile too.

Re: Responsive design shiz.

Reply #4 – December 17, 2012, 05:00:30 am

Quote from: Feature – December 17, 2012, 03:48:07 amA nice informative, while basic (and a bit old for the speed of them webz), article on responsive design:
http://www.alistapart.com/articles/responsive-web-design/

Read it ages ago.

Re: Responsive design shiz.

Reply #5 – December 17, 2012, 02:23:30 pm

Quote* emanuele thinks loadCSSFile needs a param to handle media-like <link> attributes
And maybe loadJavascriptFile too.

Spuds rather have a sharp stick in the eye that look at those functions again

Re: Responsive design shiz.

Reply #6 – December 17, 2012, 02:46:27 pm

I'm just playing with stuff at the moment to see what works and what doesn't. Media queries are handy, but one problem I've found is that even if you declare a separate (lighter) mobile stylesheet it is still loaded even when it's not being applied, and ditto for the other (non-mobile) stylesheet(s). So the rules will only work on a tiddly screen, but you're carrying the overhead of loading it all the time. Meh n bollux.

Basically, the problem with media queries is there's no way to grab the output of the query and use it more specifically. If the damned things detected a device capability and then presented you with an output that you could do stuff with, that would be total awesomesauce. You could use it to set PHP conditionals and all sorts of tricks. Unfortunately, they don't do that.

This looks like an interesting trick, although frankly I'm not particualrly rapt about relying on js for this. However, if it's fast and reliable that's really all that matters. Haven't tried it yet.

Re: Responsive design shiz.

Reply #7 – December 17, 2012, 05:58:01 pm

Quote from: Antechinus – December 17, 2012, 02:46:27 pmI'm just playing with stuff at the moment to see what works and what doesn't. Media queries are handy, but one problem I've found is that even if you declare a separate (lighter) mobile stylesheet it is still loaded even when it's not being applied, and ditto for the other (non-mobile) stylesheet(s). So the rules will only work on a tiddly screen, but you're carrying the overhead of loading it all the time. Meh n bollux.

Basically, the problem with media queries is there's no way to grab the output of the query and use it more specifically. If the damned things detected a device capability and then presented you with an output that you could do stuff with, that would be total awesomesauce. You could use it to set PHP conditionals and all sorts of tricks. Unfortunately, they don't do that.

Of course, but they can do that (who's they?

). It's out of the question to load all useless files, with some criteria. Don't worry about it. If we do this, then it will work. (tm)

It's what Emanuele was saying, with loadCSSFile() adapted for media.

Re: Responsive design shiz.

Reply #8 – December 17, 2012, 06:14:57 pm

Ok, but exactly how are you planning to do the adaption? You lot are notorious for nobbling teh themerz.

Re: Responsive design shiz.

Reply #9 – December 17, 2012, 07:26:37 pm

Quote from: Antechinus – December 17, 2012, 06:14:57 pmOk, but exactly how are you planning to do the adaption? You lot are notorious for nobbling teh themerz.

TestMonkey coughs.

We were not planning it. We just found out you wants responsive design.

TestMonkey would like to gently point to the topic start date, which Ant seems to have missed.

Oh wait... he wrote it himself.

Seriously now. Bits of status from my personal perspective: I've been looking a bit into it and for solutions for not supporting browsers. There are tradeoffs. (extra js, timeline). I haven't talked to Brad yet and I don't know anything about his mobile theme. I am not aware that he'd be on the same line of thought with you. To my knowledge, Marcus is a fan of responsive design. I asked Spuds about it Just Now (tm), and I wasn't very successful in saving my butt for it.

I have no "conclusions". Attempted road to "conclusions" from my personal perspective:
I'm willing to do this as long as you folks really want to play with this. I do think it is a better solution for web design. I also suspect (but I don't know) that it might become more understandable and appealing for designers. I just don't know if it is for us now - and that is not up to me, it's up to you.

Ant, are you sure changing structure of files for a new theme is a good thing to do for a reasonable timeline? Does Brad know your intentions? Does your work overlap or duplicate the same thing? I don't know, please understand that, these are honest questions of someone who doesn't know the work and status of you both. Up to you lot to figure things out and what you need from the core for them.

As for "us lot". I know we're mean. (it's in the definition). But. Show what we have to adapt to (what css files), prove that it works - to convert what we have now, too -, and ignore the loading of all files - we can fix that. And, as far as timelines, interest, willingness, estimations and stuff are concerned (beta in March?

), you'll have to convince SpudsMan yerself - I ain't risking it no more.

Re: Responsive design shiz.

Reply #10 – December 17, 2012, 07:31:52 pm

OK. If Brad is still into finishing his stuff up that's fine. TBH I have barely looked at it. I took a few quick looks over at his test site a while back, but haven't been keeping track. I have NFI how the code behind it works or what stage it is at.

Anyway, like I said, I'm trying stuff out on my test theme. Doesn't necessarily have to be duplicated in the default for this software.

However, allowing people to decide which css files they want to call, and under which circumstances, is generally damned good practice. If you remove that it will be a step backwards. IMO. We've always had it in the past. We should keep it.

Re: Responsive design shiz.

Reply #11 – December 17, 2012, 08:44:39 pm

From MSN just now:

QuoteAntechinus teh Awesomesauce says (12:25 PM)

btw I think in a lot of ways, calling layout changes by em makes sense

if someone requres a large text size, their screen is effectively smaller

so layout should be changed to give them better a11y

TBH I think that in practice, things like this are the best use of media queries

not so much for the mobile/desktp divide

that is better dealt with at a more basic level, so mobile only calls what it needs (markup, css and js)

Norv says (12:28 PM)

yes... Makes sense. Within mobile you have again sizes and stuff too, and those are for media queries then

Antechinus teh Awesomesauce says (12:28 PM)

yes

Re: Responsive design shiz.

Reply #12 – December 17, 2012, 08:46:15 pm

Quote from: Antechinus – December 17, 2012, 07:31:52 pmHowever, allowing people to decide which css files they want to call, and under which circumstances, is generally damned good practice. If you remove that it will be a step backwards. IMO. We've always had it in the past. We should keep it.

What bothers me is that we have that loadCSSFile() thing and we're not really using it. At least this... we could do. Because you load whatever .css you wish, by calling it directly in the template, but with this function you could in theory, have more flexibility... take advantage of something like 'load this for me but only if it's needed'. Or rather... 'load this for me, the version for the browser/OS/whatever I'm on'. ('load' = 'insert link to')

Re: Responsive design shiz.

Reply #13 – December 17, 2012, 08:57:27 pm

Ok, but TBH I have never looked at this function so have no idea what it does, or what it could be made to do. So the "in theory" flexibility may be cool, but I want to know how it will work in practice.

I just get a bit suspicious whenever you guys start saying "Oh hey we've got this awesome thing in Sources and......................"

Re: Responsive design shiz.

Reply #14 – December 17, 2012, 08:59:07 pm

LOL fair enough.