Month: October 2019

Fluid inline-block products browsing page

The advantage of a fluid inline-block strategy to display product thumbnails is that the thumbnails will arrange themselves according to the screen size.

The drawback is that, if the images have various widths, their alignment will be completely jagged on a mobile display. In case the height varies, they will be jagged in large screen too, so it requires to use standard width and height. The length of the product name can also be a problem, pushing the next product card to the line below. For that reason, you want to have media query so that the card takes 80% of the width of the screen on the smallest screen size to have your products display on one column.

Last drawback for which I don’t have a solution yet is centering. The inline-block div will align left and if there is a gap on the right that is even one pixel too small for the next card, the space will be left blank. It’s up to you if you consider this acceptable or not.

Grid system

A grid system allows to keep everything nicely organized. The drawback is, for it to work, you will have to set break points to change your grid organization depending of the screen size. The number of screen size available on the market is already quite large and you want to check how your page will look on various display (first and foremost the most popular ones). But there will be new ratio of screen display coming up in the market that will be in between your existing break point and might break your carefully crafted design.

To avoid this issue, I style the website starting from the smallest screen currently on the market and then I use the “responsive” feature of the dev tool and change the screen size until the design “breaks”. That’s where I set my new break point and implement new rules.

All is perfect in the best possible world you would say, but I actually also like to use bootstrap framework and it has breakpoints on its own.

And if you are using other CSS framework they also comes with their own breakpoints and they might fit so well the latest device on the market, same if you use a theme you have not developped etc.

Another option is to use Flexbox.

Let’s summarize what we have seen regarding picture display:

Adapt the size of your picture by using souce set html element.

<picture>
 <source media="(min-width: 376px)" srcset="https://path/to/picture.jpg">
 <source media="(max-width: 375px)" srcset="https://path/to/picture.jpg"> 
 <img class="center" alt="alt text" src="https:// path/to/picture.jpg ">
</picture> 

Normalize the width and height of your picture

Normalize the width on your pictures. If slightly different picture width won’t look bad on a large screen, due to the width of the div being larger than the width of the picture, the picture grid might be completely jagged on a mobile display simply because the width of the div is not large enough to compensate for variation in the width of the pictures. That looks terrible. One reason you might want to have thumbnails of different width is when you have picture representing object of the same height but of different width. If you set the width to be the same on both type of object, the larger one might appear smaller (if you keep its proportion right, reducing its width will also reduce the heighth of the picture). It is not really desirable.

One colum display on small mobile screen

The second option that is used by most webshop is to switch to a one column display when the screen size goes below a certain point. That seems a sensible decision. The draw back is that you have to scroll through more “screens” to view all the products but at least you don’t have to dwarf large products compare to slim one or worse, have a completely jagged display.

Lazyload

Lazyload your picture, there are easy to use framework and the code is not difficult to implement.

Use large, high definition product pictures on product page

If you have an online store, people will want to check the product in detail: they will want to see the texture, the finish on the edges. Is it sharp or bezeled? etc. So give as much freedom as possible to your user to zoom in and look around your products, by having pictures of the product with different angles and zoom in some details.

Use webp

There are excellent solution available to serve webp to supporting browser without bothering with javascript. I recommend the Webp Express plugin for wordpress and webp on demand. For more options you can check my article on serving webp and jpeg2000.

There is an excellent article on coderwall.com on the topic already:

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

In a nutshell: Look for .navbar-toggle and change the media query in which it lives. @media (max-width: 768px) Here you can input the value at which you want your menu to change from mobile to desktop.