some quick responsive site fixes

Freeway
1

Greetings all,

My last request for info (about uploading a google verification html file) was handled so quickly and well, I thought I’d try and ask about two more issues. The most urgent is the utter crappiness of how my site looks on a phone. The most pressing issue there is the navigation menu. I works fine on a computer and the landscape view of a tablet, but is too big-and the drop downs make it worse on the phone.

www.chrisrutkowski.com http://chrisrutkowski.com/index.html

So my question is-can I replace the menu on the phone view with one that slides in from the side and then slides back out of the way of the content. And if so, will I have to update that menu separately from the main menu (I’m planning on adding a “Recordings” page under the music tab).

In general, I realize that there’s a lot I can do to make the site more professional. I do like the backgrounds (paintings by my brother) and the retro feel, so I’ll probably take my lumps on that in the cause of “authenticity”. Which leads me to the other issue-I’d like to extend the colors of the paintings beyond the borders of the painting so the background continues to what ever size the browser is. But one question at a time, and the phone browser display is the most pressing.

Many thanks,

Chris

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

So my question is-can I replace the menu on the phone view with one that slides in from the side and then slides back out of the way of the content

Are you using the CSS Menus action which give you Responsive options.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Hi Dave,

Yes the menus are CSS. Could you remind me where the responsive options are, or perhaps point me to a tutorial?

Again, I think the best option is replace the menus for phones. I’m assuming that that is an option, but I would like to hear from you more experienced folks with at least a roadmap.

Thanks!
‘
Chris

On Mar 20, 2017, at 8:49 PM, DeltaDave email@hidden wrote:

So my question is-can I replace the menu on the phone view with one that slides in from the side and then slides back out of the way of the content

Are you using the CSS Menus action which give you Responsive options.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Wait, I found the responsive options in the actions window for the CSS menu. I think my next question concerns the icon. Eg: “show icon at breakpoint” presumably replaces the menu at the chosen breakpoint, in my case for the phone, right? Then it seems I need to choose an icon-is it a graphic? Is there someplace where I can find an accepted generic menu icon (e.g., the three horizontal lines)?. I wonder if experienced users have an opinion on whether a horizontal or vertical menu works better on the phone? I suppose if the menu only appears when the icon is selected it probably doesn’t make any difference.

Thanks again!

Chris

On Mar 20, 2017, at 9:13 PM, Chris Rutkowski email@hidden wrote:

Hi Dave,

Yes the menus are CSS. Could you remind me where the responsive options are, or perhaps point me to a tutorial?

Again, I think the best option is replace the menus for phones. I’m assuming that that is an option, but I would like to hear from you more experienced folks with at least a roadmap.

Thanks!
‘
Chris

On Mar 20, 2017, at 8:49 PM, DeltaDave <email@hidden mailto:email@hidden> wrote:

So my question is-can I replace the menu on the phone view with one that slides in from the side and then slides back out of the way of the content

Are you using the CSS Menus action which give you Responsive options.

David

freewaytalk mailing list
email@hidden mailto:email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Chris Rutkowski
Creative Director, Luna Media
email@hidden mailto:email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Update:

I’ve made progress with making my CSS menus responsive-this extended Freeway reference http://download2.softpress.com/docs/Extended_Reference_For_FW7.pdf manual is pointing the way. But that leads to another layer of questions:

I’ve chosen a breakpoint at the phone level (420). Presumably that will also force the substitute menu at the smaller landscape phone breakpoint?
In order to make the sub menu structure display in substitute menu, do I need to use the “Auto-generate Navigation Menu” option? In which case I suppose I need to organize my page folder structure in the same hierarchy as the menu (as described in the extended reference manual)?

Many thanks for you patience in trying to make sense of my inexperience!

Chris

On Mar 20, 2017, at 9:24 PM, Chris Rutkowski email@hidden wrote:

Wait, I found the responsive options in the actions window for the CSS menu. I think my next question concerns the icon. Eg: “show icon at breakpoint” presumably replaces the menu at the chosen breakpoint, in my case for the phone, right? Then it seems I need to choose an icon-is it a graphic? Is there someplace where I can find an accepted generic menu icon (e.g., the three horizontal lines)?. I wonder if experienced users have an opinion on whether a horizontal or vertical menu works better on the phone? I suppose if the menu only appears when the icon is selected it probably doesn’t make any difference.

Thanks again!

Chris

On Mar 20, 2017, at 9:13 PM, Chris Rutkowski email@hidden wrote:

Hi Dave,

Yes the menus are CSS. Could you remind me where the responsive options are, or perhaps point me to a tutorial?

Again, I think the best option is replace the menus for phones. I’m assuming that that is an option, but I would like to hear from you more experienced folks with at least a roadmap.

Thanks!
‘
Chris

On Mar 20, 2017, at 8:49 PM, DeltaDave <email@hidden mailto:email@hidden> wrote:

