Responsive design shiz.

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

Re: Responsive design shiz.

Reply #30 – December 18, 2012, 08:10:09 pm

Quote from: emanuele – December 18, 2012, 06:32:40 pmAnd BTW: how many people are actually using a phone to type a post in a forum?

I don't post too ofter with the phone, but I do, and I do use it a lot to keep up to date and do any moderation things that need to be done. I use the smf4mobile theme, although I use my own mobile detection stuffz for auto switching to the mobile theme (profile option as well). And I get the jquery mobile stuff from cdn as well, lots of sites are using that so it usually cached away.

Re: Responsive design shiz.

Reply #31 – December 18, 2012, 08:17:32 pm

Quote from: emanuele – December 18, 2012, 06:32:40 pm
Quote from: TestMonkey – December 18, 2012, 06:14:40 pm>> Do we need to redesign the web every time Apple releases a new device?
(comment somewhere on iPhone and Retina displays)
QFTW!

And BTW: how many people are actually using a phone to type a post in a forum?

http://www.spudsdesign.com/dialogo/index.php?topic=49.msg334#msg334

Re: Responsive design shiz.

Reply #32 – December 19, 2012, 02:58:07 am

It was just an ebook reader...

Re: Responsive design shiz.

Reply #33 – December 19, 2012, 04:44:02 pm

Quote from: Spuds – December 18, 2012, 08:10:09 pm
Quote from: emanuele – December 18, 2012, 06:32:40 pmAnd BTW: how many people are actually using a phone to type a post in a forum?
I don't post too ofter with the phone, but I do, and I do use it a lot to keep up to date and do any moderation things that need to be done. I use the smf4mobile theme, although I use my own mobile detection stuffz for auto switching to the mobile theme (profile option as well). And I get the jquery mobile stuff from cdn as well, lots of sites are using that so it usually cached away.

I was going to disable admin on mobile simply because wireless network sare so insceure.

Re: Responsive design shiz.

Reply #34 – December 23, 2012, 01:50:50 am

BTW, this is how far I've got with my non-jQuery 1.1.x guinea pig. Works everywhere except for some of the more obscure pages. All the usual thread and PM stuff fits and works. It just uses a ['browser']['is_touchscreen'] detector thingy to switch chunks of markup, along with some css tweaks n stuff.

Oh yeah, it runs full Tiny Portal shiz too. The nutters wanted it all, so that's what they got.

Re: Responsive design shiz.

Reply #35 – December 23, 2012, 02:03:11 am

Looks interesting! Much better than the current experience to browse this site on Opera Mini.

Re: Responsive design shiz.

Reply #36 – December 23, 2012, 02:08:54 am

Yeah I thought I'd it without any jQuery, just because I was only using jQ for some fancy stuff for desktop anyway, so it was easy to do without for little buggers. Might still make some things more compact, but that will depend on who grumbles about what.

Re: Responsive design shiz.

Reply #37 – December 23, 2012, 05:24:02 am

To be honest that looks better than any other I've used, including tapatalk nonsense.

Re: Responsive design shiz.

Reply #38 – December 24, 2012, 12:22:09 am

Dumb *** at Android have gone and made their use of selects impossible. Can have them working perfectly on desktop but they'll be borked in Android. Beats me why the idiots don't make click on a select option work just like click on a normal link. FFS. This is back to IE6 days.

ETA: Have decided that I'm just going to load jQuery for everyone, and use it to convert the hover drops to click drops on touchscreen. Less code for me to write. Same markup as hover, very little extra css. If anyone doesn't like it, they can complain to Android.

Re: Responsive design shiz.

Reply #39 – December 27, 2012, 09:02:12 pm

Hey looky: this is what I did after I stopped grumbling about Android.

Re: Responsive design shiz.

Reply #40 – February 18, 2013, 07:42:55 pm

BTW, this thing has been streamlined a bit more over the past month or so. I ended up using a rather nifty trick on it. Being 1.1.x, it uses the same variant changing code that most 1.1.x themes use.

I've never bothered to try and figure out why, but these codes always seem to use something that has both $settings['theme_layout'] and $options['theme_layout'] instead of just one or the other. $options['theme_layout'] is, of course, the one stored in the member's profile. $settings['theme_layout'] is just used in some places in the templates, but $options['theme_layout'] is used a lot in the templates too.

What I've done is replace most instances of $options['theme_layout'] in the templates with $settings['theme_layout']. What this does is allow calling the mobile stylesheet and markup on the basis of $settings['theme_layout'] without altering the $options['theme_layout'] that is set in profile.

This means that I can use the one theme for all, and still have auto detection of mobile (with appropriate content and presentation fed to it) while still keeping the member's preferred layout option when they log in from their regular pooter.

Works like this:

Code: [Select]

	// Any layout set by user?
	if (isset($options['theme_layout']))
	{
		($context['browser']['is_mobile']) ? ($settings['theme_layout'] = 'Mobile') : ($settings['theme_layout'] = $options['theme_layout']);
	}

	// If not set, or if not allowed to set
	if(!isset($options['theme_layout']) || (isset($settings['allow_layout_change']) && $settings['allow_layout_change'] == 'no'))
	{
		// Defaults.
		($context['browser']['is_mobile']) ? ($options['theme_layout'] = 'Mobile') : ($options['theme_layout'] = isset($settings['theme_layout']) ? $settings['theme_layout'] : 'Standard');
		$settings['theme_layout'] = $options['theme_layout'];
	}

I'm quite chuffed with it. It's more versatile than the 2.0.x/2.1/whatever theme variant system, and actually requires less code to run it, because there's bugger all in Sources apart from the mobile detection in the browser array. All I'm doing is calling the mobile stylesheet instead of the others, and using a few php ($context['browser']['is_mobile']) ? conditionals to drop unnecessary markup/js/etc on mobile, in large chunks with minimal checking.