Mobile Web Dev Guidance

Project Liike aims to help developers build mobile web solutions. To do that, we work off of a prioritized backlog to ensure we’re always working on the most important challenges.

We need you to help make sure we ARE in fact working on the most important thing at any given time. Please add the challenges you think are most important, vote a topic up if it’s already on the list, and use all your votes. We will use this to influence our backlog. For more info, check out http://liike.github.com Thanks!

The guidance most needed for mobile web development is ...

You've used all your votes and won't be able to post a new idea, but you can still search and comment on existing ideas.

There are two ways to get more votes:

  • When an admin closes an idea you've voted on, you'll get your votes back from that idea.
  • You can remove your votes from an open idea you support.
  • To see ideas you have already voted on, select the "My feedback" filter and select "My open ideas".
(thinking…)

Enter your idea and we'll search to see if someone has already suggested it.

If a similar idea already exists, you can support and comment on it.

If it doesn't exist, you can post your idea so others can support it.

Enter your idea and we'll search to see if someone has already suggested it.

  1. When should I consider jQuery Mobile or other mobile web frameworks/libraries?

    There are a number of powerful frameworks and libraries to help you build mobile web experiences. When should they be considered and what factors make them a less-than-appropriate choice?

    19 votes
    Vote
    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      You have left! (?) (thinking…)
      started  ·  5 comments  ·  Admin →
    • Should I build a single-page interface or are full-page refreshes acceptable?

      For clarity, a single-page interface (SPI) will load all necessary web assets (HTML, CSS, scripts, images) when the site first loads and all UI updates occur through AJAX calls rather than behaving like a normal web experience that refreshes the whole page for each user action.

      This question also hints at the question, "How much should a web app feel like a native app?" There are varying opinions on this.

      Some can consider SPIs an optimization of sorts and could also be related to the "future migration to PhoneGap" question.

      19 votes
      Vote
      Sign in
      Check!
      (thinking…)
      Reset
      or sign in with
      • facebook
      • google
        Password icon
        I agree to the terms of service
        Signed in as (Sign out)
        You have left! (?) (thinking…)

        We’re starting with finding out if there is already some existing research in this area and if there is anything specific related to mobile since most of the SPI discussion is equally related to desktop web experiences.

      • How much JavaScript should my mobile experience use and what should it be used for?

        This is related to the "Single-page Interface" question, but we'll keep them separate for now.

        Here are some associated questions:
        - What animations are [in]appropriate for mobile web experiences?
        - What micro JavaScript libraries should be considered for various tasks?
        - How much JavaScript is too much? What are the factors that help me decide?

        12 votes
        Vote
        Sign in
        Check!
        (thinking…)
        Reset
        or sign in with
        • facebook
        • google
          Password icon
          I agree to the terms of service
          Signed in as (Sign out)
          You have left! (?) (thinking…)
          1 comment  ·  Admin →
        • How should I perform pre-production testing across multiple devices?

          Other associated questions:
          - How should I setup my environment?
          - What are the emulators/simulators I can use?
          - How much testing can be automated vs. manual? How?
          - Are there any useful tools/services that can be used?
          - How can I monitor CPU and memory utilization on the device?

          8 votes
          Vote
          Sign in
          Check!
          (thinking…)
          Reset
          or sign in with
          • facebook
          • google
            Password icon
            I agree to the terms of service
            Signed in as (Sign out)
            You have left! (?) (thinking…)

            This actually turned out to be more difficult than we expected. Basically we’re taking a multi-prong approach that uses desktop browsers, emulators/simulators, as well as physical and virtual hardware devices such as the DeviceAnywhere service. You can find the topic in our docs repo under the title of “Testing Mobile Web Experiences” over at http://github.com/liike/docs.

          • How can I enable touch gestures on my mobile web experience?

            Other associated questions:
            - How consistent is touch support across the different mobile browsers?
            - How can I create intuitive UIs with touch gestures?
            - Which touch gestures are the most useful? Which one's should I stay away from?

            13 votes
            Vote
            Sign in
            Check!
            (thinking…)
            Reset
            or sign in with
            • facebook
            • google
              Password icon
              I agree to the terms of service
              Signed in as (Sign out)
              You have left! (?) (thinking…)
              1 comment  ·  Admin →
            • What can I do to optimize the payload of my site/app for mobile devices and their networks?

              We certainly don't want to send any more data to the device than we absolutely need to. Here are some associated questions:
              - What are some strategies for concatenating/minifying files while still getting the benefits of caching?
              - How do I implement responsive images so the correct image is used for particular devices?
              - What are the best practices for optimizing image and script files for transmission to and parsing in the browser?

              9 votes
              Vote
              Sign in
              Check!
              (thinking…)
              Reset
              or sign in with
              • facebook
              • google
                Password icon
                I agree to the terms of service
                Signed in as (Sign out)
                You have left! (?) (thinking…)
              • Are there any differences working with RESTful web services (WCF Web API, OData) in a Mobile Web project?

                Just want an open discussion on best practices around RESTful web services with WCF Web API and WCF Data Services/OData being 2 examples. I know that I might build my RESTful web services differently for mobile web architectures but want to get others views on the topic.

                8 votes
                Vote
                Sign in
                Check!
                (thinking…)
                Reset
                or sign in with
                • facebook
                • google
                  Password icon
                  I agree to the terms of service
                  Signed in as (Sign out)
                  You have left! (?) (thinking…)
                  1 comment  ·  Admin →
                • Guidance on Device Capabilities detection

                  Best practices and resources available.

                  8 votes
                  Vote
                  Sign in
                  Check!
                  (thinking…)
                  Reset
                  or sign in with
                  • facebook
                  • google
                    Password icon
                    I agree to the terms of service
                    Signed in as (Sign out)
                    You have left! (?) (thinking…)

                    We are using an approach here that uses both server-side device detection and client-side feature detection. So far the feedback has been very positive. As a side-note, this has the possibility of becoming a reusable component (opposed to being tied specifically to the Mileage Stats Mobile reference application).

                  • What is an appropriate experience for non-HTML5 mobile browsers?

                    We know this is this is a huge "it depends" but we suspect most mobile web experiences will have to decide at some point (including this project). What are the determining factors?

                    7 votes
                    Vote
                    Sign in
                    Check!
                    (thinking…)
                    Reset
                    or sign in with
                    • facebook
                    • google
                      Password icon
                      I agree to the terms of service
                      Signed in as (Sign out)
                      You have left! (?) (thinking…)

                      Rather than answer this question directly, we’ve identified a few different experiences (Wow, Works, and Whoops) based on browser capabilities. This likely fits in the Works experience and we’re using roughly a full-page refresh approach instead of the ajaxy single-page interface.

                    • 1 vote
                      Vote
                      Sign in
                      Check!
                      (thinking…)
                      Reset
                      or sign in with
                      • facebook
                      • google
                        Password icon
                        I agree to the terms of service
                        Signed in as (Sign out)
                        You have left! (?) (thinking…)
                      • How can I enable location services on my mobile web experience?

                        Associated questions include:
                        - What spacial data stores and APIs are available?
                        - Which spacial data stores and APIs cater specifically to mobile scenarios?
                        - How do I account for users who disable/disallow location services?
                        - How should I think about mapping integration and what are the gotchas (if any)?

                        5 votes
                        Vote
                        Sign in
                        Check!
                        (thinking…)
                        Reset
                        or sign in with
                        • facebook
                        • google
                          Password icon
                          I agree to the terms of service
                          Signed in as (Sign out)
                          You have left! (?) (thinking…)

                          We are contemplating a number of different features in Mileage Stats Mobile that will use location services such as remembering the name of a filling station and determining the appropriate unit of measure to use (gallons/litres).

                        • 1 vote
                          Vote
                          Sign in
                          Check!
                          (thinking…)
                          Reset
                          or sign in with
                          • facebook
                          • google
                            Password icon
                            I agree to the terms of service
                            Signed in as (Sign out)
                            You have left! (?) (thinking…)
                          • What can I do today to make migration to PhoneGap (or similar solutions) easier in the future?

                            A common scenario for some applications might be to start with a mobile web experience today and add device-specific features later. Using PhoneGap, or similar solutions, allow you to reuse most (if not all) of the web assets. Are there things we should or should not do today that will make this (potential) migration easier? Perhaps an SPI?

                            2 votes
                            Vote
                            Sign in
                            Check!
                            (thinking…)
                            Reset
                            or sign in with
                            • facebook
                            • google
                              Password icon
                              I agree to the terms of service
                              Signed in as (Sign out)
                              You have left! (?) (thinking…)
                            • 4 votes
                              Vote
                              Sign in
                              Check!
                              (thinking…)
                              Reset
                              or sign in with
                              • facebook
                              • google
                                Password icon
                                I agree to the terms of service
                                Signed in as (Sign out)
                                You have left! (?) (thinking…)
                              • Which assets from my existing web site/app (HTML, CSS, JavaScript, images) can I reuse in the mobile web experience?

                                We can suspect most of the backend of the applications (data layer, business logic, and even some MVC controllers) will be able to be reused on the mobile experience. However, how do we make this determination for front-end scripts, images, and HTML views?

                                Answering this question can help set expectations for web teams as they take on the endeavor of building mobile web experiences from existing desktop web experiences.

                                17 votes
                                Vote
                                Sign in
                                Check!
                                (thinking…)
                                Reset
                                or sign in with
                                • facebook
                                • google
                                  Password icon
                                  I agree to the terms of service
                                  Signed in as (Sign out)
                                  You have left! (?) (thinking…)

                                  We’re going to create an article for this on the project site and keep it updated as we build the reference implementation listing all of the assets we were able to use as-is, use but edited, and not used.

                                • What can I do to accommodate the various screen sizes accessing my site/app?

                                  We expect this one to be a big one that may have to get broken down into multiple (more specific) questions, but we want to keep the questions specific to business requirements rather than specific to the implementation.

                                  Here are some business-specific questions that may be part of this challenge:
                                  - How to respond to changes in orientation (landscape vs portrait)?
                                  - How do we handle differences in dpi/ppi?

                                  And some implementation-specific questions:
                                  - How should I balance client-side feature detection with server-side device detection?
                                  - How should I go about defining device classification/segmentation?
                                  - How can I combine responsive…

                                  13 votes
                                  Vote
                                  Sign in
                                  Check!
                                  (thinking…)
                                  Reset
                                  or sign in with
                                  • facebook
                                  • google
                                    Password icon
                                    I agree to the terms of service
                                    Signed in as (Sign out)
                                    You have left! (?) (thinking…)
                                  • How should I go about choosing between a mobile web experience and a native app that is specific to the device hardware/platform?

                                    Assuming that you want to have a single code base and still target multiple devices, should you build your application using HTML (running in a browser), use one of the cross-platform toolkits such as PhoneGap (running as a native app), or build an application specific to the hardware/platform (iOS, Android, WP7)? What are the business drivers to consider and the right questions to ask?

                                    3 votes
                                    Vote
                                    Sign in
                                    Check!
                                    (thinking…)
                                    Reset
                                    or sign in with
                                    • facebook
                                    • google
                                      Password icon
                                      I agree to the terms of service
                                      Signed in as (Sign out)
                                      You have left! (?) (thinking…)
                                    • How can I enable my mobile experience to be used when the device is offline?

                                      Other associated questions:
                                      - How can you persist data locally?
                                      - How can you sync data once a connection is reestablished?

                                      9 votes
                                      Vote
                                      Sign in
                                      Check!
                                      (thinking…)
                                      Reset
                                      or sign in with
                                      • facebook
                                      • google
                                        Password icon
                                        I agree to the terms of service
                                        Signed in as (Sign out)
                                        You have left! (?) (thinking…)

                                        Due to the inconsistencies across the devices that claim to support this feature (and we’re not even talking about the ones that don’t support it) we’re not yet sure if we can do anything in this area. The industry might just not be ready yet, but we’re considering it.

                                      • What can I do to ensure my mobile site/app is adhering to accessibility best practices?

                                        Other associated questions:
                                        - What does accessibility mean for mobile devices?
                                        - What techniques can we leverage from the desktop browser?
                                        - What techniques are different and specific to mobile (and touch) devices?

                                        1 vote
                                        Vote
                                        Sign in
                                        Check!
                                        (thinking…)
                                        Reset
                                        or sign in with
                                        • facebook
                                        • google
                                          Password icon
                                          I agree to the terms of service
                                          Signed in as (Sign out)
                                          You have left! (?) (thinking…)
                                        • Don't see your idea?

                                        Mobile Web Dev Guidance

                                        Feedback and Knowledge Base