Cellular concerns

11 Dec, 2016 11 min read reflection, web-dev

I have been plugging away at the portfolio site with the primary aim of getting a semi-functional prototype version to Dr. Theo Fotis on Monday 12th of December. There is a still a huge amount of stuff to do, fix-up and streamline I will add these tasks to my Trello board. This journal entry provides a rundown of the decisions that I have this week.

Flickity carousel

I decided to make the carousel-cell 100% width due to the need for a more immersive timeline. What I mean by this is that I felt that the cells were too modular before and the greater width (formerly 66%) makes more sense in terms of showing the long anxiety levels .svg file. I still have lot of work to do in terms of consolidating my JavaScript and CSS files into one of each and then also minimising my JavaScript file. One of the things that Marcus brought to my attention was that my script sources should not be loaded in the header of my index.html and that this was bad practice. They now reside under the footer, but this presented some new challenges. For example the smoothScroll function had issues loading so I added a new main.js file (this is will become the final master js file) and added a window EventListener and then added an init function - to initialise SmoothScroll after the load is completed. The other issue is that Flickity Carousel for the timeline started to flash up momentarily as a column until it found it’s brain (aka the script actually loaded). I actually only discovered this due to using my mobile broadband stick in a cafe and noticed the latency. The Flickity Carousel is currently initialized at the bottom of a unique flickity.js fileI needed to keep the smoothScroll.js and flickity.js separated while I figured out how to get things working harmoniously.. What I needed to do to solve this was to set the carousel opacity as 0 until the window has loaded and as the carousel is not a function in the same way as smoothScroll it was a bit trickier for me; there wasn’t something straightforward for me to work with. What I ended up doing was adding a new variable for carousel immediately after initialising flickity (entails designating the css selector as a flickity carousel) and then applying a style to make the opacity 1I had to consult github for help with this as I was at a loss for a bit: https://github.com/metafizzy/flickity/issues/269.. This is working nicely, however the delay or a white screen may be improved by a momentary loading GIF in order to explain what is going on for a slower connection - one to add to the to do list! I quite like the Buffer GIF animation and this helpful tutorial explains how to code something like this with an SVG file as opposed to GIF, I’ll give it a go: https://cssanimation.rocks/buffer/. Also due to the audience of this site, I think that it is important to include the word “Loading” alongside any GIF or animated SVG. As part of the process above I added the cellSelector option to the carousel in JSON format, as initially I thought that I might want an EventListener. It seems that this might be useful later on, so I have left it in place for now. e.g. data-flickity='{ "cellSelector": ".carousel-cell", "freeScroll": true}' Another issue was with the customised Flickity dots (used for timeline navigation) was that I had set the position of their container to absolute and the overflow to hidden as a solution for smaller screens or browser windows (the dots disappear entirely on a mobile phone sized screen). However, I noticed a sort of ghosting issue as a consequence of the overflow. [caption id=“attachment_245” align=“alignnone” width=“471”]

Screenshot of the dots with the ghosting overflow issue

It is quite subtle, but can you see those little grey lines between 2 and 3 and also between 3 and 4? There be the ghosties![/caption] I fixed this by adding “white-space: nowrap;” to the dots themselves so that the wrapping was disabled. Result! [caption id=“attachment_244” align=“alignnone” width=“453”]

Yay, no more ghosties![/caption]

Here be the stuff of nightmares…

I have to admit that I spent way too much time on this issue, but it was honestly driving me to distraction. So having fixed my grid so that it was had even widths and looked lovely as I started to use my grids I found that I needed to add unique classes for the blocks that appear in each

of the html file. The grid structure is left in place as a logical point of reference. Then I found that my written content in the grid was overflowing beyond the height of the sections. This was relatively easy to fix by setting the classes for the sections to have relative positions and have overflow set to auto. Phew. However, as I added some placeholder content to my grid blocks I found that the widths were still perfect but the heights of columns were not okay. What I mean by “not okay” is that if a block had more written content then it was longer to contain this content. Therefore blocks positioned adjacent to each other looked askew.

/* tried this and hated it .is-table-row { display: table; } .is-table-row [class*="col-"] { float: none; display: table-cell; vertical-align: top; border: solid 7px #EEEEEE; border-radius: 0; } */

