Request - Responsive Themes

[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.