WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: HK on September 03, 2018, 10:59:43 AM

Title: Non responsive template
Post by: HK on September 03, 2018, 10:59:43 AM
I would like to argue to maintain at least one non responsive template for websites in WebsiteBaker.
Sometimes the overview that provides a non-responsive home page is an advantage, even on a small screen.
Many smartphone users have no problem to enlarge of the image with, for example, the menu as they are already used to do so viewing photos.
Responsive design does not always have to be preferred. Non responsive templates are easier te be styled.
I would like to argue to maintain, for example, AllCSS as a non-responsive template; to update it for new versions of WB, and to facilitate a download possibility. Also it would be nice if the possibility for extra block(s) were added.
What about a discussion on this topic?
Title: Re: Non responsive template
Post by: CodeALot on September 03, 2018, 12:39:49 PM
If you don't understand why non-responsive is a "no-no" for SO many reasons, you can't be serious about building websites.
Further, I'd like to know the basis for your claim that "many smartphone users" don't have a problem with ill-designed websites. I don't believe that for one second.
Your next claim (non-responsive is easier to be styled) is utter nonsense.

Maybe your wish comes from a lack of knowledge on responsive webdesign, media queries and CSS that comes with it. I suggest you spend time working on that, instead of launching bad designed (non-responsive), bad scoring (Google!) websites into the world.
Title: Re: Non responsive template
Post by: johnbroeckaert on September 03, 2018, 05:31:47 PM
If you are realy serious about non-responsive websites, due to all the reasons @Codealot mentioned, then there are some older non-responsive templates here: https://wbce.at/tpls/
(look at the right  :evil:  )
Title: Re: Non responsive template
Post by: dbs on September 04, 2018, 11:22:03 AM
I have already been asked to integrate a button for desktop view. So mobile users can switch.
If the customer wants this, it is not a question of understanding responsiveness.
Title: Re: Non responsive template
Post by: HK on September 09, 2018, 09:44:26 AM
@CodeALot: There is no need to be aggressive in your reaction.
You don't give any of your SO many reasons. Of course I know some but maybe I missed a few.
The basis for my claim is a test under the users of my website http://www.pierewaaienscheveningen.nl that needed an upgrade. I made 2 alternative websites to test: https://pierewaaienscheveningen.nl/wordpress/ and http://pierewaaienscheveningen.blogspot.com. Sorry for shopping around!
Reactions were in favor of the old, non responsive website and people indicated that is was no trouble enlarging the image on their small screen to be able to handle the small menu items. This was not what I expected as I was planning to build a responsive website to replace the old one. As is the favorite point of view in the website builders world, this was a surprise to me also.
Quote
Maybe your wish comes from a lack of knowledge on responsive webdesign, media queries and CSS that comes with it. I suggest you spend time working on that, instead of launching bad designed (non-responsive), bad scoring (Google!) websites into the world.
May I say this is a bit arrogant? My ambition is not to be a top designer of websites, I am just a handyman that maintains some websites for people I am related to. As I well remember WebsiteBaker was originally set up as a tool to do precisely that.
My point is that non responsive is not the same as ill-designed as you stated. A point taken is that Google search classifies responsive websites higher than non responsive ones. It should not be in my view; let us see what a real discussion can bring us.
@John Broeckeart:
I followed the link you gave, but found no 'older non responsive templates' there. I was happy to still have the code for the AllCSS template, which can be adapted with a show-menu2() and functions well under WB2.10. I just wish there was a possibility to use extra blocks; maybe I will try to find out how to integrate this in the future.
@dbs:
Can I see your reaction as a confirmation that some users prefer to see a non responsive layout on their small screens? Thanks for backing me up in this discussion!
Title: Re: Non responsive template
Post by: Gast on September 09, 2018, 02:02:16 PM
Quote
I just wish there was a possibility to use extra blocks; maybe I will try to find out how to integrate this in the future

short version:
add some block definitions in the file info.php of the used template like
Quote
$block[1]             = 'Main';
 $block[2]             = 'Teaser';
 $block[3]             = 'Sidebar';
 $block[4]             = 'Headline';
 $block[5]             = 'Main2';
 $block[6]             = 'Footerline';
(green: the original block in AllCSS, blue = new added blocks)

then go to addons -> advanced -> activate checkbox for templates -> click on the button to reload
after that, you can use the new blocks in your template with a code like this

