Progress on the grid and layout

This week I completed some major fix-up on my grid. Remember when I thought that it was almost fixed? Well I was wrong. In fact I ended up recalculating the whole thing and basing it on a single column being 65px or 6.5% in width. Happily it is now working exactly as I need it to (Mozilla Developer Network saved the day againhttps://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Creating_a_fluid_grid - I am going to up my donation this year).

I am feeling griddy

Now that my grid is in situ, I am able to base layout elements on  it. I do think that in most cases I will need to make unique versions of the columns and tweak the row layout, but keeping the grid architecture in place and temporarily adding the rows/columns to the html has been really helpful for planning out the sections (as shown in the screenshot below). I used my grid to start planning the layout of the content on the Flickity carousel cells - as it turns out this took quite a bit of work (more on that in my next post). I also had my first go at creating an SVG, albeit a very simple one as a placeholder for the first cell in the carousel. The SVG shows the outline of a head and I made it in Adobe Illustrator, this will need to be replaced by more of a photographic image for needs of the project.

about-About

Adding in an About section as the timeline really jumps right into talking about the fictional Patient. I will need to update the task list to reflect this, but it remains within the bounds of the tasks as task scenario 1 included, “Read introductory information”, this needs to become task scenario 2 and the others need to be bumped up. I also need to revise things where they are areas as opposed to pages, it is bit too specific at the moment.

Testing in Internet Explorer 9

Toying with the notion of animation

One of the sites that I have mentioned before, gamification+ has some pretty gorgeous and playful animations on it. I took a look through the code and the javascript attributes and most of it is managed via CSS. This is good, although I would am concerned about browser support and also performance rendering. As a consequence I probably won’t add these features. As a pre-check I used the Chrome timeline tool to record the processes on an older computer that I have at home and I felt that the impact on performance would be a problem the new features operate at the limits of what I want, timing-wise so I will need to see if I can optimise them further. I have already removed aspects of the code that is not used..

References

Basques, K. (2016, December 8). How to use the Timeline tool. Retrieved December 8, 2016, from https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool Common CSS questions. (2015, October 26). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions daneden. (2016, September 27). Daneden/animate.Css. Retrieved December 8, 2016, from https://github.com/daneden/animate.css Grids. (2016, October 7). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Creating_a_fluid_grid Lewis, P. (2016, December 8). Rendering performance. Retrieved December 8, 2016, from https://developers.google.com/web/fundamentals/performance/rendering/ SVG and CSS. (2016, January 2). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS Z-index. (2016, December 2). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index