WebsiteBaker Support (2.8.x) > Templates, Menus & Design
Non responsive template
Gast:
--- 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
--- End quote ---
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';
--- End quote ---
(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: ---ob_start(); //fetch Headline
page_content(4);
$page_contentHeadline = \ob_get_clean();
--- End code ---
and
--- Code: ---<?php if(trim($page_contentHeadline)!=''){ ?>
<div class="headline">
<div class="contentHeadline">
<?php echo $page_contentHeadline; ?>
</div><!-- contentHeadline -->
</div><!-- headline-->
<?php } ?>
--- End code ---
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: ---// 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';
--- End code ---
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.
--- End quote ---
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
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
CodeALot:
--- Quote from: 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.
--- End quote ---
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 :)
dbs:
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. ;-)
johnbroeckaert:
@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:
HK:
@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?
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version