Native app emulation on mobile web sites

I'm pretty well aware of the discussion between the pros and cons of trying to make a website act too much like a mobile app. Issues with fixed positioning, browser responsiveness, and general network latency inherent in a mobile connection all play against most attempts at this approach.

However, in a recent project at my day job, I think I'm getting pretty close to a slick and seamless mobile web app experience that closely emulates a native one. See the work in progress at: https://staging.ctmc.org. Keep in mind, this is not the final product yet. I will update this post with a new link when it's fully baked.

One of the main downsides to this project in terms of speed is that the site is fully responsive. While this is generally seen as a feature (and I would argue that it is in many respects) one major issue is that more resources are loaded to the mobile device than necessary. Even though it uses a "mobile first" approach in terms of CSS, there are other resources that are present on the page (larger images for the banners, some scripts that don't get utilized on mobile, etc) that play into a longer than necessary page load time. 

---

The reason these extra files are sent to the browser is because the server has no idea of the dimensions of the viewing device. Since I am not (and will not) do any sort of user agent sniffing, and am relying on @media queries and Javascript innerWidth values, the server currently has to send everything and let the front-end sort out what displays. One way I would like to get around this is by loading those content items via AJAX while the page is rendering. For instance, a quick Javascript test could determine whether to load the mobile or desktop version of the banner images. This would save quite a bit of bandwidth.

I borrowed several UX elements from different native mobile apps. 

1) The slide-up footer menu, for example, mimics the one found in the Android Google+ app. By hiding that menu onTouchStart of the body, and re-introducing it to the page via the sliding animation, I have greatly decreased the common problem with fixed position elements on different mobile environments. 

2) The slide-in left menu borrows from Facebook in terms of design and functionality, with some notable exceptions. I chose to use iScroll4 as my list scrolling library, and by fixing the position of my menu and site content, was able to avoid the overscrolling commonly seen after reaching the top/bottom of a scrollable element. You will also notice many subtle UX niceties in the menu such as the search bar drop shadow to indicate the menu scrolls "under" it, sub-list expansions being limited to one parent at a time, and accurate list resizing based on dynamically loaded content (the sub-lists are added after page load). The menu locks horizontal/vertical scrolling in an intelligent way that avoids being stuck in either, but without being too lenient either.

I am always looking for feedback and ways to improve. If you give this site a look and see any glaring issues, please leave a comment below. 

Or if you think it's fantastic, I'd love to hear that too :-). Thanks for taking the time to read this!