Act On This V2

aot-page-head

ActOnThis – The Actors Network 2014

Project re-build

The summer of 2014 saw the commencement of a major re-build of the Act On This site. The main priorities and justification for this were:

  • Fully Responsive Layout – with a serious focus on tablet devices as well as larger screen desktop machines – ( See bottom of post for examples of various site pages in mobile view)
  • Update of the visual styles for a fresh clean look
  • Re-factoring of the main index page and category pages to reflect a more magazine style approach to content.

Frontpage layout views

aot-v2-front
aot-v2-front-sml1
aot-v2-front-sml2

Initial Phase

We had decided that as this was to be a full re-build that we would use Zurb’s ‘Foundation’ SaSS framework to aid in responsive layout

The first task was to create a new theme directory and file structure incorporating ‘Foundation’ SaSS css files and our revised function files directories and assets directories. With this in place all the existing functions and templates we would need were identified, even if modifying, and ported across

Next came the primary part of the main site build which was to start to look at all the main templates, frontpages, headers, footers, single post, page etc and re-factor those top to bottom with our new major structural elements and the basic responsive styles those would need under specific breakpoints.

Menus

A fairly complex set of menus were required and due to the number of links and the requirement not to have those hidden but as primary links a series of main menus and header subnavigation menus were needed. These although using the WP menu system were complimented by a series of functions adding additional links as needed, especially for the login / logout and register links which were built under a split subnavigation arrangement.
aot-v2-menus

For our mobile menus we used Foundations mobile menu for the main navigation and set that to stick to the top of the viewport when scrolling down.aot-v2-menu-mobile

aot-v2-mobile-menu-expanded As we had a large number of links and menus we had a problem in how to deal with all of them when in a mobile setting, this was overcome by creating two main WP menus, one named ‘mobile’ and switching those around depending on mobile device view, the mobile menu then contained all the links from the header subnavigation with the subnavigation being removed. we needed the login and register links and as these were a custom menu function we styled those to act as fixed position links on the viewport to edge, as can be seen in this image showing the top bar and the main menu expanded.

Category Pages & Loops

The category pages represent the main article types including, broadcast videos, podcasts, as well as news, these we wanted to be bold and eye catching so we created a split view showcasing the most recent post at the top in larger format, and then the rest of the entries were arranged in a responsive grid layout below showing three across at wide screen dropping into a stacked view on mobile devices all the way down to mobile phone display which overall we spent a significant amount of time on getting the layouts looking just as good and usable on these narrow screens.
aot-v2-cat-view

Single Post Views

For the actual single post layouts we wrote custom templates to support the Podcast & Broadcast posts to create a better user experience for these specific posts.
aot-v2-media-post

Examples of site pages from a mobile perspective.
aot-v2-mobile-cataot-v2-mobile-postaot-v2-mobile-regaot-v2-mobile-topic