+ Written for Blogger users who want a high-level introduction to extensively customizing their template. This includes adding custom-designed navigation menu buttons. I couldn’t find an FAQ topic addressing this topic anywhere on the web, so here’s a post to help close this gap :
This high-level ‘how-to’ is written as an interview between Jonathan Whelan (this blog’s designer and template coder) and I (his Blogger-using client). We cover the why’s and how’s of my old blogs’ custom template’s look-and-feel being completely reworked to look and function impressively. This includes the process he followed for adding custom-designed buttons to the navigation menu of a basic Blogger template.

Image 1. www.travisnoakes.co.za in Macbook, May, 2016. Adobe Photoshop by Jon Whelan.

Travis: This custom Blogger template that I last edited in 2009 had become way past its use-by date. It looks jurassic compared to contemporary layouts. It also did not work well on mobile phones, while its custom code seemed to obstruct Google’s add-in gadgets for social network sharing. Being close to finishing my thesis’ full draft, I wanted its design to reflect my aspirations for it as a ‘post-PhD’ blogsite. The new, next-level up, look-and-feel also needed to reflect broader personas than a ‘researcher’s blog’ could. It took a while to decide on a graphic metaphor that resonated with my different roles, but I eventually came up with the idea of a ‘plus’ sign. This suggests how each individual combines and expresses varied personas - a key focus of my PhD {The nerdy humorist in me also hopes that geeks will appreciate its tangential nod to ‘Google Plus’ ;) }. In my life, the roles of Researcher, Educator, Design Thinker, User, Speaker and Volunteer have become the most salient. So, I sketched some icon ideas for these pluses. These were incorporated into a creative brief (see travisnoakes.co.za look-and-feel update brief 2016), for Jon to quote on.

Jon: Being a graphic design professional, it was easy for me to rework the plus icon ideas into versions that would look good even at a small mobile phone screen scale.

Image 2. New button icon designs for www.travisnoakes.co.za, June, 2016. Adobe Illustrator by Jon Whelan.

Travis: Yes, it’s very easy to ignore these users when enjoying these designs on a wide, monitor screen in the office.

Jon: Right. For me another conversion issue was becoming familiar with how Blogger organises pages and add-ins, versus how Wordpress CMS supports in-depth design customisation. The way a Blogger theme is built is slightly different and it took some learning from my side appreciate how it applies html and css: Blogger themes are structured in sections and built out of widgets/gadgets. With this in mind, I proposed building the theme from the ground up to be more efficient than hacking a free or a paid-for one.

Travis: That proved the right way to go. Compared to WordPress, Blogger seems not to offer the same level of template customisation and control. This probably contributes to why Blogger seems not be as widely used as WordPress by Capetonian designers or academics. Nevertheless, I was not keen to shift to a Wordpress blog. I am pleased at my blogsite's search engine recognition, especially for its niche subject-matter. I also like Blogger’s ease-of-use and not having to worry about back-end maintenance, such as updating it. I was hoping to benefit from the multi-device compatible (mobile and tablet) publishing and fast page download speeds it provides. Then there’s the Google translate widget, which allows viewers to select their preferred language translation of a post. I’m especially happy that this makes it easy for its e-portfolio lessons to be viewed in Afrikaans, Sesotho, Xhosa and Zulu. I enjoy the live internet traffic stats that Blogger shows too. And its easy integration with Google Adsense has taught me how difficult it is for niche bloggers to cover one’s hosting fees. The unfortunate side effect of my Blogger fanboy-ness was Jon having to attend a crash-course at “Blogger University” ;) ...

Jon: True. I think that most locals also use WordPress, because it is extensible, easy to customise and manage. By contrast, Blogger has limitations with regard to adding custom features. My jump into Blogger’s “deep-end” proved daunting, given the tight deadline I was working towards and needing to follow a ‘site design and build method’ comprising wireframe-, mockup-, code- and testing phases. The wireframe was easy to mock up into two draft .html mockups for button varieties one and two. However, there were several stumbling blocks that needed to be overcome before the chosen design could be implemented in Blogger.

Travis: Correcting my ‘plus’ symbol ideas that might be perceived as medical or religious was a breeze in comparison?

Jon: Sometimes over-using the plus symbol seemed to take away from the simplicity that we wanted. Also, I spent quite a while reworking the icons to make sure their quality will not deteriorate as they scale down. The simplified design of the buttons was done to suit Google’s Material standards. Although quite literal, the new buttons’ advantages were that they quickly communicated what they were about. Once you had chosen a combination of icons from both sites, I broke up the html from the test sites. These were added to Blogger widgets in my test blogsite’s basic template. Only once I was confident that the template actually worked, was I then prepared to apply it to Travis’ live blogsite.

Travis: You made several backups and I was very happy that you didn’t need to use them. Another plan B was contracting freelance Blogger experts via upwork.com, such as Prayag Verma or Nicholas P. Both had many positive reviews in what seems to be a niche area of expertise.

