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.
Avon Gorge from Hotwells, Bristol, UK
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.
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 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.