Code: [Select]
ob_start();  //fetch Headline
page_content(4);
$page_contentHeadline = \ob_get_clean();

and

Code: [Select]
<?php if(trim($page_contentHeadline)!=''){ ?>
        <div class="headline">
          <div class="contentHeadline">
          <?php echo $page_contentHeadline?>
          </div><!-- contentHeadline -->
        </div><!-- headline-->
<?php ?>

that means: if you have somewhere on your pages a block, called "Headline", it will show the content of this blog. on pages without this block, it will show nothing instead of this block. with these method and some little php-code, you can remove the sidebar, if not needed, split the content area in multiple rows etc

what you need, is the css for that two classes headline and contentHeadline

in my base template, i use 8 content blocks like
Code: [Select]
// Definition of content blocks
$block[1]            ='MainContent';
$block[2]            ='Right Block';
$block[3]            ='Teaser';
$block[4]            ='Anynews';
$block[5]            ='Contactbox Left';
$block[6]            ='Contactbox Right';
$block[7]            ='Bottom Block';
$block[8]            ='In-Footer Block';
the main block has 100% width, if there is no side bar content (right block). otherwhise 70% / 30%
teaser is a stand-alone-block in the top of the page, 100% width
anynews the same under the main content, 100% width
Contactbox left & right has normal 50% / 50% or 100%, if i use only one of them. the different is float:left for the left box and float:right for the right box
Bottom block has 100% , position is over the footer
In-Footer is a block inside of the footer, mostly in use for a footer menu or special datas like a bank account etc


long version:
  use the WB-Help here -> https://help.WebsiteBaker.org/en/home/designerguide/contentblocks.php

personal words... it's a free world and a open source cms - everybody can do, what ever he want. the only points to have a responsive website, was google and your target group. it's no problem to scroll a page from left to right, from top to the bottom - you can use your fingers on a mobile.
for example: i have a webpage about a unique forest machine, not really important for the world, but unique. it was no problem, to use there a non-responsive design. i've ~ 50 - 80 guest every day from europe, north-& south america and asia, only text and pictures. there is nothing to buy, no advertisement, only information. google ranking is not important for me, because, it's a unique machine, i've the place 1 in google ranking for the right keywords. the visitor want's to read the informations and see some pictures - thats all

the other example (fictive): i've a page to sell some locale vegetables. possible guest are the people from the neighborhood around my village or my home town. they sitting with a mobile in a cafe, at home or there are on the way to buy products like this, so you can be sure, there use mobiles.
in this case, you need a good quality of your products, but also a good, responsive webpage. your target group is a mobile user and if you here say: a non-responsive page is enought for my buisness, for my target: sold more product like the neighboors, you get a problem. if your visitor say: oh, it's very difficult to buy something from your web shop, you have a bad handling, too much clicking and scrolling and your neighbor (locale or in the google ranking) has a better system, he goes to the other webpage (and he'll never coming back!)
Ask the question again and again and for every project: what is the target of the page and what is the target group?

your example: http://www.pierewaaienscheveningen.nl/

maybe, i'm wrong, but target here in my eyes is: found people to walk over the beach, to have a nice time. it's more fun, then a buisness. the question: is it enough, to have one event like this in 7 weeks or is the target, to have maybe one event in every week or every day? do you have events like this in your neighborhood? and if YES, they use a website for this? and if yes, a responsive website? is it possible, that the possible guests are sitting in the hotel, at the breakfast and searching the web for events like this on this day - with a mobile? the first look and the usibility - thats the important things for your webpage - if you have the same theme also on other pages in your neighborhood

Quote
Reactions were in favor of the old, non responsive website and people indicated that is was no trouble enlarging the image on their small screen to be able to handle the small menu items.

