Responsive map vs seperate mobile map

[NigelAlford]

Just curious about other's experience with building a mobile specific map vs a responsive map. What are your users using more?
I'm currently writing responsively but I'm finding myself increasing and decreasing button sizes for various screen sizes and it feels like a mobile specific site used with a browser redirect would be more effective.

[AlanRussian]

Nigel,

There unfortunately doesn't appear to be that much info out there for making responsive map apps with the ArcGIS API.  I've modified our Intranet site to be responsive, and it works very nicely.  It wasn't terribly difficult to accomplish either. 

I haven't messed much with button sizes yet, but this is definitely on my list of things to do in the future.

Unfortunately, I haven't made a mobile-specific app, but as I've said, I'm quite content with the responsive app we now have here.  Let me know if you have any questions about how ours works!

--Alan

[StephenLead]

Let me know if you have any questions about how ours works!

Alan,

Are you able to post a link to your site (or is it intranet only)? Perhaps some screenshots showing how it works on various devices?

Thanks,
Steve

[Anonymous User]

You can use CSS3 media queries to target the device orientations and sizes.  I ran into some challenging issues when developing an application that would respond nicely in stand-alone mode and in non-stand-alone mode.  It wasn't an insurmountable problem, but did require extra effort.  If you're also going to prevent the app from scrolling by default it can be little tricky as well since rotating the device can hide some of the content not on the map.  Are you using a particular mobile framework (jQuery, Dojo,..)?  I would be interested in seeing what you're building.  Do you have screen shots of the app on different devices and orientations?

Below are some references/links I referenced when building mobile app:
Response JS
Browser (User Agent) Sniffing
Dojo's FixedSplitter which can mimic the SplitViewController on an iOS native App
Apple's HIG
Android
Website to test if your media queries fit in either portrait or landscape mode
Live pixel checker
List of displays by pixel density
Web performance measurement tool

[AlanRussian]

Chris, it's really great to see someone at esri thinking about responsive design!

Unfortunately, our site is Intranet only.  I have attached some screenshots of it though!  I tried to snap them at all of the responsive points and with different orientations/options. 

I needed to execute JavaScript at some of the responsive points for various reasons.  For instance, the "Hide/Show Options" button only shows up at 1024 pixels and smaller, and if it goes away while the options were hidden, that'd be bad (there'd be no way to get the options pane back without resizing the browser)!  I used the JavaScript onMediaQuery library for this.

Making it work better on an iPad was my primary focus for this, so I didn't spend much time on the phone size.  Eventually, I'd like to have the popups change to mobile popups when it becomes the phone width.  This shouldn't be too difficult since I'm using that onMediaQuery library.  I also need to make some of the buttons larger, especially on the "Layers" tab that I didn't include in the screenshots.

Also, I appreciate those links, Chris!  They're very helpful.

[Anonymous User]

Hi Alan, the app looks really nice!  I particularly like the iPad landscape orientation UI.  What are some of the challenges you've faced in the design?  Did you target, or test on Android?  Have you had to make many changes in the JavaScript code, or mostly the CSS?  Well done though, it really mimics the SplitViewController nicely.

[AlanRussian]

Chris,

Sorry for my late reply.  I've actually been actively working on a public property information search site.  It's based off the site I sent screenshots of and is responsive in a very similar way.  It's mostly done, so I'm happy to share it now!

I developed the intranet site last year, and it looked exactly like it does in the "Desktop.png" screenshot.  I didn't face too much challenges with the design, because I really didn't change much.  The only thing I really added to the design (not including the responsiveness itself) is the Hide/Show Options button.  Deciding where to put the hide/show button was a tough decision, and I can't say I'm completely satisfied with it.  I also realize I could have put more effort into the design for mobile, but it wasn't a huge concern for the intranet site.  I may work more on that in the future, time permitting.  I also noticed that the site is way too big at over 1.5MB, especially for mobile.  This is another thing I'll try to ameliorate in the future.

We don't have any Android devices to test on, so I was not able to test Android compatibility.  I tried to make the site adapt to all screen sizes, so I'm hoping it will work well.  I'm well aware, though, that there could be minor rendering issues or bugs.

Almost all of it was CSS, but I did use a small amount of JavaScript to assist the responsiveness too.  It's mostly used to fine tune the user experience.

I've noticed some bug with the JS API when changing between responsive states. The bug makes the map fade to white and stop functioning.  I think it occurs when the map.resize() function is called when the map isn't visible.  I've tried to make my script not resize when the map isn't visible, and it rarely happens now.

Thank you!  Let me know if you have any other comments, questions, or even suggestions.