Railfan Technology > UtahRails goes mobile (mostly)

Through much effort and time, UtahRails is now (mostly) mobile friendly. The learning curve has been pretty steep at times, but I think I've got it now.

Check it out on *your* mobile device. Here is the link to the home page:

http://www.utahrails.net/index.php

And a link to a narrative Tech Talk page:

http://www.utahrails.net/tech-talk.php

Statistics show that about 30% of my site's 900~1200 daily visits are on mobile devices, and I realized that the time has come to get modern. UtahRails is meant solely as a reference tool, and limiting access is not a good thing. My own preference is for a desktop computer, but I'll admit to the occasional quick look on my iPod Touch or my iPad (I don't own a smart phone).

But now I need some help. The navigation at the top of every page ends up being a bunch of stacked buttons. I need to convert it to be one of those single 'Menu' buttons, with drop-down selections. If there is a person out there who can help, please send me a PM.

Don Strack



Edited 4 time(s). Last edit at 10/04/15 08:25 by donstrack.

Now that I've finally this year entered the smart phone world, I'll give it a try. 
Your website is one of my favorites being a D&RGW, SP and even UP fan!

Cheers, Jim Fitch

The pages look good on my HTC M8 Android phone which uses has a 1080 x 1920 pixel screen. Pages look find when rotated either way. Nice work!

Ryan Wilkerson
Fair Oaks, CA

RyanWilkerson Wrote:
-------------------------------------------------------
> The pages look good on my HTC M8 Android phone
> which uses has a 1080 x 1920 pixel screen. Pages
> look find when rotated either way. Nice work!

Ryan, could you take a look to see if Android's Chrome offers a "Reader" version that strips most of the formatting and images. Especially on the roster pages.

I checked on a friend's iPhone 6, and Safari offers a Reader version for the roster tables. With this Reader mode available, I may not have to heavily rework the roster tables to be responsive, although it still a pretty good idea to fix them.

As for the actual menu, I'll be using Project Seven's Drop Menu Magic package for Dreamweaver, if I can figure how to adjust some of the colors and button size. On smaller screens, the menu collapses down to a single button. Here is the test page:

[edit] The new menu is now uploaded and working

http://utahrails.net/index.php

[edit] It was a bit of a challenge to get the menu working, including a couple issues with keeping the script and css files straightened out to get it to work. I like the look, but I'd rather be using something simpler and less complex. 

Don Strack



Edited 1 time(s). Last edit at 10/07/15 15:47 by donstrack.

Hi, Don. I am using a Lumia 640xl phone running Windows 8.1 mobile. The Utah Rails presents well with bright sharp web pages. I have been able to navigate the pages and see the photos, rosters and text. The Google maps come up with a large white frame with red bars which say I have the wrong browser for the maps to work. I am told to "click here for more information." Well, I can see a segment of the map to the right of the error message and it is full resolution and I can use the cursor to navigate the full map. I don't seem to be able to clear that error panel but I suspect if I ask for more information I will be directed to install Google Chrome and delete Internet Explorer. I am not particularly happy with that Google policy and attempt to hijack my internet but I guess we just have to live with that.

So quick summary for Windows 8.1 mobile is Utah Rails is wonderfully accessible for all functions save the maps which is a google issue.

Thanks for keeping your wonderful and entertaining resource up to date.

Posted from maybe the only Win 8.1 mobile on TO.com



Edited 1 time(s). Last edit at 10/05/15 17:26 by fbe.

Don,
I have opened that test page in Chrome on my phone and it looks just fine. I also went to the roster pages and the page starts to display about 90% the width of the page. If I pinch the screen, it zooms out the little bit and displays the whole screen perfectly. Might just be my phone, not sure. I went around the website and seem to be able to see everything I need.

I don't know if Chrome has some kind of reader feature but I think the browser displays things very well as it is.

Nice work!
-Ryan

donstrack Wrote:
-------------------------------------------------------
> RyanWilkerson Wrote:
> --------------------------------------------------
> -----
> > The pages look good on my HTC M8 Android phone
> > which uses has a 1080 x 1920 pixel screen.
> Pages
> > look find when rotated either way. Nice work!
>
> Ryan, could you take a look to see if Android's
> Chrome offers a "Reader" version that strips most
> of the formatting and images. Especially on the
> roster pages.
>
> I checked on a friend's iPhone 6, and Safari
> offers a Reader version for the roster tables.
> With this Reader mode available, I may not have to
> heavily rework the roster tables to be responsive,
> although it still a pretty good idea to fix them.
>
> As for the actual menu, I'll be using Project
> Seven's Drop Menu Magic package for Dreamweaver,
> if I can figure how to adjust some of the colors
> and button size. On smaller screens, the menu
> collapses down to a single button. Here is the
> test page:
>
> http://www.utahrails.net/test/p7utahrails-test.htm
>
>
> Don Strack

Ryan Wilkerson
Fair Oaks, CA

I checked the unsupported browser error message and get told that URL does not exist by google. There are three dots in the error panel and if I key them a menu drops down. One choice is shrink panel and the panel goes away. The red bar remains in place over the full screen map. I am able to enlarge and shrink the map and navigate to neighboring states.

I note the IE browser on my Win 7 notebook works just fine on the google maps. Of course IE works just fine on the smart phone if you could get rid of the error message.

I will probably upgrade the Lumia to Win 10 mobile next month and will get back to you about how the Edge browser on that OS works on your site.

Posted from iPhone

I checked the test page using SauceLabs virtual browsers, and all seems to be good.

Here is a test page with the new menu inserted as a module in a normal page:

[edit] The new menu is now uploaded and working

http://utahrails.net/index.php

This page should display:
1) with full width menu on desktops and tablets in landscape mode, and
2) with collapsed single button menu on tablets in portrait mode, and
3) with collapsed single button menu on smartphones in both landscape and portrait modes.

Thanks for looking.

Don Strack



Edited 2 time(s). Last edit at 10/07/15 15:44 by donstrack.