Template for mobile access

[konus]

Hello, at the moment, I am a happy user of the bulletproof template. After getting an smartphone (Palm/HP Pre+), I found out, that my website is not really readable with mobile devices.

So my question is, how I could this change. Are there any plans to enhance bulletproof to work better with mobile devices? Are there any concepts to change it manually with user.css?

[yellowled]

Are there any plans to enhance bulletproof to work better with mobile devices? Are there any concepts to change it manually with user.css?

There are no plans to enhance BP at all, at least not on my end. I feel it is an outdated concept which should be replaced by a new default theme soon. (Yes, we're at it, but it takes time.)

As for "mobile versions", there are basically two ways to tackle this:

1. The mobile output plugin delivers a special template for mobile browsers. It works by detecting the UA string of the browser, which might or might not work depending on whether the plugins browser db does "know" the actual UA.

2. Use a responsive web design for your template. See my blog or the S9y InfoCamp for a live example.

I am a huge fan of RWD, but it's not exactly trivial to implement, especially not as a template. I guess you could add it on to BP via the user.css, but not as a generic solution for any layout BP provides or any blog that uses BP. That's because RWD is really hard to implement as a generic template overall, but it will be much harder to do that with BP because of all the options. Also, RWD usually requires a fluid base layout, which could or could not be the case in BP use cases.

I guess it is beyond time for a responsive template for s9y, but unfortunately, I just don't have the spare time to slap one out right now.

YL

[konus]

I am not that centered on BP. I just got used to it because of it's clean layout and the great flexibility. Is there any template with responsive web design available for s9y yet?

Yes, I have seen your blog, it looks pretty good on my device. Unfortunately the code looks very sophisticated to me and I use much more images than you.

Since the use of mobile devices are more and more common (even I have a smartphone now) and is finally affordable, I would really appreciate if s9y would be pushing toward this direction.

I am not able to code, but I would happily support this development with testing, debugging and donating So how to start?

[konus]

I prefer to let the user choose over to patronize him and make all decisions for him.

Maybe a first step could be to offer a separate (RWD-)Template for mobile devices and to insert a link in the normal template to let the user choose the mobile-version manually?. On the mobile version there could be a link back to the normal version.

With the use of serendipity_event_mobile_output (without the outdated sniffing part) there is already the possibility to offer two different templates of the same blog. What do you think?

[yellowled]

Is there any template with responsive web design available for s9y yet?

No, at least not available for public use. I have done a responsive design for Robert Lender's blog as well as the aforementioned two, but these are very customized to the specific blogs. They're not really suited for a public release.

Unfortunately the code looks very sophisticated to me and I use much more images than you.

Probably because it's HTML5, but that's not actually a requirement for a responsive design. Images are an issue, yes. See my article on that topic (for other readers: German only, sorry).

I would really appreciate if s9y would be pushing toward this direction.

As I hinted earlier, this is not as easy as it sounds. A responsive design is rather simple to implement for an individual site, but a template has different requirements if it's supposed to be robust. Just think of all the plugins to be considered.

Maybe a first step could be to offer a separate (RWD-)Template for mobile devices and to insert a link in the normal template to let the user choose the mobile-version manually?. On the mobile version there could be a link back to the normal version.

See, that's not how it works.

Responsive web design does not provide special templates for smaller screens or a "mobile version". It is basically a fluid layout (normally, but it can also be done using fixed widths) which at certain "breaking points" is modified to fit the smaller screen using just CSS. There is no "normal version" to switch to, which is kind of the beauty of it.

I am aware that many s9y users would love a universal responsive template, in fact I have been asked about it more than once. It is, as always with community work, a matter of spare time. Right now, my spare time for community work is more geared towards new frontend and backend templates for future versions. I feel this is the best way to help s9y right now.

I'll see what I can do in terms of a universal responsive template, but if I find the time to do it, it will be rather basic and probably require quite some tweaking by users.

YL

[konus]

See, that's not how it works.

I think, I got that point.

On the practical side, I would like to consider several points.
1. at the moment there is no universal template with fits all, Images does makes it even worse.
2. on a mobile version only (and if the user is able to switch to the desktop version), it would be much more acceptable that not all options/plugins are supported
3. making bulletproof working with mobile devices is not an good option.

So it would not be the correct way like it was supposed to be, but how about starting with a new mobile-only template, getting used to the new technology, collect some experiences and maybe plan to enhance it later for desktop use?
This way, it would not be necessary to solve all problems and think of all plugins and possible configurations at once...

[yellowled]

1. at the moment there is no universal template with fits all, Images does makes it even worse.

With images, it really depends. One solution we currently have is not ideal since it's not exactly trivial to implement (the .htaccess one), the other one is based on CSS/JS only. It's not perfect, especially when you're dealing with huge images. BTW, since it's not about background images, but about images within you content: as long as you insert thumbnail images generated by the s9y media db, you should be good to go even without a CSS/JS fix. And said fix is really simple.

2. on a mobile version only (and if the user is able to switch to the desktop version), it would be much more acceptable that not all options/plugins are supported

It's not so much about supporting options or plugins -- in a responsive design -- it's more about checking all possible cases and providing a suitable layout and styling for them. This is especially difficult for a blog system since it's way harder to predict potential use cases than in a normal template. (Then again, you can test everything anyway.)

The mobile template provided by the plugin reduce a blog significantly, i.e. they usually remove any sidebars.

3. making bulletproof working with mobile devices is not an good option.

I'm not saying it's impossible, much rather that it'd be a lot of work which I feel is not worth putting into BP, at least not as a generic, universal add-on.

starting with a new mobile-only template, getting used to the new technology, collect some experiences and maybe plan to enhance it later for desktop use?

That's the common approach for mobile-friendly websites anyway: "mobile first".

YL