WordPress is currently the leading Content Managment System (CMS) from large websites to simple blogs. Better than that, it is also free of charge. Hence this site also runs on WordPress.
Website design in WordPress is done using ‘themes’ which traditionally have been developed using a combination of CSS stylesheets and PHP-files, full of code. Not every designer is a programmer, but is still interested to have his or her own ideas published in the form of high-quality WP themes. Now there is a software pack named ThemeFrame, which enables building WP themes basically without any coding. The layout you are looking at has been achieved with this package, running on your local PC.
Current and quickly rising requirement is to build such themes that allow the layout to scale according to the size of browser viewing area and device – including tablets and even more so smartphones – to view the content in an easy to read and use way. Such themes are called ‘responsive themes’, and especially those have so far required a lot of programming capabilities, and a lot of real coding. Below is an example where on the left the browser viewing area is large, and on the right it is very narrow – the basic layout stays the same, but the text remains readble with images scaling smaller.
Things are different now, and you can build also fully responsive themes with ThemeFrame 1.2.6, including even a menu select box list for small screens. Even with that tool it has been difficult, since responsive themes need a bit different overall approach including a lot of testing with different browser sizes and a wise use of WordPress plugins to make everything work well.
To learn and manage a development process of responsive themes using ThemeFrame I’ve written my own ‘How-to’ guide. Writing this guide has been a great learning experience for me, and hopefully will also help others learn how to build a modern ‘responsive web design’. The latest version has dropped ThemeFrame version numbers both from the title and from the contents with an aim to make a guide I can update without changing the link to the actual document as the same document name remains. The newly named release includes a section abut changing your theme’s menu in different ways for small screens, with the latest addition being a solution to turn the standard theme menu into a single “three-line-button” approach in small screens.
You can download the newest version of this document containing a responsive menu structure from DropBox clicking here:
Hi Albert, and thanks for your comment and liking the guide. The work needed there was not that much as I wrote it along my own learning of responsive design principles. I really recommend reading Ethan Marcotte’s article mentioned in the guide to get some understanding about the basic principles – that also helps design and implement a responsive design properly using ThemeFrame.
Below just brief answers to your two questions.
1. Basically everything in the latest version should be valid using TF 1.2.6. Most of the responsive functionality has been pretty much the same since 1.2. except for a “Layout Creator” and “Mobile Menu” which were introduced in 1.2.6. I will check all references to 1.2. and change the guide accordingly. Thanks for your help pointing this out 🙂
2. I think creating a responsive theme in ThemeFrame is pretty easy from a technical viewpoint once you have learned to develop themes with it in general. To me it is much, much more complicated to create a really good responsive design regardless of technology used.
I personally like responsive designs where a thin header with a menu is fixed at the top of the screen especially in small screens as it allows selection of what ever content regardless how deep you happened to have scrolled before selection. That is not only a design challence, it is also a bit tricky to do in ThemeFrame.
Many experts these days suggest you to should start your design from smallest devices (typically touch screen smartphones) in mind and grow the design upwards to bigger screens. For example you really need to understand how much of space for anything extra you can put in a small screen, and similarly realise a touch screen does not allow all things a mouse-used screen allows. For example a touch screen does not really have a hover state plus mouse move in elements like menus etc.
One of my own designs is my personal photo&travel site, where much of the work has been used for the overall design to make possible a couple thousand images in about 150 galleries and numerous posts about different topics at http://www.tiirikainen.fi. Even though this site is mostly in Finnish, you may have a look at it using responsinator.com facility to see how the design changes at different devices. There is some talk in ThemeFrame Members forum about how this has been done using TF.
Thanks and Cheers,
Vesa
Hi,
I love your detailed TF PDF-documentation! It must have been a lot of work to create it.
But now I have 2 questions:
. In your docu you mention often the TF version 1.2. So it’s hard for me what’s valid for 1.2 and what for 1.2.6, which I posess?
. It looks for me that creating a 1.2.6 responsive theme is a LOT OT WORK! Isn’t there an easier way to produce one? After all I bought TF to have LESS work producing themes.
Would be nice to get an answer from you. Thanks in advance.
Albert