In v5 b2evo will detect mobile devices and use a different skin adapted for small screen (see the Touch skin in v5)

Hi, I'm using the Asevo skin and wanted to make its design more responsive. From what you've written here, it seems b2evo should already be responding, but when I look at my blog on a small screen, that's not the case.

If this is not supposed to work automatically, in what place would I call bootstrap if I want to load its stylesheet before I load Asevo's?

Thanks,

David

There's a default bootstrap theme in 5.x.

OTOH, I am working on something that will work on 5.x- 4.x and ideally 3.x series.

@drherz as @tilqicom said, there is a bootstrap skin (http://skins.b2evolution.net/bootstrap-skin) built-in the latest releases (starting with 5.1.1). It's based on Bootstrap 3 and supports the responsive features of that framework.

However, what @fplanque mentioned above was a different approach that is fully implemented and distributed in the b2evolution packages since a long time ago. The capability to assign different skins to the same blog and present it to the users according their devices (http://b2evolution.net/man/skins-for-this-blog).

Regards!

I've custom coded my sites to be responsive. It's not that hard. Get yourself the Web Developer plugin for Firefox or Chrome, and you can use it to test/view your responsiveness. This article has info about how to create stylesheets aimed at mobile/tablet.
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

The biggest problem I had is that there's no way to easily test on multiple devices so I just built them as best I could based on the browser plugin and whatever devices I own myself. The other thing is just to think about how you streamline your content in a more vertical manner, and how to display your menu. I've found a drop-down list to be best.

Also, you can add in gestures:
http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html

I appreciate the help and the feedback. Using the bootstrap theme works, but I am wondering why the handful of themes available haven't all been made similarly responsive. I went with b2evo a few years ago because it was supposedly so robust and powerful, but I still haven't figured out how to use it to my satisfaction. If I can't use it, all that power isn't worth a lot.

As I said, I went with the bootstrap theme, but I like Asevo's color scheme better. So I went into bootstrap's style sheets to see if I couldn't change the heading colors at least. First, I couldn't navigate the stylesheet, 250 lines of coding (if using the coding style of style.less) was placed on one line. But then there was no code for the heading colors. I tried to add one, but it didn't help. I suppose there is a lot I don't know, and if I don't edit the bootstrap classes, an edit of the headings will make no difference.

So I've been trying, at times furiously, to learn enough coding to add some of the features I'd like, but haven't come close to the level necessary to create even a few simple forms and collect the data I'd like, or create the custom opt-in box I'd like, or float the social media icons I'd like to have available, or set up the payment facilities.

In all this, I am finding I am much more of a design person than I am a coding person. Inside this, I have a bunch of concerns with this platform:

1, Mr. Planque's suggestion above of three skins. The seems a kind of fumbling way to do what bootstrap is designed to help do, but what can be done without bootstrap as well. Unless b2evolution has some way to divine screen size that a bit of javascript code can't, the three skins would just be styling alternates available based on detected screen size in a responsive style sheet.
2. The suggestion to use the Touch Skin, even if it worked - which it didn't for me - is just so out of touch with good design principles that it is laughable. A brand should be obvious and recognizable no matter the size of screen.
3. I am advising others on the design of their sites. For all that's here, I just can't, given my experience to date, set them up on b2evo unless they've got a professional coder on board, and that's just not how most people start.

So I am considering teaming up with a front-end coder, but that is not what most people starting a blog are ready to do.

And now I don't know why I've spent a few hours writing this rant - other things came up; I tried out some of the suggestions along the way as well - except maybe to suggest that if some fundamental shift toward user friendliness would occur, it could make a big difference in the future growth of this platform, and that goes for the back-end as well.

All my best,

David R. Herz

A quick note:

- Using 3 different skins instead of a responsive skin is a "poor man's solution".
- Using 3 variations of the same responsive skin in order to optimize code size is much smarter.

Anyways, I agree you want a responsive skin to begin with.

It's true we don't provide much choice as of today but by using bootstrap, which is a well known de-facto standard, it's easy to modify ... if you know bootstrap ... which is probably a good thing to learn if you're into web design these days.

also note you can always add a second CSS fiel to a skin to override the default one.

It is on our todo list to redesign the back office and a complete set of skins for all front office collection/blog types.

Thanks for the quick reply.

I don't know where the bottlenecks occur, but I thought the server just feeds up what is appropriate for the detected screen size anyway; so the code as it passes to the device would be just as small whether it's a portion of the responsive, or that portion broken out as one of three sets of styles.

In my case, I think I am coming to the point that my portion is design, particularly optimization to build lists and drive business, not coding; so I think my next step is to hook up with someone who is jazzed by the code side and implementing what I sketch out on paper.

My point is for the beginning do it yourselfers, this isn't enough. I don't know how to set up a modal or a feature box to do opt-ins, I don't know how to set up a payment facility, I haven't figured out how to automatically generate an e-mail every time I have a new post.

If you are interested in having a design, functionality and efficiency (from the user's standpoint) person on board, I'd be tickled to work with you. There are things we could add to your widgets, like social media buttons, opt-in pop-ups etc. There are places the code could be annotated so people know what is going on. There's all sorts of stuff, and I bet you know a lot - if not most - of it, but sometimes a fresh set of eyes coming from the users space will see things the seasoned developer takes for granted. Feel free to reach out in a private message if you are interested.

I'll send you a PM David.

In the case of responsive design, you send massive CSS and HTML to the client (for example a smartphone) and then you let it process the CSS and you might end up displaying only 50% of the content on the small screen and use only 40% of the CSS to do that.

When you send to an unknown browser there is no other way than doing it this way.

But when you send to an identified phone. You know the max screen size in advance. So you matt know in advance you don't need to send a heavy version of your site. So you may benefit from having a separate skin here.