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: