Responsive map vs seperate mobile map

Question

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 · Answer

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.

Anonymous User · Answer

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 · Answer

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.

Responsive Screenshots.zip