Jump to content
biber

PW-sites not for Ipad/Ipod/IPhone?

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

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...