How I've created Minus28 - 2

Part 2 - 09th July 2016

Time to go a bit more into detail on how I'm creating Minus28.comTime has passed, I've learned more than I knew when I wrote the part 1, especially through the use of Javascript and Jquery.

play_arrow Testing to improve.

I think one of the best away to get better at coding is to test what you do. This means testing live what you are coding, as I said in part 1. Use the "border" attribute when you feel lost with all your boxes!You can also test using the Dev Tools: I didn't really know about that before but it's actually really useful. In Chrome, Mozilla, Opera, IE... you can just right-click on your page, on any part you want to get info about and then click "Inspect" (or similar). This will open a small window with a lot. (This is actually the way to use the LiveStyle plugin on Sublime Text 2). In this big amount of info you can for example see all the css that applies to the element you're inspecting, it's size, border, margins...And you can also test your page on other devices! Unlike I was saying in part 1, no need to pay for whatever app/software doing that! The button looks like a phone and tablet and is situated next to the "Elements" tab at the top (on Chrome). Play with multiple devices, resolutions, DPR to ensure all of your user will enjoy the experience of browsing your page. Talking about DPR, Device Pixel Ratio, that you can link to "Retina screens" which you've probably heard about, check the part about images below.Another way to improve your page is to use Speed test websites to understand what goes well or wrong regarding how fast your website is to load. I want to display many nice resolution pictures on Minus28, which makes it slower but I've managed to improve a bit thanks to these tools. Let's talk more about that in the following section.

play_arrow Speed testing and mobile friendliness.

There are many websites offering speed testing and explaining you what to do to improve.

Think with Google is one of them. They test mobile friendliness, speed and desktop speed. They create a report with all the good and bad points and send you to the documentation for the issues they find. Reading this documentation will give you a good basis on what to consider to improve your webpage speed.

GTMetrix goes more into details, they really show you which picture is too big, by how much it can be reduced, which script is too long to load... Some details are hard to understand for beginners and from what I understood, there are some issues you can't fix as they are more third-party related (social media widgets, google analytics...).

Dareboost offers 5 analysis for free per month, so choose well... But the analysis are also really detailed with explanation, what to change and how.

Which ever tool you use you will go through the following non-exhaustive list of criteria:play_arrowAvoid plugins: Flash, Java, even JQuery are not always supported, or fail loading, which can increase consequently the speed but also make the experience awful.play_arrowMinify Ressources: HTML, CSS, JS files can all be minified, which means removing all the nice spacing, comments you've put to reduce it to one single block of text, faster to read for the browser. There are plenty of minifiers online, just be careful when you minify your HTML, some don't deal well with the scripts you can have inside which can result in making a mess with your page!play_arrowOptimize delivery: you need to know that your browser has to read the CSS files to start rendering your page. If the CSS file is huge, it will take more time. In some cases it is recommended to include the "basic CSS" in the HTML at least for the "above the fold" content to be able to load. Another point is to move all the scripts you can to the end of the page, avoid putting it in the "head" tag. Some script can also be asynchronous: the tag "async" will make them load later but be careful here, some need to be loaded at the beginning!play_arrowLeverage browser caching: This one gave me some hard time trying to understand! This is obviously related to which files the browser can cache and for how long. I've found many website explaining how to fix it with "headers" but I never knew where to fix it! Actually you might have a .htaccess in the wwww file on your server (if it's base on Apache) that you've never opened and that's the magical file! This is where you can configure many things regarding how browser deal with your page. I recommend this article to get more about how you can configure caching there. This file might also be related with "Gzip" compression, another criteria of speed you can come across. I'm not sure how this one works, I've just tested my compression on Gidnetwork where it says compression is enabled (probably thanks to my server!).Going through the whole list of criteria to improve speed will take time but you will learn a lot! Maybe you should even go through it before starting coding, to understand what you need to be careful with.

play_arrow Optimizing Images

As I said earlier, Minus28 is full of pictures, and my goal is to keep them good quality. Not an easy task for a beginner! I've got all the speed testing tools telling me my pictures were not optimized at all.My first biggest mistake was to not save them properly. "Save as" is not the best idea, neither saving it "bigger just in case". You should use "Save for web", ensure you use the proper dimensions and you don't need a resolution higher than 72px/inches. I now choose to go down to a quality between 60-75 as I didn't really see visual changes. Another thing when saving JPEG is the progressive property: this determinates if your picture will appear from pixelized to clean or directly clean from top to bottom. There is a lot of discussion about what to choose. I think I prefer not making it progressive so that it doesn't "ruin the woah effect", the user just sees the good picture not the bad quality one. But if your pictures are not the main content, then maybe progressive is better: the user can quickly get an idea of what is going to appear.You can also use compressing tools. I had a bad experience with one that was probably not the best, destroying totally the quality of my pictures, but I tested CompressJpeg today and it seems to be a good one.You also have to choose wisely the format of your pictures: jpeg for rasterized, PNG-8 or (even better) SVG for icons and vectors work well, PNG-24 for more detailed pictures that also need transparency.The second point here concerns how to use the pictures. With responsive grids, multiple devices, you need to ADAPT. Dimensions change but also the DPR. Screens like the Retina ones have a "density" twice bigger than "normal screens". Which means you need pictures with 4 times more pixels (2 for width, 2 for height). There are different ways to deliver the proper content denpending on the user's device (be careful with browser support, IE for example...).