So my question is-can I replace the menu on the phone view with one that slides in from the side and then slides back out of the way of the content

Are you using the CSS Menus action which give you Responsive options.

David

freewaytalk mailing list
email@hidden mailto:email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Chris Rutkowski
Creative Director, Luna Media
email@hidden mailto:email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

On 21 Mar 2017, 2:58 pm, Chris Rutkowski wrote:

Update:

I’ve made progress with making my CSS menus responsive-this extended Freeway reference manual is pointing the way. But that leads to another layer of questions: I’ve chosen a breakpoint at the phone level (420). Presumably that will also force the substitute menu at the smaller landscape phone breakpoint? In order to make the sub menu structure display in substitute menu, do I need to use the “Auto-generate Navigation Menu” option? In which case I suppose I need to organize my page folder structure in the same hierarchy as the menu (as described in the extended reference manual)?

I never spend a second on navigation when it comes to landscape breakpoints. Same goes for auto-populate menu’s … there’s no need to, so why should you? Just determine yourself how your menu is populated.

A 420px breakpoint is a little ‘late’ to activate mobile navigation for my taste. I’m currently playing with the 900px breakpoint to activate mobile navigation.

– Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Thanks Richard!

www.chrisrutkowski.com http://www.chrisrutkowski.com/

So, I’ve experimented with simply applying the responsive option on the menu at the tablet (768) breakpoint with my existing menu, and the result is not particularly elegant, but it is functional and I can live with it for the moment (I haven’t uploaded yet, as I’d like to refine a bit more, but I can upload immediately if someone wants to take a look).

First question: Where can I find the “hamburger” icon for the open icon for the substitute menu at the breakpoint?

My next question is: For the items that have sub-menus (“Music” and “Film”) both the main menu and sub-menu items appear in the substitute menu. However, there is no page associated with the main item, just the sub pages. Eg, for the music menu item, the viewer is presented with three sub-pages: Concert, Jazz and Lessons (soon to be added, “Recordings”). That works on the pre-breakpoint pages, but is confusing on the mobile menu. Specifically, the “Music” entry doesn’t link to anything.

Also, without the “Music” category, the sub-pages are not clear. Eg, what does “Concert” mean with out “Music”? So I can see a few possible solutions:

  1. Find a way to reintroduce the hierarchy of the main menu to the breakpoint menu, thus when you click “Music” the sub page links appear and you select on of those.
  2. Hide the category entries (e.g., “Music”) and rename the sub-pages (e.g., “Concert” becomes “Music-Concert”)

I like the first option, which is cleaner.

Once this is solved I do want to improve the esthetics of the breakpoint menu but first things first.

Many thanks!

Chris

On Mar 21, 2017, at 11:37 AM, Richard van Heukelum email@hidden wrote:

On 21 Mar 2017, 2:58 pm, Chris Rutkowski wrote:

Update:

I’ve made progress with making my CSS menus responsive-this extended Freeway reference manual is pointing the way. But that leads to another layer of questions: I’ve chosen a breakpoint at the phone level (420). Presumably that will also force the substitute menu at the smaller landscape phone breakpoint? In order to make the sub menu structure display in substitute menu, do I need to use the “Auto-generate Navigation Menu” option? In which case I suppose I need to organize my page folder structure in the same hierarchy as the menu (as described in the extended reference manual)?

I never spend a second on navigation when it comes to landscape breakpoints. Same goes for auto-populate menu’s … there’s no need to, so why should you? Just determine yourself how your menu is populated.

A 420px breakpoint is a little ‘late’ to activate mobile navigation for my taste. I’m currently playing with the 900px breakpoint to activate mobile navigation.

– Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Chris Rutkowski
Creative Director, Luna Media
email@hidden
www.chrisrutkowski.com http://chrisrutkowski.com/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

On 20 Mar 2017, 3:17 pm, Chris Rutkowski wrote:

The most urgent is the utter crappiness of how my site looks on a phone. The most pressing issue there is the navigation menu. I works fine on a computer and the landscape view of a tablet, but is too big-and the drop downs make it worse on the phone.

www.chrisrutkowski.com

Now I know this answer will provoke many Freeway members, probably mostly those that know their coding best, but here goes…

This is a as much a SEO tip as it is a tip for your situation. Personally I find that many of the responsive websites made and especially via a damned template look either poor/bad on a phone or on the desktop, one or the other. I care about SEO more than anything else when building a web project, so I make a separate website just for the smartphones.

It takes more work than making your average static website, but once you get the hang of the spacing, it is almost like rebuilding the same website as the desktop version. You add a script in the head of the desktop version to go to the smartphone version and instantly the smartphones will go to the mobile version.

Now here’s the SEO tip to all of this. You do not put the mobile version on the same domain, rather you purchase a .mobi domain and put the website there. When you do this you then have two websites working the search engines! There’s many times when I do SEO analysis I will see both my clients .com and .mobi listed on the first two pages of search results.

Robert

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options