Brisray 2020

A Responsive Design

Brisray 2020 Design Notes

Important: Server Side Includes

I wondered if SSI's slowed down a site. Of course they do as they have to be fetched from the server when the page loads but so do the images, CSS, JS and any other resource files. The time taken to load them is miniscule (milliseconds) and the benefit of only having a single file to edit the menus, headers, footers etc outweigh any time loss.

What I do need to do is optimize the loading of the includes by using either or both server and browser caching. The includes can be cached in the server memory more or less permantly, in the browser cache around 10 minutes should be enough.

The path to the includes are going to be different when the pages go live. Precede all of them to the correct path, usually ../

Responsiveness

This is the major aim of this update. Most of the CSS from http://hmsgambia.org/ can be reused. The main difference is going to be the section main menus.

Common CSS breakpoints:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:768px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops and desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
@media (min-width:1824px) { /* large hi-res laptops and desktops */ }

Breakpoints are mainly for the title and menus, and are at:

@media screen and (max-width : 1110px)
@media screen and (max-width : 1100px)
@media screen and (max-width : 910px)
@media screen and (max-width : 890px)
@media screen and (max-width : 860px)
@media screen and (max-width : 760px)
@media screen and (max-width : 740px)
@media screen and (max-width : 680px)
@media screen and (max-width : 600px)
@media screen and (max-width : 410px)

But there is another way - CSS Calc. Using Calc fonts and other elements can be infinitely resized to suit any screen. WebSemantics has a Calc Calculator to produce the code for fluid font sizes. StackOverflow shows how fluid resizing can be added to images.

But is it worth using fluid resizing rather than screen size breakpoints?

Main Menu

As per the main navigation menus of http://hmsgambia.org/ the main menus are an adaption of the menu from MediaLoot and the even simpler examples on W3Schools.

As per the current main menus from pages like http://brisray.com/computers/freesoft.htm put site home and section home at the start of the menus. As the section menu lists are going to be long, see https://stackoverflow.com/questions/42613350/how-can-i-create-multi-columns-from-a-single-unordered-list to split them into columns. The CSS needs to be responsive so change the number of columns according to viewport size. An idea is to add latest updates, sitemap and contact me to the menus and do away with the footer.

As the screen gets smaller still, remove "Site Home" and "Bristol Home" main menu items and center "Section Menu" - the first two items are also in the dropdown menu. On even smaller screens, show the hamburger menu.

The number of main menu section items varies from around 20 to 50. The longest is the Bristol section. Going to need JavaScript as on old site to page between subpages.

The section menus from the previous version of the website can be reused. They need the following lines added to the end of the lists:

The above code is rendered with Prism. But, pay attention to the fact that it has problems rendering HTML so the code has to start with:

<pre><code class="language-markup"><script type="text/plain">

and end with:

</script></code></pre>

Search Box

Make it so the menu toggle and search box always appear on the webpages. Side by side on larger screens, on top of each other on smaller ones. On smaller screens the search box can be covered by the menu - no need to display it all the time. Both the menu and search are hidden on sites like https://www.unl.edu/ (need to scroll up in that site's case). The University of Nebraska Lincoln also has some interesting ideas in their layout - https://wdn.unl.edu/

As the screen gets smaller, change the spacing between the main menu items and the size of the Google search box.

Search box - use Google Custom Search. Account already set up, check the different options.

The default Google search box is horrible, it's too high and misaligned. The best way of controlling it is via CSS. The page at WebSlake not only shows how to adjust it but also how to find which parts you need to adjust. All I needed to do was to make is less wide and make the background transparent.

.cse .gsc-control-cse, .gsc-control-cse {
    padding:0 !important;
	border-width:0 !important;
	margin: 0 !important;
	background-color:transparent !important;}

The above code is rendered with Prism.

Images

The standard image size I use is 800px wide or 600px high, whichever is the larger. The images must resize properly on smaller screens. For photo galleries then Fancybox will be used.

Avong Gorge from Hotwells

Avon Gorge from Hotwells, Bristol, UK

Nightingale Valley

Nightingale Valley, Bristol, UK

Video

Make sure the video boxes resize properly to adjust for any screen. Fancybox will auto-size the video containers.

Code Examples

Several pages on the site use code examples, CSS, JavaScript, Basic. The best practices for showing the code appear on WebSemantics (but I don't like the rules lines, simple shading are better) and SitePoint. Prism appears to be one of the most popular syntax highlighter so that will be used.

Tables

There's several ways table can be manipulated to fit smaller screens. One of the best sites to illustrate what can be done is by Davide Rizzo on CSS Tricks, but there's several links to other good pages.

For what I use them for, I think the best solution is to reduce the font size slightly and then when the table still gets too wide for the screen to use a horizontal scrolling table body.

Lists

CSS

The line padding: 1px 0 1px 0; in the page-div CSS is to collapse the spacing that occurs between parent and child elements. This is known as Margin Collapsing. See CSS Tricks and Jonathan Harrell

Window size checkers for development - http://howbigismybrowser.com/ and https://www.webfx.com/tools/whats-my-browser-size/

Website Checking

Check website for responsiveness, usability, validity etc.

Minify HTML, CSS and JavaScript files:

HTML - https://kangax.github.io/html-minifier/ - beware of losing spaces when using spaces as spaces rather than &nbsp; or CSS. The menu system stops working when this page is minified, but https://www.minifier.org/ works well on the CSS and JS files.
CSS & JavaScript - https://www.minifier.org/

Accessibility - https://www.w3.org/WAI/ER/tools/
Page / Site load times eg - https://developers.google.com/speed/pagespeed/insights/ and WebPageTest
Detectify – take note of and apply their results
Mobile-friendly - https://search.google.com/test/mobile-friendly

Server and CDN Optimization

This page loads in about 0.6 seconds, but there are ways even this can be improved:

Cache frequently used files (menus, includes, etc.) on the server - Apache Caching Guide
Browser caching - GTmetrix
Minimize all files
Use a CDN (Content Delivery Network) for static files like the JS and CSS files. Cloudflare is the biggest, is free and offers shared SSL.
JQuery - Use a CDN for this which will be needed for things like FancyBox. Use Google, Microsoft or Cloudflare's. The cnances are the files will already be cached in the visitor's browser if this is done.

Other Notes

Do not need to use breadcrumbs to help navigate the site. The site is wider than it is deep - the sections are usually only 2 layers deep eg Home > Bristol.

Get rid of GoStats – it no longer works. Maybe find another in addition to Google Analytics.

Do not load Prism or Fancybox unless it is needed on the page.

This page created December 1, 2019; last modified Janaury 25, 2020