Although I like Sparkle, I’m finding the menu options severely limiting in 320 pixel “Portrait Smartphone” view. A ‘hamburger’ menu box seems to be about the only option available as far as I can see. This seems odd given mobile versions of websites are now more important to Google than the PC version. Friends and customers have both commented how the hamburger is not something they instinctively see as needing touching to find a menu list.
Are there better menu and link designs available in Smartphone view and it is me failing to see how to design them? Or is a ’ hamburger’ all there is? I’ve had a look at the example website designs on the Sparkle website and shockingly, none that I looked at are actually mobile-friendly by Google standards, i.e text and links to small to read on my iPhone. Even the Sparkleapp.com website itself would be rejected by Google Search Console as mobile UN-friendly as far as I can see.
The Sparkle documentation says very little about menu and link design in mobile view. Is there something I’m missing? Or is there something better and more flexible in development?
@Mike4, Unfortunately that hamburger is all over the web and in apps across the different platforms so it is very common and stats. show it being used. But in saying that I do understand what you are saying here about the limited mobile navigation but for now it does work with a bit of tlc.
The designers Sparkle site offerings are all in the 960px breakpoint so the idea is that you download them and personalise it and go further with making it tablet and mobile friendly. The Sparkleapp website… I know it is changing a lot and maybe Duncan & the Team just haven’t got around to it as I know they are working hard on the next big iteration but I’ll leave it to them to answer you on that.
Duncan & I have a had a few good chit chats regarding the mobile breakpoint and navigation was one of them so I have a good feeling it is going to be addressed on the next big iteration.
I have been experimenting with the mobile navigation to see how far I can push it and having fun. Knowing the hamburger is an image you can always change it to something else or even have it say “menu” which would only show on mobile…
@Mike4 Here is a very easy and stable workaround.
Create a new section. Name it for example ‘navigation’
Create a new blank page in this section. Name it for example ‘navigation’
Create a vertical menu on the page.
Deselect ‘add pages auto’.
On the original pages: make a button (all pages) and link this button to the navigationpage. It can be anything, a button, a word, an illustration …
Create the pages you want in the menu of the navigationpage and link them with each page you want.
Now you can change the page background, the menu background, rollover, colors, font, fontsize, …
whatever you want.
In pagesettings:
search engines: deny index, deny archive
Shared image: none
No searchresults
You only have to lay-out the 320px and 480px.
Now you have a navigationpage only for these devices.
Here is an example:
View it on a smartphone or drag your browserwindow until a 320px view.
@FlaminFig, many thanks for your detailed reply. I agree with your comment that the hamburger symbol is in widespread use but I was surprised to find a couple of fairly computer-literate friends still didn’t recognise it as a menu button on a smartphone and thought my site was a one page site. Changing the image to an image of the word “Menu” is a blindingly obvious fix that didn’t occur to me so very grateful for that suggestion!!
@RPX, thank you too for this suggestion. Being the opposite of a ‘power user’ myself (my sites are simple text and images sites) I think I understand your suggestion and I’ll do some experimenting shortly when actually earning a living permits. The fact that my sites are still keeping me busy with work illustrates they still pull in the work despite my wish to improve the mobile links!
I need to spend some more time learning what the various settings for menus are for. Is there any documentation explaining what the settings do or is it just a case of experimenting?
I had a good read over it and have been experimenting ever since and it will surprise you what you can do with it within its present parameters… have fun!
@RPX Ok I’ve done some experimenting and your suggestion of a whole page specifically for the menu, linked to with a “Menu” button works really neatly thank you!
I have a problem though, which must be easy to fix but I can’t actually see how. Two problems actually implementing this idea on the smartphone version of my site but not the PC version. Can you or anyone point out what I’m missing please?
How do I display the “Menu” button on all pages of the smartphone version of my site but exclude it from all pages on the PC version? I’ve un-ticked “Show on this device” but it still shows on all my PC device pages.
Similarly, how do I persuade the original horizontal menu on the PC version of my site to remain on the PC pages whilst deleting it from the smartphone pages? Again, if I select the menu itself whilst in PC view and untick “show on this device”, it still shows.
This is surely not that difficult but I can’t seem to see how!
@Mike4, Ok…
Point 1 - go to all other “device” layouts (excluding mobile) and click on the mobile button and then untick “Show on this device”.
Point 2 - the same way by going to all other devices other than desktop and click on the menu and then untick “Show on this device”.
I’m sure you must know by now through trial and error if you delete anything from the “Devices” you created from your original desktop layout then it will delete across all “Devices” including the desktop.
Ok, I hope that helps…
Thanks, this is how I thought it should work. The thing that fooled me is how the element remains in view on the screen after un-ticking the “Show on this device” box. Checking “Preview” shows the element is not displayed in the real mobile site even though still visible on the Sparkle page design view.
@Mike4, There is a solution for that…
If you look at the top left under “Grid” you’ll notice an eye icon named “Hidden Elements”. If you toggle it then the elements you’ve asked to not show on this device will not show on the Sparkle canvas anymore. Give it a try…
This illustrates one of the things I love about Sparkle. Whatever I ask about, there always seems to be a well thought out solution in place already!
I have another design idea relating to menus that might not be possible but I’ll try it anyway. I’ve seen a number of mobile sites where the menu links are displayed in a list under the header just as in your Gin Whisky Tonic site example above, but instead of displaying just the links, the web page content currently displayed gets moved downwards (except the header) and the links list inserted above the page content.
Is this possible? Or easy, even?
Many thanks…
Edit to add, here is an example mobile site that does what I mean.
