In February, we told you about our plans to make Hoop.la, UBB Forum, and QuestionShark completely "responsive". We are still deep into that project, but I wanted to give you a couple of details so you can start planning for it a bit.
We'll be using the Foundation For Sites framework to handle all of the responsiveness. While you do not need to be an expert on responsive design (or Foundation for that matter) to operate your community site, it will behoove you to be familiar enough with it to make sure that your custom header and footer HTML is also responsive (and uses Foundation's classes) so that you don't have a site that is responsive in every way except for the header and footer than you provide.
We'll of course be here to assist you with that transition (and that is also why you will have plenty of time to get your site ready prior to the transition), but if you have some free time, you may want to get acquainted with Foundation. The better you and your team understand it, the better your site's header and footer will be (from a responsive standpoint).
We also plan to use many of Foundation's built-in CSS classes for things like buttons, labels, and nav menus. And in general you will find that the CSS used on each page is much clearer and consistent, with more classes in place simply to make it easier for you to customize specific elements of each page. In fact, each page will have its own unique CSS ID so you can target CSS changes to specific modules or pages.
Other notes:
- We're using Foundation's printer-friendly CSS classes to make ALL pages more printer-friendly.
- We are decoupling the admin control panel from the main site, from a theme perspective. This means that you will not be able to change the look and feel of the control panel pages themselves, but this will mean that if you accidentally apply some malformed HTML/CSS to your theme or display settings that prevents pages from loading completely, you will still be able to access your control panel to fix it. Since the control panel is only for admins anyway, this seemed like a proper tradeoff.
- We are ditching image icons pretty much entirely, in exchange for icon fonts. The advantage here is that icons will always be scaled properly to match the size of the corresponding text, which makes everything more visually appealing, no matter what size fonts you use for your theme. It also means that you can use CSS to change the color (and more) of the icons. Thus, changing the color of all or particular icons is a snap using CSS, with this approach. We'll be using Font Awesome for our stock icons, but you could use custom CSS to swap in your own custom font icons, if you want. Thus, there is no loss in flexibility... it's just much easier for you to make stylistic changes to the icons. Theoretically, pages will load faster, as well, with this approach.
Don't let these details scare you in any way. Everything will still be extremely easy to use (in fact, far easier to customize), but I want to make sure that those that care about nitty-gritty details can stay informed as we progress.
Comments (3)