Jump to content

PW-sites not for Ipad/Ipod/IPhone?


biber
 Share

Recommended Posts

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?

screenshot_small.jpg

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by szabesz
typo
  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...
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. 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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>

:P just my opinion of course.

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...