APRIL 28TH 2019: The updated Pendragon Online website has launched and is available at http://pendragon.online.

‘Some new images here, updated content there and a new menu over there,’ Pendragon II is an update to the site that I created between May and October 2018. The main improvements are focused around navigation and the user interface of the website, though each page has been updated and modified in at least one way and a lot of content has been updated and improved to make the portfolio more relevant and up-to-date.

Watch the launch teaser below.

Pendragon II’s birth

Creating a prototype banking website for university

Updating the portfolio site again has been on my mind since November 2018 (despite the site at the time only being a month old) when I took the Dragonbase framework that my portfolio site is built on (Dragonbase is my own HTML, CSS and JavaScript framework) and added a ‘mega menu’ and ‘fat footer’ into it in order to create a prototype banking website for a university project. I realised that they were quite easy to code and were really useful for improving navigation on websites which a fair amount of content, such as my portfolio which had over 30 pages at the time. The existing menu was just a very simple menu bar with 5 or 6 buttons in it which went to ‘landing pages’. This was fine for the websites that I was producing at the time, such as the Nellie’s Nursery prototype and the NB Aurora website (also built on Dragonbase) which only had a handful of pages, but anything with more than around 10 or 15 pages and it was inefficient.

However, at Christmas I was busy with freelance work and in January the Broads project began and I got busy with that, so the portfolio update never happened.

February attempts

In February 2019 I had some time off for reading week and spent most of this time beginning to design an updated version of my portfolio site. I got as far as creating the information architecture and coding a working home page prototype, complete with the mega menu and fat footer, but it never went beyond this stage as once again university began and ate into my time. The progress made in February is documented in the post I wrote a couple of weeks ago about preparing for university after Year 2.

The information architecture of Pendragon II is very similar to the one shown in this diagram, from February 24th 2019, below. When I was rebuilding the site I was referring to this document a lot.  The red squares are the top-level items in the new ‘mega menu’. Items are light blue are sub-categories and items in dark blue are links to pages. This is a much better navigational structure than the existing menu system which does not allow you to visit individual pages from the menu alone.

 

The Big Book Crit, May 2nd 2019

After I wrote the post about preparing for university after Year 2, I signed up to attend The Big Book Crit, a big networking event held once per year at NUA. I enjoy networking events and they’re very important, so as soon as I heard that you didn’t need to literally present a ‘book’ to the professionals, I signed up. This 4 hour long event will be held on May 2nd and is essentially a portfolio review. Having just written about how my portfolio could do with updating ‘some time before I begin Year 3’ and with it being on my mind, I decided on April 22nd 2019 that I’d make a start and begin to rebuild the portfolio website, ready for The Big Book Crit. I felt that it was important to attend this key event with an up-to-date portfolio that showcased what I could do.

‘Pendragon 1.5’ or ‘Pendragon 2’?

The original plan on Easter Monday (April 22nd) was to just add the improved navigation to the existing site (i.e., add a mega menu and a fat footer to each page) and update the content to be more relevant to April 2019 as opposed to October 2018 (or even June 2018, really, since the copy was written in June 2018 and never updated!) and then improve the UI and presentation of the site over the summer holiday. So, the repository on my BitBucket was called ‘pendragon-1.5’ to indicate that this was going to be a stepping stone between the existing site and something better.

I was envisaging this would be relatively light work and ready by April 25th or 26th so that I could go back to my dissertation work.

However, one change turned into another and another and another and before I knew it I was making so many modifications to the core code, appearance, structure and content that the site was beginning to look unrecognisable in just about all respects. Therefore, this is definitely ‘Pendragon 2’ (or ‘II’) and not a ‘1.5’. This is the ‘better portfolio’ that I hadn’t planned to launch until September 2019.

What’s new?

A lot! Let’s break it down into sections.

