PW-sites not for Ipad/Ipod/IPhone?

[biber]

Hi,

I've tried to test my sites http://bielenberg-soerup.de and http://malabu.de on different hardware. Because I dont have any apple-equipment I used some websites, which promise to show the content on IPhone and Co (http://www.responsimulator.com, http://mobiletest.me). But none showed my pages. In general they seem to work, I tested it with my old site http://bielenberg.hostingkunde.de.

Is there anyone with real equipment, who can tell me, if the pages are shown correctly?

[Klenkes]

A quick look at   http://bielenberg-soerup.de  seems pretty okay on an Ipad Mini, both landscape and portrait.

http://malabu.de has some issues on portrait because the sidebar menu gets partially covered by the content, but not unusable. You can see for yourself when resizing your browser window!

[biber]

@Klenkes:

Thanks for your fast reply. I know, malabu.de is not yet mobile-ready, I'm working on converting it to a flexbox-design. This will still take some time because I'm just a hobby-webdesigner.

[Christophe]

https://developers.google.com/web/tools/chrome-devtools/device-mode/
You can add the device pixel ratio with the 3-vertical-dots menu in the top-left panel. 

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
Firefox or Firefox Developer Edition: https://www.mozilla.org/en-US/firefox/developer/.

http://www.opera.com/developer/mobile-emulator

https://chrispederick.com/work/web-developer/

[dragan]

I see this error when looking at http://www.bielenberg-soerup.de/center/ with Chrome, and console open in phone mode...

 

What I also found strange: when opening the hamburger menu on mobile, there is no "close menu" icon visible...

 

 

[Klenkes]

1 hour ago, dragan said:

What I also found strange: when opening the hamburger menu on mobile, there is no "close menu" icon visible...

Haha... that fooled me too!
That's because there is no mobile menu to open. The hamburger icon is just an anchor link to the bottom of the page. That is where the menu is already shown.

Confusing...

[biber]

Hi and thank you again,

yes, @Klenkes, you are right, this was my simple solution to hide the menu. I've tried some methodes to solve that menu open/close problem, but for I use only pure html and css, I did not find another good example yet. For me it sounds logical: I want to go to the next page - click on Menu - the long menu appears - I choose a page - the menu vanishes again.

@dragan: I know about that issue, but did not find the reason yet. All other links work OK, but the top links 'Pflanzenhof' and 'Gartengestaltung' should lead to the part of the menu belonging to that part of the nursery.  For that I use the following code, slightly modified from the main menu:

<?php include("./_head.php"); ?>

<div id='haupt'>

<ul>
	<?php 
	echo '<img src="'.$page->logo->width(300)->url.'" alt="'.$page->logo->caption.'" title="'.$page->logo->caption.'">';
		// top navigation consists of homepage and its visible children
		$grouppage = $page;
		$children = $grouppage->children();


/**
 * Recursive traverse and visit every child in a sub-tree of Pages.
 *
 * @param Page $parent root Page from which to traverse
 * @param callable $enter function to call upon visiting a child Page
 * @param callable|null $exit function to call after visiting a child Page (and all of it's children)
 */
function map(Page $parent, $enter, $exit=null)
{
    foreach ($parent->children() as $child) {
        call_user_func($enter, $child);
        
        if ($child->numChildren > 0) {
            map($child, $enter, $exit);
        }
        
        if ($exit) {
            call_user_func($exit, $child);
        }
    }
}



map(
    $grouppage
    ,
    function(Page $page) {
        echo '<li><a class="men" href="' . $page->url . '">' . $page->menutitle . '</a>';
        if ($page->numChildren > 0) {
            echo '<ul>';
        }
    }
    ,
    function(Page $page) {
        echo '</li>';
        if ($page->numChildren > 0) {
            echo '</ul>';
        }
    }
);
		
		?>

		</ul>
</div>

I am still learning and am very glad to have the friendly help from you all.

[szabesz]

On 10/10/2016 at 1:18 PM, biber said:

I did not find another good example yet

You might find something here: http://navnav.co/ It looks like the classic "Off-Canvas Navigation Menu" is the one you might like to build upon.

As for the memory problem, isn't it an image resize problem by any chance? E.g.:

 

Edited November 6, 2016 by szabesz
typo

[biber]

If I do it without a logo on top, the page comes as I expect it.  Especially in the mobile version it may be a little bit confusing to see the same menu one below the other, but is that a big mistake?

@szabesz: The off-canvas menu uses javascript, which I tried to avoid.

[szabesz]

