WebsiteBaker Community Forum

General Community => WebsiteBaker Website Showcase => Topic started by: CodeALot on February 02, 2017, 08:04:55 PM

Title: Book publisher's website
Post by: CodeALot on February 02, 2017, 08:04:55 PM
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  (https://www.conserve.nl)
 
Thanks to a great WB community for keeping alive the best and versatile CMS around!

(https://www.netweters.nl/media/netwetersslider/images/item16/Conserve.png)
Title: Re: Book publisher's website
Post by: peppos on March 03, 2017, 01:23:20 PM
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.
Title: Re: Book publisher's website
Post by: CodeALot on March 03, 2017, 03:24:11 PM
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.
Title: Re: Book publisher's website
Post by: sky writer on March 03, 2017, 09:21:05 PM
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.

(https://i.gyazo.com/2d82f3e013bb682093b6ec91512b7d6a.png)

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...
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 12:53:41 AM

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.

Quote
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.
Title: Re: Book publisher's website
Post by: sky writer on March 04, 2017, 01:08:19 AM
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.
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 01:34:17 AM
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.)
Title: Re: Book publisher's website
Post by: sky writer on March 04, 2017, 02:54:16 AM
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).
Title: Re: Book publisher's website
Post by: dbs on March 04, 2017, 08:20:44 AM
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.
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 11:09:37 AM
Ok, you both have a point there. I'll make it work :-) Thanks for the feedback!
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 11:48:59 AM
Fixed. (Well, I think it is anyway :-) ) Would appreciate if you checked again!
Title: Re: Book publisher's website
Post by: dbs on March 04, 2017, 12:00:19 PM
Top is top. Logo, menu, search is there.  (Y)
Bottom is now a sitemap or the complete menu.
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 12:07:18 PM
Top is top. Logo, menu, search is there.  (Y)
Bottom is now a sitemap or the complete menu.
Ah, one class forgotten. Should be fixed now too. Thanks for checking!!
Title: Re: Book publisher's website
Post by: dbs on March 04, 2017, 12:08:08 PM
All top.  (Y)  :-)
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 12:14:31 PM
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.
Title: Re: Book publisher's website
Post by: Gast on March 04, 2017, 01:00:15 PM
testet on all the smartphone's and tablets from the kiddies in the house (and i have a lot of them  :oops: :-D ) 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   :wink:
Title: Re: Book publisher's website
Post by: sky writer on March 04, 2017, 03:35:42 PM
You might regret asking me for a critique  >:D ;D

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):

(https://i.gyazo.com/b083b07556eacb25d5d3be3ee46589d5.gif)

Hope this helps.
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 04:14:30 PM
You might regret asking me for a critique  >:D ;D
Not at all! Much appreciated!

The 'double header'-issue should be fixed now (breakpoint again 768px)
Title: Re: Book publisher's website
Post by: peppos on March 04, 2017, 09:14:07 PM
 :-P 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.
Title: Re: Book publisher's website
Post by: CodeALot on March 04, 2017, 09:38:22 PM
This template was made from scratch by me, the vertical menu was a specific wish of the client.
Title: Re: Book publisher's website
Post by: Clemenson on July 22, 2017, 08:25:11 AM
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.
Title: Re: Book publisher's website
Post by: CodeALot on July 24, 2017, 12:56:07 PM
Great job, the design looks very nice.

Thanks :)
Title: Re: Book publisher's website
Post by: Hans on July 25, 2017, 12:46:49 AM
Erg mooi gedaan!! Veel complimenten!
Title: Re: Book publisher's website
Post by: adnanmarzuki on September 04, 2017, 05:46:03 PM
nice job dude,  (Y) your design cool sleek and clean....i m new in website baker , hoping i can create my own template