Request - Responsive Themes

[Kesstryl]

Would someone be willing to post some of the themes here into a responsive design? Meaning that the site will collapse down for smartphones and tablets with single columns, sidebar collapsable, etc. I don't know much about how to do this, best example I can give is my art site (a worldpress site) is responsive. Look at it by shrinking the browser window and you will see how it re-formats itself to fit the window. http://www.sonyaireland.com

[bobbybig]

This is a very interesting idea indeed the problem is that at this time many of the predefined features in the source code require base sizes not overly functional by all hand held devices.

I think as we get the source better in object orientation and ready for a more advanced use such as the admin features all cleaned and added like we would want; then the use for themes that are responsive to devises will be more doable.

it isn't that it can't be done. It actually is quite easy to code the css to respond to devise size. the rest of the code however would not and end up messing up pages and or theme layout too badly unless the site itself was recoded to allow for it, and it would be best to not have to do that at this time.

I will gladly be building responsive themes as soon as it is understandable functional all around for us to do it.

[Hall of Famer]

I believe Tequila already looked into this, I will talk to her about Mys v1.4.0's themes when the time comes.

[Tequila]

I found a few articles/tutorials, and am researching while not working on my other projects (Gospel Truth 3D Pinups, Rising Age Tarot, and Flavors TCG).

Here they are if you are interested:
http://blog.teamtreehouse.com/beginn...ive-web-design
http://www.hongkiat.com/blog/responsive-web-tutorials/

Now back to finding pictures of yummy looking food...

[Kyttias]

I'm working on this for my theme. I'm using Bootstrap as a base for my design. Responsiveness is extremely important in this day and age!

Here's my theme in progress on my desktop (1366 × 768): link

I used MobileTest.me to test it on smartphones:

iPhone 5 (568 x 320): link
Samsung Galaxy Y (320 x 240): link

Anything smaller than iPad in vertical mode (768 x 1024) renders something like the above, where iPads and above render it the same as a desktop. Smaller tablets will end up mobile mode.

What's different about my mobile mode? I shoved my sidebar to the top and made the links there horizontal instead of vertical. (And I'm considering hiding them altogether and adding in a 'show' button.) My top navigation is now hidden inside the button with the three lines on the right hand side. Click on that it drops down a list with only the top level categories (so you MUST make and link to pages that contain all your drop down links, by default Mysidia has these linking to the index, which isn't what you want): link (The drop down carets won't be there anymore, ahaha, small change to do...)

Other misc details about the template in general? The top navigation bar can always be seen, even when you scroll down. It's affixed the top and can always be easily accessed by the visitor, even on mobile devices. There IS a footer with credits at the bottom, I just didn't get a good shot of it, because it's obedient and stays where footers are supposed to, nice and snug to the bottom of a page.

Bootstrap is a CSS framework. I'm hoping I can get the template to work smoothly with ANY Bootstrap theme (since there are many available for free on BootSwatch.com and you can make your own easily with various generators, such as the one at StyleBootstrap.info).

All the mobile responsiveness is done with jQuery and overrides the default menu seamlessly, with no need to edit the deep code inside of Mysidia. You'll be able to just pop in the template theme and have it work nearly out of the box (other than making sure your top category links point somewhere).

I'll make my own thread when it's all ready to go~

EDIT:Ok, my theme's been posted!

Do-It-Yourself Responsiveness:
For the simplest example of how the jQuery is working (so long as you have jQuery included in your template):

 /*happens on both initial load and on resize*/
$(window).bind("load resize", function() {
var width = $(window).width();
if (width <= 767) {
	if(width<=459) { /*for smart phones and below*/  }
	else { /*for tablets and below*/ }
}
else { /*default for desktop*/ }
});;

You'll need a basic understanding of jQuery to know how to modify the css of your page with it.

Some things can be done with JUST css! (Note the extra set of curly brackets:)

/*this css is only used when the screen is smaller than this*/
@media only screen and (max-width: 767px)
{
 .example {display:none;}
}

Include meta data in your header so your css or jquery can find the current width on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1">

But I think that's the basics to changing things.