Navigation

  • Mega menu on each page which means that the user can tap on a button which represents a ‘subject’ and all of the pages relating to that subject are displayed in the menu beneath. This reduces the number of clicks and pages a user has to go through to get to a page. It also means that pages that might have previously been ‘burried’ (such as photography pages) are now much more accessible.
  • A condensed version of the mega menu is also shown in the mobile menu, which remains a hamburger menu on devices when used in portrait orientation, but in landscape the same mega menu that is shown on desktop is used.
  • Navigation is no longer hidden when the user scrolls, instead a condensed version of the menu bar is shown and is visible at all times, speeding up navigation.
  • The mobile menu button is now located in the conventional upper right corner of the page rather than at the bottom. This improves screen real estate and whilst the old design did attempt to combine ergonomics with ‘what people know’ and keeping real estate to a maximum, ultimately relocating it to the top corner is more conventional and also easier to code.
  • A ‘fat footer’ is on each page which serves a similar purpose to the mega menu. As the browser window or device gets narrower, the number of columns in the mega menu begins to disappear.
  • Each page has a ‘related content’ section at the bottom of it, just above the footer and after the main content has ended. This hopefully encourages the user to look at something else after having read the page they are currently on. It also notifies them that there is more content similar to what they’ve just read.
  • There are fewer navigation methods that require the user to place their cursor over an image to reveal a menu. Not only were these time-consuming to code and change when they were made (getting them to respond to different screen sizes required a lot of media queries), they weren’t great for users of touch devices where all they could see were photos and nothing to indicate that they were navigation elements. Elements like this have been removed from the photography page and replaced with a carousel, but still present on the case studies page at the moment.
  • Also an improvement for touch device users: the mega menu buttons have click events, not mouse rollover events, meaning that when you tap on the button the mega menu appears, meaning that users of touch-enabled devices can take advantage of the new navigation.
The ‘mega menu’ is one of the new features in Pendragon II.

User interface

  • Nearly every page has a new user interface, based around parallax sections. Large bodies of text are now often broken up with parallax sections rather than 100% width images (though not every page).
  • Parallax images now have a slight blue tint to give some identity and also to help make reading any text that may be on top of the parallax image easier to read.
  • Case study and portfolio pages feature a very short description of what they are about in the page header area and now feature a link to view the outcome of the project (if applicable). This is like an ‘executive summary’ and saves the reader from reading the whole page to find out key details such as what technologies were used, which year I did the project in, what the project was for and a link to view the outcome.
  • Carousels are used instead of individual parallax sections to show ‘groups of items’, for example the home page now features a carousel containing links to my work placements, portfolio pieces and UX case studies. The saves the user a lot of needless scrolling and carousels automatically advance every 5 seconds to show to the user that there is more content than they may think. Carousels are also a more enjoyable mobile experience since the user can swipe through them.
  • Clicking or tapping on the ‘invert’ button in the menu bar will invert the page colours. This is something I’ve done for years, but Pendragon II’s invert feature uses cookies to remember the UI mode that the user has set and automatically sets the colour mode each time they visit the site. Previous sites I made that could invert page colours did not do this – the user had to set the colour mode for each page.
  • Pendragon II can also detect the browser and operating system colour mode and automatically set the colour scheme depending on this (browser dependent).
  • Images have been added to the header, footer and menus to make them appear more exciting and give a little bit of brand identity. These change when the page colours are inverted.
  • The ‘bottom menu’ on the mobile site, which featured the hamburger menu, contact button and home button, has been removed and replaced with a more conventional mobile menu.
  • The menu on the photography pages has been modified slightly to show a grid of 2×4 tiles on portrait devices, rather than full width but fairly short buttons.
  • The photography slideshows no longer feature buttons to show each image, instead they just have a ‘Next’ and ‘Prev’ button to advance the slides. This means that the slideshow interface is less cluttered and looks better on mobile devices.
  • Slideshows now automatically advance every 5 seconds, but the user can still view the next or previous photo.
  • To save users’ data and improve mobile loading times, the video explaining the UX process is no longer shown on mobile devices.
Short summaries of the project give an overview of the project as well as an idea of the technology used to create it.

 

The optional dark UI and parallax sections are also key parts of the Pendragon II UI.

Content

  • All references to hiring me for freelance work have been removed. This is a service that I don’t really like to offer any more. This means that the ‘Design’ page has been removed.
  • The Broads Authority Project page has been updated to include creating the prototype, testing it and the results from the testing.
  • The Storehouse page has been completely rewritten and includes information about Issues 16, 17 and 18 from a website and management perspective.
  • The Work Experience page has been updated to include information about work shadowing with John Ellison and presenting at BETT 2019.
  • The Educational Technology page has been updated to include more recent information about Step Into Tech.
  • Some of the images on the photography pages have been updated with more recent images, or ones that fit in the slideshow better.
  • Some more ‘pre-university’ work has been added.
  • My CV can now be downloaded from the website, either from the About Me page or directly from the footer or mega menu.

