The weekend of doom
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. [caption id=“attachment_384” align=“alignnone” width=“300”] Version 1 - This screenshot deliberately shows the progress between two slides. This version of the anxiety level image had a visual effect akin to passing a row of trees with bright light behind them. It became very jarring when viewed at-speed[/caption] [caption id=“attachment_385” align=“alignnone” width=“300”] Version 2: I created a long svg in Adobe Illustrator with a greater level of logic. Attempting to map the story thematically to a graphical interpretation of the patient stress levels. This link is on the one-hand more graph-like but also more oraganic as I made it from scratch by drawing and manipulating a continuous line…Can you tell I went to art school?[/caption]
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. [caption id=“attachment_386” align=“alignnone” width=“300”] This is where I got to with them. Partially styled, but a nice efficient use of space. I would have added svg “+“s on the right to indicate their interactivity.[/caption]
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