Jon: It took a while to figure out ways in which the site could work like Travis originally wanted it to. For example, there was no online ‘how to’ on linking designed buttons from a navigation menu. I worked out that I could use a widget for writing html and css to address this potential showstopper. Travis gave me access to the CPanel service for his webhost’s domain. I needed to store the icon images in the domain, and link the images to his blog. This allowed me to add links from the button images to old and new pages, or addresses pointing to a label query (i.e. http://www.travisnoakes.co.za/search/label/design_thinking).

Travis: There was a minor technical delay before Jon could put this into practice. After trying to login unsuccessfully to the CPanel address, I logged a support ticket. The upshot was that we needed to wait for my webhost to activate the CPanel’s functionality and for my new access details to work. Hopefully our readers are now forewarned to check with their webhost and set up domain access early on. Do not confuse such access with their basic hosting account, like I did.

Jon: In working on the navigation menu widget, I also discovered that by removing the skin, I know it sounds painful, I could style the design better. I then did another iteration of the site to show what a possible working prototype would look like. I preferred to do this, so that the icons could be viewed from the user's perspective. This also helps me in my design process as I can see how it works online as opposed to a nice A4 printed presentation.

Travis: Yes, it was reassuring for me as the client to see a working prototype before the migration.

Jon: Then when it was time to do the transfer. I backed up the old site before I did anything. I organised his redirect page as I started applying the new look-and-feel, so that visitors to the site would not have access to the "renovations" and get a teaser of the imminent update.
Travis: While you were doing this, I could also log into Blogger and see the site running the new template. Jon used all the gadgets from its previous version and I could see this still running, which was neat.

Jon: Yes, I also refined the desktop navigation icons, which were center aligned to take up less space. I added a page to link to each button and checked the 'plus' favicon' was visible. The pageviews were still 95,867, as they were. All the other elements were there. I hardcoded a social media links tab to appear in each post… The reason I hardcoded the social media icons was to ensure the look and feel was consistent with the rest of the theme, the icons and also because there weren't any gadgets available to meet our needs. For the Adsense gadget, I just changed the sidebar one to be 'responsive' to make it look better on mobile.

Travis: On that, my blog’s appearance on mobile is light-years from where it was.

Jon: The desktop too, as we can see in my images.

Image 3. www.travisnoakes.co.za, viewed via iPhone, June, 2016. Adobe Photoshop by Jon Whelan.

Image 4. www.travisnoakes.co.za viewed via desktop browser, June, 2016. Adobe Photoshop by Jon Whelan.

Travis: I hope our chat has given Bloggers insight into an approach they might follow to extensively customise their blogs’ ‘look and feel’.

Jon: Yes, and if you need in-depth help, please contact me via http://www.jonathanwhelan.com/contact-jonathan-whelan.

Travis: And if you have any suggestions or concerns, please add a comment below, ta.

Dr Marion Walton, Anja Venter, Prof Johannes Cronje and I co-authored an article for the Design Development and Research Conference 2014; "Phone to Photoshop: Mobile workarounds in young people’s visual self-presentation strategies". I gave the related presentation, today.

For background, the Cape Town Design Capital 2014 initiative provides an important platform for showcasing the wide range of design projects that support social, cultural and economic development in our city. Marion's mobile phone research, her Creative Code project, Anja's research into new design students' software use and mine into Visual Arts learners' e-portfolio choices and contexts, all contribute in small ways to the digital enfranchisement of young Capetonians.

However, with Professor Cronje we share the concern that a systemic approach is lacking that might support a more representative group of young South Africans (especially from working class backgrounds) in becoming involved with creative industries. Twenty years into a democratic South Africa, learners facing income and class barriers are seldom able to access tertiary education opportunities that could support them with securing careers in design, film and other creative industries. Access to such occupations requires a combination of economic, social and cultural capital (Bourdieu, 1984:2010) that mostly limits participation to young people from middle and upper class backgrounds, reproducing their privilege and guaranteeing future opportunities (Burawoy and Von Holdt, 2012).

Our paper frames this highly unequal context and introduces an emergent gatekeeper to students' access to creative fields; the increasing use of digital portfolios for professional self-presentation in visually creative fields. Given the local context of unequal access to digital technologies, this has become a new hurdle to tertiary studies at elite institutions (for example, the University of Cape Town's Michaelis School of Fine Arts requires prospective students to submit a digitised portfolio on CD). Not having an online portfolio of high-quality can also be an obstacle to securing freelance employment.

Our paper's two case studies were drawn from my long-term Critical Action Research (Carr and Kemmis, 1986:2003) project exploring the use of digital media for young people studying Visual Art in two quite different high schools in Cape Town. In the first site, twelve volunteer students at a specialised co-ed state school (six males and six females) attended extra classes to develop digital skills and to construct electronic learning portfolios (e-portfolios). In the second site, seventeen male students enrolled at a private boys’ school were required to create e-portfolios as a compulsory component of the Visual Arts syllabus.

My PhD explores the digital self-presentation and portfolio organisation choices of 29 learners and how contextual enablers and constraints were manifested in their e-portfolio significations. Our paper explores the latter in connection with mobile phone use. Although these are the most accessible form of digital media in a South African context, their use in e-portfolio production necessitated extensive resourcefulness for mobile-centric, government school students. We explore how mobile technologies are implicated in digital self-presentation and in the creation of e-portfolios, which involve both specific forms of cultural capital and specialised infrastructure. Similarly, digital portfolio creation requires infrastructure which exceeds the capacities of most South African schools.

The barriers and opportunities presented by digital networking for two young Visual Arts students are described: they attended very different secondary schools and had dissimilar home environments which necessitated contrasting workarounds. In overcoming these obstacles, the two learners developed very different professional self-presentation strategies and portfolio showcases. The visual strategies they adopted as they negotiated an unequal education system in two different parts of Cape Town are described.

Their experiences suggest that educators should be open to accommodating the mobile practices and genres that young people already use as they help them assume and challenge ‘disciplined’ identities in the visual culture.