if i compare the 3 links in the top, i've to say, the non-responsive page looks at the best for me. the eyecatcher is here the picture block in the middle, i see some warm colors, it looks friendly. the other pages (wp & blogspot) looks cold, mostly a simple cold grey. in the mobile view, the blogspot page lost more and more colors, it looks like a word document, not like a webpage of interest
(https://i.gyazo.com/36f26f32ac38b62e34c2575a37998d50.png)

if you want a real answer to your question, use the same template style and the same content for all test pages, the same background (if needed), the same colors. Use corresponding colors.
my teacher say's me: use only one theme color (here the green from the menu) and adaptions of this color for the rest (see sidebar). use a corresponding contrast color for the fonts and (if needed, for other elements like a border. Never mix a flat theme with a 3D-Style (searchbox).
I change here only some colors for the sidebar, a lighter background, some borders for the menu buttons and some grey colored borders around the main block -> https://i.gyazo.com/578ab22e70b697e823f4a58e81754aae.png
Maybe, it looks better, if you use a new font, but its difficult to try this with the developer tools in the browser
Title: Re: Non responsive template
Post by: CodeALot on September 09, 2018, 09:15:42 PM
I have already been asked to integrate a button for desktop view. So mobile users can switch.
If the customer wants this, it is not a question of understanding responsiveness.

If my customer wants a non-responsive website then it's up to me to advise them otherwise. It's not only my job to build that website, it's also my job to inform them about usability, Google ranking, SEO, cross-browser compatibility, etc. They hire me because they don't have the knowledge, right?

My reply may have come across as agressive, for which I apologize, but it's more a matter of being passionate about websites and my frustration to see so many bad websites coming online, usually made by someone who knows how to install Wordpress and buy a (usually not to good) template. Building websites, tailored to the wishes and needs of my customer, is more than that.

I do however stand by my opinion that in this day and age of the web, "non-responsive" == "bad design". And that's an opinion. Feel absolutely free to disagree :)
Title: Re: Non responsive template
Post by: dbs on September 09, 2018, 11:28:29 PM
Please read more carefully. A customer of mine (with a responsive website) asked for a button in the frontend. He wanted to be able to switch to the normal desktop view with his smartphone.

Where is the problem?
Of course you have to clear it up, but only if it is necessary. ;-)
Title: Re: Non responsive template
Post by: johnbroeckaert on September 10, 2018, 01:34:31 PM
@HK
On the page  https://wbce.at/tpls/  try to use the menu on the right, for example: STYLE:  minimalist.
You get a list of templates ( click on them to see a example) and all the templates who are "outdated" are not responsive.  :wink:
Title: Re: Non responsive template
Post by: HK on September 11, 2018, 09:06:14 AM
@Jacobi:
Thanks for the extensive answer. It is good to see I am not the only Baker 'still' working with the AllCSS template that once was the default one. The link to https://help.WebsiteBaker.org/en/home/designerguide/contentblocks.php was also very helpfull.
In your answer I see: (green: the original block in AllCSS, blue = new added blocks) which means that you are working with a version of AllCSS with 3 blocks already integrated. That would be quite enough for me. My version (v2.7) has not. May I ask  to publish the latest version of AllCSS here or send the zip to me?
@johnbroeckaert:
I found what you mean, but did not find AllCSS there. May I suggest the latest version to be added in the list as it once was the default template and people (like me) might want to update their version of the template?
Title: Re: Non responsive template
Post by: Gast on September 11, 2018, 12:36:41 PM
In your answer I see: (green: the original block in AllCSS, blue = new added blocks) which means that you are working with a version of AllCSS with 3 blocks already integrated. That would be quite enough for me. My version (v2.7) has not. May I ask  to publish the latest version of AllCSS here or send the zip to me?

oh... maybe, you understand it wrong   :oops: :oops:
first part of my words was an answer to your post
Quote
I just wish there was a possibility to use extra blocks; maybe I will try to find out how to integrate this in the future

my words are a HowTo - a description, what you have to do to use more then the standard blocks in (every) template. i did not use AllCSS on my project's, i work with TWIG-templates. I use the AllCSS only for locale testing or for the support here

what i show in the screenshot was a adaption of your page with the firefox developer tools, these a some changes in the local browser cache and everything is lost, if i reload the page again

but if you need help, to change the template and add there some blocks, give a short replay with a zip from your actual template via email

P.S.: i've a zip-file with all the old templates from the wb-archive, latest version for the AllCSS is there 2.6
Title: Re: Non responsive template
Post by: hgs on September 11, 2018, 02:59:49 PM
Hier ist eine Version 2.71 die ich in meinem Archv gefunden habe.
Habe diese Version auf eine WB Beta-Version 2.12.1 installiert und alle mitgelieferten Module laufen ohne Probleme.

Google Translate:
Here is a version 2.71 that I found in my archv.
Have this version installed on a WB beta version 2.12.1 and all included modules run without problems.

Title: Re: Non responsive template
Post by: HK on September 12, 2018, 09:03:59 AM
Thanks hgs;
I see show_menu(2) is implemented in this version, but no blocks...