You migth want to give a try to a CSS only off-canvas menus:

https://www.google.hu/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css+only+off-canvas+menu

"..big mistake?" It depends but if you do not want to confuse your visitors, you need to find better solutions.

Edited October 11, 2016 by szabesz
typo

[biber]

@szabesz : Thanks for the hints. I looked at the several alternatives, maybe I will use it later. For now I have changed the content of the 'Pflanzenhof'- and 'Gartengestaltung'-pages so that the visitors see 'real' content. This seems to be better.

If now all visitors with current mobiles are able to see an error-free site I will be satisfied.

[fmgujju]

Use https://blisk.io/ for mobile testing. 

[deltavik]

On 10/10/2016 at 7:18 AM, biber said:

Hi and thank you again,

yes, @Klenkes, you are right, this was my simple solution to hide the menu. I've tried some methodes to solve that menu open/close problem, but for I use only pure html and css, I did not find another good example yet. For me it sounds logical: I want to go to the next page - click on Menu - the long menu appears - I choose a page - the menu vanishes again.

@dragan: I know about that issue, but did not find the reason yet. All other links work OK, but the top links 'Pflanzenhof' and 'Gartengestaltung' should lead to the part of the menu belonging to that part of the nursery.  For that I use the following code, slightly modified from the main menu:

<?php include("./_head.php"); ?>

<div id='haupt'>

<ul>
	<?php 
	echo '<img src="'.$page->logo->width(300)->url.'" alt="'.$page->logo->caption.'" title="'.$page->logo->caption.'">';
		// top navigation consists of homepage and its visible children
		$grouppage = $page;
		$children = $grouppage->children();


/**
 * Recursive traverse and visit every child in a sub-tree of Pages.
 *
 * @param Page $parent root Page from which to traverse
 * @param callable $enter function to call upon visiting a child Page
 * @param callable|null $exit function to call after visiting a child Page (and all of it's children)
 */
function map(Page $parent, $enter, $exit=null)
{
    foreach ($parent->children() as $child) {
        call_user_func($enter, $child);
        
        if ($child->numChildren > 0) {
            map($child, $enter, $exit);
        }
        
        if ($exit) {
            call_user_func($exit, $child);
        }
    }
}



map(
    $grouppage
    ,
    function(Page $page) {
        echo '<li><a class="men" href="' . $page->url . '">' . $page->menutitle . '</a>';
        if ($page->numChildren > 0) {
            echo '<ul>';
        }
    }
    ,
    function(Page $page) {
        echo '</li>';
        if ($page->numChildren > 0) {
            echo '</ul>';
        }
    }
);
		
		?>

		</ul>
</div>

I am still learning and am very glad to have the friendly help from you all.

a css framework like bootstrap or foundation can make your life easier with menu-toggle and responsiveness. 

As far as testing across devices is concerned, safari has built-in support for viewing your site across devices. 

[szabesz]

7 hours ago, deltavik said:

a css framework like bootstrap or foundation can make your life easier with menu-toggle and responsiveness.

True  I've looked at almost "all of them" also tried out a lot, but the most (css) beginner friendly vs feature rich is http://materializecss.com/

Materialize CSS can be actually used by only the means of vanilla css overwriting its rules if one does not want to fine tune it by using Sass at all.

7 hours ago, deltavik said:

As far as testing across devices is concerned, safari has built-in support for viewing your site across devices.

The same is true for Chrome, probably others too. But we should not forget that simulation is never the/a real thing.

[biber]

Before I came to PW, I wrote my websites in simple text-editors, finally with notepad++, which is a great help even for HTML, CSS and PHP. So I'm familiar with HTML-tags and CSS-syntax. I like to keep things simple to realize fast loading and good care. Therefor I did not yet use any framework or even a WYSIWYG-generator.

And that is why I like PW: I have the freedom to write and control my own code. But I'm shure, I have to learn much more about all the convenience this program can give to me. Thanks to You all.

[SamC]

6 hours ago, szabesz said:

True  I've looked at almost "all of them" also tried out a lot, but the most (css) beginner friendly vs feature rich is http://materializecss.com/

This looks quite cool although I personally only ever seem to use bourbon/neat for grid and a few helper things. Never used a full blown framework as I just write the sass as I go along. One thing I like about bourbon/neat is that you don't end up with stuff like this:

// materialize
<div class="col s7 push-s5">
    What's this div for again?
</div>

// bourbon/neat
.news-item
@include span-columns(6 of 12);

<div class='news-item'>
    Ah, sanity restored.  
</div>

 just my opinion of course.