In a previous sprint we refactored our blogs to have multiple blog types. To read all about it https://projectpeach.co.uk/ProjectPeach/Default/Static/def/blog_42.html here. In summary we used to have a single blog type with a single visual design. All our projects used the blogs in a different way, as diverse as a help system to FAQs to regular blogging but all were tied to one blog type and when you'd used it up that was it. That's why multiple blog types were born, to compartmentalise and primitively style using optional timelines and comments. We did the bare bones to support multiple types. In a successive sprint, as part of custom content page headers, we added blog headers as described below. But now, in the current sprint, it's time to finish what we started. Blog type page visuals per type.
When we did the first part of our blog types work we did very little visual work. They all looked the same visual style. So if you created a few types like 'Case Studies', 'Press Releases', 'Just Blogging' even though the blogs were in discrete categories there was no visual clue, simply the change of blog data. We wanted to make it obvious which blog type you'd arrived at. So a couple of sprints ago we did some work on custom content page headers. It's simply a banner at the head of the page where you can change the Image, Title and Strap line. It's been implemented all around the visuals side of our off the shelf web applications like in the eCommerce. It means when you arrive at a page like the newsfeed then you've a visual clue, a header, to indicate where you are. Blogs where no exception. Here's the blogs page in Project Peach and we've now a blog type for Programming blogs. Take a look. You know where you are. But this is just a nice to have and didn't change the fact that ALL blog types looked visually the same.
Project Peach blog type: Blogs. The visual header instantly confirms your page destination. Notice the optional timeline down the left hand side
Project Peach blog type: Programming. A differing header to visually define the blog type. As ever, to change, right click/edit/save that's it! Notice the absence of a timeline, it's optional
All our pages are based on boilerplate HTML templates conforming to our framework standards. This defines the layout or structure of the page. The components that make up the content are headers, footers, any custom content like images, buttons, sliders, opening hours widgets and so on. We built these components/controls that are part of our client side framework, each has it's own specific type with built in functionality that can perform actions. Templates simply define the functional widgets that make up the page, not their positioning, colour, borders or any other styling. Templates are processed server side to replace literal data tags with actual literals which helps support user literal changes and foreign language translations. For release/production versions these templates are literal translated, minified for size and obfuscated for security so it's hard to view the template source in the browser.
Styling is the way the page looks to the user. We use CSS styling to render the page or brand the page into our clients livery. So we can make the same template appear visually different simply by changing the styling applied. Positioning, Colours, Borders, etc. Everything that defines the rendering of the template as a web page.
So, prior to this sprint, all the diverse blog types shared the same template and styling even though they had the 'new' custom content header component. We could of implemented this new feature partially by changing only the styling component. Change the visual rendering of the template per blog type as we do now across projects right now. That's how we style to our clients brand BUT how cool would it be if we went the extra mile and allowed the template to change too. That means that both the physical structure AND the look can differ between blog types. They can look completely different between blog types.
Since we've upgraded our single blog type to multiple blog types we've noticed that our clients are using them in creative ways. It's almost like we've created a user defined 'About' page. Let's rollback a little bit and define our meaning of an 'About' page. We've clear distinction between design time page design and run time client changes via our live CMS. If you'd like to know more about why we call our CMS live https://projectpeach.co.uk/ProjectPeach/Default/Static/def/blog_51.html. We build the structure and the styling of our clients websites at design time, by this we mean the way the page looks and functions, at run time our clients can alter the 'Content' using our live page components via our live CMS. These components are generally images, words, pricing, blogs, newsfeed articles and so on. The pages that we build at design time to support our clients needs are what we call 'About' pages. The client can change the content but not the template or styling. Back to the point. Since we added client created blog types our creative customers have been creating simple 'About' pages of their own using our extensible blog type feature. Legal Documents pages to support GDPR, terms and condition, help systems, etc. At the moment, even after this refactor, there's not quite enough to say we can replace 'About' pages but it's the start.
An email from a client with a question. We'd like you to change the 'Team' About page to a new style that separates board, leadership and employees into a new format and there's a simple sketch out attached. The simple answer? Why not simply use a new blog type Person? Add your people as blog information and each associated blog is a resume/CV. You've also all the benefits of an 'as you type' keyword search for skills, names, qualifications or anything. BUT it has to be the same template and style as all the other blogs currently BUT a quick'ish change to our code base could fix this. One other tiny thing to add as well, we'd like to enter the blog specifying a keyword or partial keyword then we can enter and display only 'Board Directors' or 'Technical' and so on. So the 'Team' About page is simply an overview with groups of employee types and it points into an highly dynamic blog type that our client can control. Best of all since we now have total control over the templates and styling we can make it look just the same as the old 'Team' About pate. Take a look at how diverse blog types can now be in the images below.
A new team overview 'About' page replaces the current 'People' About page. This is the link page to the new 'People' blogs with custom styling. The blogs can now be entered with a filtered search term that restricts the results returned, just like typing in the blog search. Right click, edit and save to add new people categories.
The 'People' blog type page is styled exactly like the old 'People' About page however it's actually a blog type. Looks the same however our client can now link articles, which are actually CVs, to the blog title headers which are actually people. Blog types can now be visually diverse too. Just add people like you would add a blog. Easy.
A blog with the format of a CV. We changed the 'People' blog type styling to be visually a CV/Resume. Remember ALL blog types can now be styled to look unique, we simply design and add the new style and it becomes a pick-able option when creating a new blog type.
Not quite. We've more backlogged stories around blog types to implement. We're really keen to bring our design time 'About' pages and blog types somewhat closer together. That's for the future. Watch this space.