Book publisher's website

[CodeALot]

Based on Bakery, OneforAll, MiniForm, Layerslider (wrapped in a OFA-module)

Templates built from ground up, using Skeleton CSS framework.

Bakery was heavily customized. Each booktitle in the catalogue can have up to 10 categories attached to it. Visitors can select categories to see all titles that match that criterium.

In item-view of Bakery, visitors can click the author's name to see all titles by that author, or one of the categories that is assigned to that title to see all titles in that category.

Booktitles have one of 5 different availability-statusses (Available, In reprint, sold out, temporary unavailable, not yet published) - each of which can be selected by the site owner.

All in all, Bakery now has a total of 10 user definable fields (not using all of them yet, but I thought I might as well add a few extra while I was at it
 
All image processing is done using SLIR to create nice square thumbnails, regardless of the aspect ratio of the full image.
 
Mobile menu was done with SlickNav and is depending on IsMobile() (so you won't see it when you resize the window but you will on a smartphone)

URL is https://www.conserve.nl
 
Thanks to a great WB community for keeping alive the best and versatile CMS around!

[peppos]

Sorry for my poor english. There should be more people like you who work with WebsiteBaker which is a great CMS. I do not understand why WebsiteBaker remained in reality as small communities and wordpress has been so successful, for me it is a wordpress cms incomprehensible, as well as slow and absurd.
I would like to point out that the latest version of Chrome if you resize the window and gets small, the menu of conserve.nl disappears and you can not browse the pages alre. I attach picture to understand.

[CodeALot]

Sorry for my poor english. There should be more people like you who work with WebsiteBaker which is a great CMS. I do not understand why WebsiteBaker remained in reality as small communities and wordpress has been so successful, for me it is a wordpress cms incomprehensible, as well as slow and absurd.
I would like to point out that the latest version of Chrome if you resize the window and gets small, the menu of conserve.nl disappears and you can not browse the pages alre. I attach picture to understand.

Thanks for your kind words

About the resizing: that's correct. Check the small window on your smartphone and you'll see it works as it should. This is because I use Ruud's module IsMobile to check if the mobile menu should be shown.

[sky writer]

The site looks good... on desktop with full browser window.  Great work!

But what about the user experience for those who view on their desktop with the browser window minimized?  I often have multiple windows open.  The site is unusable, and the UX is vastly different from the full browser window, desktop experience.



More importantly, when I view your website on my tablet (Nexus 7) in portrait orientation, I do not get the mobile navigation (looks the same as above).  You don't even get the header, logo, site name, search...

[CodeALot]

But what about the user experience for those who view on their desktop with the browser window minimized?  I often have multiple windows open.  The site is unusable, and the UX is vastly different from the full browser window, desktop experience.

I am pretty sure that's a minimal percentage of users Most people will just open a browser and go check websites. You have to resize below 1024 width to lose the menu on a desktop-PC or laptop... Not too many people do that.

More importantly, when I view your website on my tablet (Nexus 7) in portrait orientation, I do not get the mobile navigation (looks the same as above).  You don't even get the header, logo, site name, search...

Ah, that's not good indeed. Thanks for reporting that. I'll have to edit the IsMobile-script to recognize Nexus 7's.

[sky writer]

I am pretty sure that's a minimal percentage of users Most people will just open a browser and go check websites. You have to resize below 1024 width to lose the menu on a desktop-PC or laptop... Not too many people do that.

I'm curious why you would, or more importantly, why your online shop client would want to roll the dice with these kinds of assumptions, when you can use responsive design and media queries and not have to worry about these unknowns.

[CodeALot]

I don't think we're rolling so many dice here. That's where our opinions differ
(And the site -is- using responsive design and media queries, just not to the level where people who resize their browser window to such a small size. On tablets and smartphones however, the site works as intended.)

[sky writer]

Fair enough.  I wan't trying to be critical.  Like I said I think the site looks good on desktop.

Is the screen shot I included previously (as it appears on my tablet) the intended view of the Mobile site?  Again, I'm not being critical, I'm just puzzled at the total elimination of all the full site header branding (and of course the navigation which I guess you need to fix for my viewport).

[dbs]

Hi, on my tablet (in potrait mode) i see the same as with a small desktop browser.
No header, no menu, only a small blue stripe followed by the title + picture.
In landscape mode all is ok.

With media querys (without is_mobile) the problem should be solved.

[CodeALot]

Ok, you both have a point there. I'll make it work Thanks for the feedback!

[CodeALot]

Fixed. (Well, I think it is anyway ) Would appreciate if you checked again!

[dbs]

Top is top. Logo, menu, search is there. 
Bottom is now a sitemap or the complete menu.

[CodeALot]

Top is top. Logo, menu, search is there. 
Bottom is now a sitemap or the complete menu.

Ah, one class forgotten. Should be fixed now too. Thanks for checking!!

[dbs]

All top.   

[CodeALot]

Fair enough.  I wan't trying to be critical.  Like I said I think the site looks good on desktop.

Is the screen shot I included previously (as it appears on my tablet) the intended view of the Mobile site?  Again, I'm not being critical, I'm just puzzled at the total elimination of all the full site header branding (and of course the navigation which I guess you need to fix for my viewport).

I truly appreciate critical views from other 'web-people'. We tend to look at websites in a different way the average user does. So don't hold back
The screen shot you posted did indeed not reflect the intended view of the mobile site. I've made some changes now, and the mobile menu as well as the mobile header (+ branding and search) should appear on all viewports below 768 pixels. From 768 and up it should show the normal desktop-design.

[jacobi22]

testet on all the smartphone's and tablets from the kiddies in the house (and i have a lot of them  ) and everything works, but it doesnt work, if i use different browser addons for my desktop, doesnt matter, if firefox or chrome. this tell's me: a browser-addon is not be the same like a real smartphone or tablet   

[sky writer]

You might regret asking me for a critique 

The site now loads properly at minimized desktop and on my tablet in portrait view.  But there are still some issues you might want to fix.

On my tablet in portrait orientation the mobile header loads AFTER the page loads.  This causes a jump down of all loaded content when the header takes it's place.  This could be fixed rather easily by increasing the min-height of your header element from 10px to 93px (I think this was the result of my testing, I can't remember the exact number).

But a bigger issue is the fact that the mobile header stays in place, underneath the desktop header, when I resize my browser window above the 768 break point.  I know this is not something everyone will do, so I wasn't going to bring it up... but then I checked on my tablet, and the same thing happens if I load the page in portrait orientation and then rotate my tablet to landscape orientation.  Now, this IS something a lot of people will do on their mobile device, so it's definitely worth some attention.  A refresh or changing page fixes the issue, but it's still worth addressing.

Perhaps a simple display: none for the mobile header above a certain break point will suffice.

Here is what happens when I resize above 768 break point on desktop (the end result is the same on tablet):



Hope this helps.

[CodeALot]

You might regret asking me for a critique 

Not at all! Much appreciated!

The 'double header'-issue should be fixed now (breakpoint again 768px)

[peppos]

  Happy to have sparked the whole discussion, now I see all right.
I found this flaw also on other templates, especially when a vertical menu is used instead of a horizontal menu (for example on some responsive free template of wbce.at). I believe that the responsive vertical menu for WebsiteBaker is not widespread, it is preferred almost always horizontal.

[CodeALot]

This template was made from scratch by me, the vertical menu was a specific wish of the client.

[Clemenson]

This template was made from scratch by me, the vertical menu was a specific wish of the client.

Great job, the design looks very nice.

[CodeALot]

Great job, the design looks very nice.

Thanks

[Hans]

Erg mooi gedaan!! Veel complimenten!

[adnanmarzuki]

nice job dude,  your design cool sleek and clean....i m new in website baker , hoping i can create my own template