With img you can use the "srcset" attribute <img src="photo.jpg" srcset="photo2x.jpg 2x"> will display the standard picture for DPR1 screens and the bigger picture for retina screens. You can also use width instead of "x": <img src="photo.jpg" srcset="photo-800.jpg 800w, photo-1600.jpg 1600w, photo-3200.jpg 3200w">This will display the smallest photo if the screen is 700px DPR1, but photo-1600 if the screen is a DPR2. Don't forget that when you use "w", the src picture needs to be also included in the srcset. You can add a "sizes" attribute to indicate how big the picture is going to be on the whole page: <img sizes="(max-width: 800px) 100vw, 80vw" srcset="photo-800.jpg 800w, photo-1600.jpg 1600w, photo-3200.jpg 3200w" src="photo-1600.jpg"> This time the browser will take into consideration the device viewport size, the DPR and the size you indicate the picture should be to choose the proper one to display. There are more ways to use it, just check google depending on your special case.

Another way is using "picture" tag: <picture><source media="(max-width: 800px)" srcset="photo-800.jpg, photo-1600.jpg 2x"><source media="(min-width: 801px)" srcset="photo-1900.jpg, photo-3800.jpg 2x"><img src="photo-1600.jpg" srcset="photo-3800.jpg"></picture> This solution is growing, not supported yet by IE, but probably the one used more and more.

Finally with background you have the good media-queries solution in the CSS: @mediaonly screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),only screen and (min-resolution: 192dpi) and (max-width: 800px),only screen and (min-resolution: 2dppx) and (max-width: 800px),only screen and (min-width: 801px){#photo{backrgound-image: url("photo-1600.jpg"):}} This will show the photo-1600 for DPR2 screens up to 800px viewport width and also for DPR1 screens from 801px viewport width.

play_arrow Javascript and Jquery

I'm now using more scripts to improve the experience on Minus28. But the first way you should consider using a script is when you want to apply the exact same block to many different pages, for example a footer. To do so you can create a footer.html with its own CSS and import it on every pages using the script: <script async> $(function(){ $("#footer_position").load(" /footer.html");}); </script> and with a div#footer_position where you want to put the footer. I'm also using it for the side bar on blog posts, really convenient as you don't need to change each file, just the imported one.You've probably noticed that on wider than 767px devices, the menu bar is getting sticky when you scroll down and the background changes. Here is how it's done: <script async>$(document).ready(function(){$(window).bind('scroll', function() {var distance = 350;if ($(window).scrollTop() > distance) {$('#sticky').addClass('stick');}else {$('#sticky').removeClass('stick');}});});</script> When the scrolling reaches 350px distance, the class "stick" is added to the menu bar and the CSS corresponding is applied.The popup image that appears when you click the "thumbnail" version is called a lightbox and I'm using this LightGallery plugin. What I like is that it is easily made responsive. Just follow the tutorial there and you will find a solution for your own case, here is how the pictures (which are actually background-image) pop up on Minus28: <div id="gallery"><a class="gallery-item" href="poland/pol_1-1600.jpg" data-srcset="poland/pol_1-400.jpg 400w, poland/pol_1-800.jpg 800w, poland/pol_1-1600.jpg 1600w, poland/pol_1-2050.jpg 2050w, poland/pol_1-3200.jpg 3200w" data-sizes="(max-width: 1024px) 95vw, 75vw" title="Warsaw Zamkowy square"><figure class="col-5 shadowleft" id="pol1" title="Warsaw Zamkowy square"></figure></a></div>

<script src="lightgallery.js"></script><script>$('#gallery ').lightGallery({selector: '.gallery-item',download: false,});</script> Finally, (yeah! I'm almost done, thanks if you've been reading until here!) the new maps in the "Travel" part are also working on JQuery but I'll do a special article for that.

Tips Summary

Organize

Before starting, you have to plan things. At least have a quick mockup of what you want you website to look like but also an idea on how the different pages will be organized.

Don't forget that the folders you create and the names you give to your files will be the ones displayed in the URL.

Pick class and id names really wisely! They need to define clearly what they identify, or after creating a few pages you will be completely lost. Same applies for the pictures' names.

You can have a CSS file that will give the basic style to all of your pages instead of repeating it. You can also create an html that you will import in other pages for footer or sidebar for example.

Images

You need to optimize the pictures you use, this means not using bigger pictures than needed, compressing them, using "Save for web" and choosing the proper format.

SVG are getting more and more common for vector pictures as they implicitly offer responsivity.

Use media queries, srcset or picture tag to deliver the proper picture to your user.

Test

Test what you are doing as soon as it is done. Don't "batch work" before ensuring what you are going to do many times is working well once.

If you are stuck try using the "border" style to see clearly how the different boxes you've created are displaying. This is the best tool ever! ...And you can always google you're issue

Check speed test tools to understand what is required to make a fast page, and check it as soon as you start.

If you have any advice, websites, ressources to share or questions, don't hesitate to leave a comment :) .