Technical changes

  • The script to run the slideshow has been reduced from 1,458 lines to just 77 (95% shorter!) by using maths to create the relevant paths and determine which items to show and hide. This code is now much faster and a lot more manageable. Other scripts have also been massively reduced in length.
  • There is less reliance on jQuery as more tasks are completed with ‘vanilla’ JavaScript instead. The jQuery version has also been updated from 3.2.1 to 3.3.1.
  • All <br/> tags have been removed from HTML documents and line-height and padding CSS properties are used instead to determine paragraph spacing.
  • By using viewport widths and heights to set element size, the number of media queries has been reduced from around 1,000 lines of media queries to around 250-300. Using responsive measurements means that one media query can often apply to the majority of mobile devices and some elements do not need to be included in media queries at all.
  • Most pages no longer have the ‘.html’ extension in the URL, making sharing links easier. The exceptions are the photography page, the portfolio page and the case studies page because there is also a folder called each of these on the server.
  • By using HTML links rather than JavaScript links, an XML sitemap has been created which should allow search engines to crawl the site and SEO to be improved.
  • Users of Internet Explorer are now redirected to the appropriate corresponding page on the ‘legacy website’ (the first version of Pendragon Online, made on Adobe Muse and launched in February 2017) rather than directed to a page telling them to upgrade their browser. The legacy website is fully compatible with Internet Explorer 11, but displays OK even on Internet Explorer 8.
  • Several pages have been relocated, the old links redirect to the new ones thanks to the HTACCESS file.
The code behind slideshows in Pendragon II is an astonishing 95% shorter than the same code in the original release.

Pendragon II at The Big Book Crit and closing thoughts

My plan is to have the site running on my Surface and get the delegates there to look at it on that. As I as redesigning Pendragon Online, I thought ‘if I had a few minutes to look at this portfolio, what would help?’ This is why the mega menu and menu bar use click elements rather than hovers (so that tablet users can take advantage of them, read: the professionals will be able to see my improved navigation system) and why the ‘executive summary’ and a link to the outcome is now provided where applicable. The carousels were also partly introduced for this reason – they make swiping through content easy.

Reflections

I’m pleased that I updated my portfolio when I did. I rebuilt the site in under a week which is impressive, but I spent around 14 hours each day solidly in Visual Studio doing it. It did drive me a little crazy after a while! I launched it on April 28th, a few days after I would have liked, but an awful lot of changes were made. It is basically a new site.

I feel that the development was a little rushed. I had to make so many changes (20 or so) after I launched it to fix little bugs that I had missed. Whilst I was creating it I was aware that time was running out and that I needed to get back to my dissertation work, so the last few days were a bit rushed.

I now have this portfolio for applying to graduate schemes in the early summer which is great, and anybody who looks at my portfolio now (hopefully with the intention of offering me some kind of work!) will now see a much better, easier to use and more attractive portfolio than they would have done before April 28th.

I remember feeling the same about the last site version, which came out on October 14th 2018. That one was also made with the intention of getting employment (from IBM). Come to think of it, that’s why we make portfolios! But there’s nothing like the possibility of imminent employment opportunities to advance the creation of a portfolio site!

The infamous ‘What is UX?’ infographic video is still on the home page, but only on desktop devices now.

The future of Dragonbase

Dragonbase was the result of my ‘common framework’ idea that I came up with a year ago. At the end of Year 1 it was becoming obvious that it’d be a good idea to make my own framework and build my websites on that. The framework that resulted is a mix of bits of Storebase 5.5 (used to build the old Storehouse website) and Elebase 4 (used to build the Nellie’s Nursery website). I’ve had a fair bit of use out of this framework now – there are even bits of it running on the SALT Glass Studios home page, which is a WordPress website, but it’s beginning to show its age now.

In all honesty, the reason why creating Pendragon II turned from ‘making Pendragon 1.5’ to ‘making Pendrgon II’ is just because my coding skills have come on so much even since October 2018 and a lot of the time spent creating Pendragon II was also spent rewriting the Dragonbase framework that the previous site sat upon. The code is now so far-removed from anything resembling ‘Dragonbase’ that the next portfolio rebuild will likely be a complete rebuild. I’ve ‘stretched’ this old framework as far as it can go really. Pendragon II really is ‘old code wearing a party dress’.

What’s next?

Get back to researching the dissertation and make that screen-reader friendly prototype that I had hoped to make this week!

Also, the last (and very short!) term begins again on April 30th. There will be some small extra bits to do on the Broads project.

The next portfolio update will likely be to include details about Storehouse Issue 19 when it launches in September and/or information about any work experience that I complete over the summer of 2019. I’d also like to write a page about my dissertation research when I have more of it, too. I feel that it’s an interesting topic and something that could help to make me more employable and very different to anything else presently in the portfolio.