In my last entry I talked about the suggestions that Theo provided from his perspective as a nurse and researcher. They were very helpful, but lead to some rather major layout changes. In particular, the to do: “I will need more space in the carousel/timeline”. This led to what I nicknamed in my GitHub posts as the Weekend of Hell, I am softening this within the context of this journal entry to be the Weekend of Doom.
Altering the Flickity Carousel/Timeline
So changing the height of the Flickity carousel used for the patient timeline meant that the “dot” buttons had to be moved upwards otherwise they would be off the bottom of the visible area on most standard screen sizes. For reference, I have included a long screenshot that I made of the site prior to this work, on the right.
So I decided that the dots should reside on-top of the carousel and then they would also be spatially connected to the navigation of the timeline. This is not really how Flickity carousels are really designed to exist (metafizzy, 2016), but it is closer to the original inspiration for my site the DuckDuckGo about page (DuckDuckGo, 2014).
I am actually grateful that all of this happened as once I had cracked the rendering issue I realised that there were some major performance issues with the carousel/timeline. It took a bit of time to get to the bottom of it, but in the end I realised that it was the long svg that I had included to indicate the patient’s anxiety levels. Through testing in multiple browsers, on Mac, PC and mobile I realised that the image also wasn’t loading anywhere other than in Chrome for Mac. Everywhere it was just gumming up the works.
I reassessed the need for the anxiety level gauge/image and decided that it was important to keep it. So through trial and error I ended up loading with an image tag in the html as a very, very long svg. This is the only svg in the site that I could not optimise as it resulted in optimisation errors because it was too long dimensions-wise. Also, I realised that I did not really want to optimise it as I would result in losing the drop shadow detail which I had added to a new version of the design.
The new design
The performance issues highlighted that the design of the patient anxiety-level link was in fact creating an optical illusion and making the carousel look guddery/jerky even once the problems with it were fixed. The new design not only looked more streamlined, but it moved more smoothly simply by virtue of its aesthetics.
This entry represents the end of a period where I added a lot of content to the site. This was a good thing, but it also meant that there were areas that felt overly heavy like the devices area. I decided to try adding a collapsible accordion as a container for the information, using a tutorial from Codrops (Mary Lou, 2012). The tutorial was bit old but I liked how it used CSS and I felt that I could build on it. The accordion looked quite nice too, I’m sure that you can sense a ‘but…’ coming on here? Well I will explain it in the next journal entry. I have however included a screenshot the accordion so that it can live on it perpetuity.
The contact form actually works now
I wrote a dev post about this, but yes the contact form is now working as it should. I just need to enhance the warning/alert aspects and add aria labels etc.
And so does the back-to-top the button as in it only appears when one is sufficiently far from the top of the page for it to be useful. This took a couple of iterations of code to get right.
I had come up with a CSS style for reference sections and I decided to add it to this journal as well as part of my custom child theme. I am going to try (time allowing) to add it to my all my posts retroactively, but it is a big job and I have surprised myself at the sheer number of posts that I have amassed here in the past few months.
Coyier, C. (2013, March 5). Using SVG [Blog post]. Retrieved from https://css-tricks.com/using-svg/
DuckDuckGo. (2014, February 20). About DuckDuckGo. Retrieved January 15, 2017, from DuckDuckGo.com website: https://duckduckgo.com/about
Mary Lou. (2012, February 21). Accordion with CSS3 [Blog post]. Retrieved from https://tympanus.net/codrops/2012/02/21/accordion-with-css3/
metafizzy. (2016). Options. Retrieved January 15, 2017, from metafizzy website: http://flickity.metafizzy.co/options.html#prevnextbuttons
Sowmya. (2013). Re: Nesting an svg inside a div [Online forum comment]. Retrieved from StackOverflow website: http://stackoverflow.com/questions/15474306/nesting-an-svg-inside-a-div