This was strangely very hard to fix. I tried several methods. First I tried fool it into thinking it was a table, but I lost my gutter and I worried about responsive accessibility. I also tried CSS pseudo classes (which I now have a little bit of experience with after customising the dots), but it didn’t provide the desired look either. I also tried adding attributes to the section container and the “One True Layout Method” (Coyier, 2010) where the margin-bottom is set to -99999px and the padding-bottom is set to 99999px and the overflow is hidden. This feels like brushing the problem under the carpet and it looks like it too as it cut off the bottom of my block outline and I like the outline. In the end I used row class for my grid defined to display flex and and then use the flex-wrap wrap setting. Alas, with one fell swoop my dream of full functionality in Internet Explorer is dashed as Flexible Box Layout module is not supported in IE9 at all (http://caniuse.com/#search=flex).

In an earlier journal entry I had cited this fixed navigation example on codepen (http://codepen.io/anon/pen/QGQPmX) as being close to what I would like for the navigation on my site, however I have also been devouring a book on web accessibility, Inclusive Design Patterns Coding Accessibility Into Web Design and anything fixed in the CSS was identified as a no-no in the book (Pickering, 2016). I had also found that the fixed header height meant was causing issues with the distance of the smoothScroll function. I was able to fix this by checking their documentation and adding the labeling the header as data-scroll-header and then specifying this in the initiation script. Previously I had defined a spacer div for this purpose, it didn’t work perfectly for the smoothScroll function, but it ended up being handy for defining white space between the timeline and the about area (in addition to the use of margin settings it was helpful to have something that was independent). In the end I didn’t need most of this work as due to the advice in Pickering’s book, I decided that the navigation header needed to have a relative position instead of being fixed.

Anxiety levels

As I mentioned at the beginning of this post, I wanted to give the carousel/timeline a long image that continued along the base of cells showing the anxiety levels of the fictional patient during the story (this was shown in wireframe version 3). I started by testing with a .png image and as I anticipated it looked awful but I was most interested in getting the positioning setup correctly. The issue was that the image kept showing up above or in front of the text inside the description div. Also as the window was resized the image floated upward from its initial position. The only way that I could fix this was to use z-index and a fixed position for the image container (I already broke the rules about fixed items - see above) and then added a unique style id called #anxiety to specify how my image was shown in the container (as a background image). Initially I thought that I might need to specify one strip of the image per cell in the Flickity, but they kept overlapping and having layering issues. The logical approach in the end is to have one very long SVG. I need to optimise the SVG prior to the final release of the site, but at the moment I am still adding to it in Adobe Illustrator as I need to finish writing the patient story prior to finalising the graphic. As this graphic only serves an aesthetic purpose I think it is alright that it is both fixed and defined as a background image (and therefore cannot have an alt tag applied for accessibility reasons).

Bios section

I added box-shading to the photos - they needed a little something to differentiate them against the background. Once again this is not supported in IE9 although it is less critical than the flex-box issue outlined above.

Responsive adjustments

I worked on the mobile phone break point for the media queries first. Specifically, @media (max-width: 414px) I based this size on the Google Nexus 6P and the Apple iPhone 6 plus as although these are both phablet sized I certainly need the grid blocks to be shown in a single column at this size not in rows. In general I would like to steer clear of too many device specific breakpoints as it is better to think about the legibility of the design rather than get too obsessed this (an article by Justin Avery (2013) supports this view: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints - not everyone agrees on this). Also, I realise that I need to go through the code and consolidate my classes and ensure that my units are standardised as % and em prior to doing too much work on this. So the rest of the styling and layout needs to be completed first, based on a desktop first mentality.

Thinking about the patient

I found myself rethinking the fictional patient’s name, based on the ever helpful Wolfram Alpha. It seems that women named Ruth are demographically older than the fictional patient should be (roughly 55-65yrs although I need more data on this - more on this in my next post). Although Wolfram Alpha is based on demographic information from the United States it is a good basic litmus test for this. Here is my comparison, Carol may be a better name: https://www.wolframalpha.com/input/?i=name+ruth+compared+to+carol

References

Avery, J. (2014, October 28). Why you don’t need device specific breakpoints. Retrieved December 11, 2016, from https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints Background-repeat. (2016, December 3). Retrieved December 11, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat Background-size. (2016, December 3). Retrieved December 11, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/background-size Blender. (2016). Force a div to contain floated child divs. Retrieved 11 December 2016, from http://stackoverflow.com/questions/11964696/force-a-div-to-contain-floated-child-divs Bos, B., Etemad, E. J., & Kemper, B. (2014, September 9). CSS backgrounds and borders module level 3. Retrieved December 11, 2016, from https://www.w3.org/TR/css3-background/#box-shadow Box-shadow. Retrieved December 11, 2016, from http://tests.themasta.com/blogstuff/boxshadowdemo.html Can I use… Support tables for HTML5, CSS3, etc. (2016, October 23). Retrieved December 11, 2016, from http://caniuse.com/#search=box-shadow cferdinandi. (2016, December 11). Cferdinandi/smooth-scroll. Retrieved December 11, 2016, from https://github.com/cferdinandi/smooth-scroll Cope, S. (2011a, September 6). Z-index. Retrieved December 11, 2016, from https://css-tricks.com/almanac/properties/z/z-index/ Cope, S. (2011b, September 6). White-space. Retrieved December 11, 2016, from https://css-tricks.com/almanac/properties/w/whitespace/ Coyier, C. (2010, October 8). Media queries for standard devices. Retrieved December 11, 2016, from https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Danilo, A. Splash vector graphics on your responsive site. Retrieved December 11, 2016, from https://www.html5rocks.com/en/tutorials/svg/mobile_fundamentals/ Kraken.io image Optimizer. (2013). Retrieved December 11, 2016, from https://kraken.io/web-interface LePage, P. (2016, December 16). Responsive web design patterns. Retrieved December 16, 2016, from https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns Lumsden, A. (2012, June 27). Getting started with Scalable vector graphics (SVG). Retrieved December 11, 2016, from https://webdesign.tutsplus.com/articles/getting-started-with-scalable-vector-graphics-svg–webdesign-7515 metafizzy. (2016). Callback when Flickity is initialized? · issue #269 · metafizzy/flickity. Retrieved December 11, 2016, from https://github.com/metafizzy/flickity/issues/269 metafizzy. Options. Retrieved December 11, 2016, from http://flickity.metafizzy.co/options.html

Pickering, H. (2016). Inclusive design patterns (Kindle ed.). Freiburg, Germany: Smashing Magazine GmbH.

Quick and simple image placeholders. Retrieved December 11, 2016 (UPDATED: May 5, 2019), from https://placeholder.com/ Salloum, N. (2014, April 4). CSS equal height columns, Three different ways. Retrieved December 11, 2016, from http://callmenick.com/post/css-equal-height-columns-three-different-ways van Gemert, V. (2013, March 1). Logical Breakpoints for your responsive design – smashing magazine. Retrieved December 12, 2016, from Design, https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/

css design grid html javascript navigation news reflection responsive