Today I launched my new theme for my blog. It’s a very stripped back theme with a focus on typography and most importantly the content. It’s a responsive theme, meaning content adjusts to certain breakpoints. Go ahead resize the browser if your on a desktop and watch it change.
I started this theme using the Bones starter theme. All design was done in the browser, after some quick sketches in penultimate. To get past the blank canvas stage I first imported my content from the live version of this site. Setup a new local version of Wordpress and Bones on my mac book, using MAMP. Imported the content, and shrunk the browser down to simulate a mobile screen. I settled on a nice combination of the fonts (Arvo and PT Sans), and selected some nice colours. I slowly started fleshing out the design, adjusting colours, font sizes, spacing of paragraphs etc on the mobile version constantly testing on my iPhone. Using xip.io I was able to use an address locally running on my own computer.
Once I completed the mobile size screen, I moved on to tablets and repeated checking on my iPad. Mobile I find is the hardest due to the size constraints.
To get Retina icons for social media and the header icons (search and menu) I used the Ico Moon web app. It allowed me to create a small icon web font set only as big as needed, better for performance. Being a web font it will scale to fit and look great on a retina iPhone or iPad.
There are no images for the design only for the content. The triangles and the tags are all built using CSS.
I’m pretty happy with the results. The focus on content and readability I feel was the right direction to take my own blog. Now more than ever I feel text and typography are the most important focus of design. Especially with the multitude of devices people now navigate the web with.