jeremyzilar
commented
5 years ago This has been completed 🎉👾
Closed ToniBonittoGSA closed 5 years ago
jeremyzilar
commented
5 years ago This has been completed 🎉👾
What Is Mobile-Friendly?
Mobile-friendly means a digital product can be navigated, viewed and accessed on a smartphone, tablet computer, or similar mobile device.
Many of us get toward the end of mobile site development and really do not know if what we created is “mobile-friendly.” We think we have followed all of the mobile best practices and performed usability testing. However, do we have something concrete to quantitatively certify that we are mobile-friendly?
https://www.digitalgov.gov/2015/10/23/is-your-site-mobile-friendly/
Create a Mobile Strategy
Do you know how mobile fits into your agency’s larger digital strategy? If not, these articles will help you.
This resource helps agencies plan, develop, test and launch anytime, anywhere, any device mobile products and services for the public.
https://digital.gov/resources/mobile-application-development-program/
The shift to “mobile first” makes sense given that the smartphone is now the growth driver, while desktop device usage is rapidly decreasing among U.S. users. Now that we’ve seen the top level shift from desktop to mobile, let’s drill deeper into mobile device specific trends.
https://www.digitalgov.gov/2017/08/14/20162017-mobile-analysis-mobile-device-trends-on-government-websites/
Mobile moments are your agency’s chance to shine. The key is getting to know your user; analytics can help you find the moment.
https://www.digitalgov.gov/2015/06/01/finding-the-best-mobile-moment-is-the-first-stepping-stone-to-anytime-anywhere-government/
Making MobileGov was a three phase multi-media project created by the MobileGov Community of Practice in 2011 to help federal agencies discover, discuss and design a citizen-centric path to mobile government services and information. Many of the findings in the project still apply in 2018.
https://www.digitalgov.gov/2011/06/21/making-mobile-gov-project/
Mobile first, mobile-only, mobile-friendly? What’s the difference? There are many mobile development strategies to choose from and there are very subtle differences between some of them, and some are used in combination. We’ve got you covered on them all here.
https://docs.google.com/document/d/1Vnbgyh9iTjHKeUYDGt5Blt4Q8wXLQcssBrBWHdslTlo/edit
Google now focuses even more exclusively on boosting mobile-friendly sites.
https://www.digitalgov.gov/2016/03/29/google-will-rank-mobile-friendly-sites-even-higher-beginning-in-may/
A “mobile first” approach is where new websites and applications are designed for mobile devices first, instead of designed for the traditional desktop. Representatives from government and the private sector spoke about what it means to be “mobile first.”
https://www.digitalgov.gov/2012/08/03/mobile-first-webinar-recap/
According to this study by Compare Business Products, one of the most important impacts for contact centers is that smartphone users can now connect with contact centers via voice calls, SMS messages, Internet pages, social media video chat and native apps.
https://www.digitalgov.gov/2014/04/22/trends-on-tuesday-how-contact-centers-are-adapting-to-the-mobile-user/
Structured content and APIs form the core of any open content platform, whether it be syndication or other types of data sharing.
https://www.digitalgov.gov/2015/11/09/the-content-corner-structured-content-and-the-power-of-syndication/
This is the first government smartwatch app development we’ve talked about on DigitalGov and an example of a great mobile moment use case. Not only is the smart app interesting (see the UI images!) but also how NASA is approaching its development is worth examining. While agencies are crowdsourcing via native apps and crowdsourcing their actual mobile development, none have publicly crowdsourced just the app design.
https://www.digitalgov.gov/2015/10/13/trends-on-tuesday-is-crowdsourcing-the-future-of-mobile-design-and-development-2/
Agency Examples and Recommendations
Resources to help your agency comply with the Connected Government Act.
As more agencies develop mobile apps and websites, they need quick guidance on mobile user experience Do’s and Don’ts. To answer their call, we asked MobileGov Community of Practice members to choose their top Mobile UX Guidelines from the original group of 42. From that feedback, we have distilled the following six mobile user experience guidelines.
https://digital.gov/resources/mobile-user-experience-guidelines-and-recommendations/
Design for Your Users
Great mobile design requires all the best practices from Human Centered Design and should provide consistent information as other agency channels.
In this webinar, MobileGov developers from the National Institutes of Health and Department of Veterans Affairs talk about how mobile user experience is different from traditional channels, discuss how to approach user experience during mobile implementations, and demonstrate their successful practices.
https://www.digitalgov.gov/2013/02/11/youll-have-them-at-swipe-making-an-awesome-mobile-user-experience-webinar/
The National Cancer Institute (NCI) discusses what structured content and open content models can do, to help government agencies create content that is platform-agnostic, format-free, and device-independent.
https://www.digitalgov.gov/2013/10/28/always-future-ready-the-benefits-of-open-content-models-and-structured-data-webinar/
A website redesign is never an easy task, but when responsiveness is one of your redesign’s key goals, special considerations come into play that can present unique challenges. In the webinar on responsive web design challenges in government, we heard from two agencies who identified coordination, leadership buy-in and content decisions when mobilizing their websites.
https://www.digitalgov.gov/2014/10/21/responsive-web-design-challenges-webinar-recap/
The Open and Structured Content Models Working Group, an interagency working group, has been exploring the approach for government and they have created two open and structured content models—one for articles and one for events. They hosted a workshop so agencies could hear from a few organizations who are already putting these ideas into practice. Attendees discussed how to build the case for the content model approach, how the models work in practice and how to implement the existing models.
https://www.digitalgov.gov/2014/10/27/open-and-structured-content-models-workshop-recap/
How big is your smartphone? Way smaller than a desktop monitor. The user will have a radically different experience on a desktop, and they are usually expecting a different experience.
https://www.digitalgov.gov/2015/08/31/mobile-content-less-is-more/
Well before we get into the design and coding phases, we can show customers a mockup of an idea of what our product might look like. It’s called a prototype (or a wireframe)—it’s a model of a design that’s still in development. It doesn’t need to be fancy, or even made on a computer. But it can make the difference between a product that looks good and one that people will actually use.
https://www.digitalgov.gov/2014/05/22/how-to-make-a-mobile-paper-prototype/
Smart designers create a “low-fidelity” prototype of your product—a rough approximation of what it’s going to look like so people can actually interact with it.
https://www.digitalgov.gov/2014/08/08/design-sketching-the-easiest-prototype-method-ever/
In one package, built on a trusted, FedRAMP authorized platform, we provide a hosting solution for your site with flexibility to scale and security compliance built in. On top of the technical advantages, we also provide some basic templates built to meet Section 508 Standards, and a guide to help you shape your content. All of this lets you focus on designing the content and structure of your site and leave the rest to us.
https://digital.gov/2017/06/05/federalist-is-out-of-beta-and-open-for-business/
The System provides an increasingly important service to government modernization.
https://designsystem.digital.gov/whats-new/updates/2017/12/20/2017-where-weve-been-where-were-going/
Agency Examples and Recommendations
Resources to help your agency comply with the Connected Government Act.
There are a number of resources in the private sector for designing excellent User Experience. Here are some recommended by the MobileGov Community of Practice.
https://www.digitalgov.gov/2014/01/20/mobile-gov-user-experience-resources-and-design-tools/
Pay Attention to Analytics
Analytics are everywhere! This section will help you uncover and analyze the data you need to make mobile users happy.
The Digital Analytics Program (DAP) Learning Series: Measuring Your Mobile Users webinar, co-sponsored by the MobileGov Community of Practice, focused on measuring mobile users with DAP’s analytics tools, which are essentially a pre-configured version of Google Analytics.
https://www.digitalgov.gov/2017/05/15/webinar-recap-measuring-your-mobile-users/
The pirate metrics framework is a good way to understand how your product is performing. Coined by David McClure, the “pirate” in the metrics comes from the first letters of the lifecycle stages of the framework.
https://www.digitalgov.gov/2016/05/12/using-pirate-metrics-to-analyze-your-mobile-applications-audience/
It’s important to optimize your mobile experience. You can use data from the Digital Analytics Program (DAP) to gain insight on your mobile traffic. Do you know the mobile characteristics of your users? Here are four useful tips and reports to analyze your users’ mobile experience.
https://www.digitalgov.gov/2016/02/05/4-tips-for-analyzing-mobile-traffic-with-dap/
Develop Your Site
What’s the best way to build a mobile website? Below are some approaches and tools we think you will find helpful.
JavaScript usage, CSS usage, image and resource sizing, caching/network usage, and popups. These are the top five practices that the most visited government websites should focus on in order to be more mobile-friendly. But how can you work on each of these areas to help ensure your website keeps mobile users delighted and coming back?
https://digital.gov/resources/guide-improve-mobile-friendly-websites/
Responsive web design refers to a fluidly-constructed web page layout that scales from handheld device displays to large, high-resolution computer displays using flexible typography, flexible images, fluid grids, and CSS3 media queries.
https://www.digitalgov.gov/2013/06/11/responsive-design/
The Accessibility Guild in the Technology Transformation Services (TTS) at the U.S. General Services Administration (GSA) set out to understand how people in different roles practice accessibility. We asked designers, developers, and product managers across our organization to share their accessibility practices, from self-testing to asking for help. We heard about the barriers that can stand in the way of making products more accessible, from lack of knowledge to lack of buy-in.
https://digital.gov/2018/07/10/introducing-accessibility-for-teams/
Chrome Developer Tools (or DevTools) are a set of web authoring and debugging tools built into the Google Chrome web browser. Its controls allow you to simulate a wide range of devices, and help you build responsive, mobile-first web experiences.
https://www.digitalgov.gov/2016/11/21/mobile-development-and-testing-with-chrome-devtools/
We regularly access charts and tables on our desktop computer to glean valuable information from a pile of data. But, how can you display a full-size, desktop sized chart on a 4-inch smartphone screen, and make it remain useful?
https://www.digitalgov.gov/2014/10/28/trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design/
We moved HHS.gov to a responsive template to ensure that users accessing our site in a mobile environment had the best possible experience. Our department faced several challenges in moving a site the size of HHS.gov into a responsive template and one of those challenges surrounded our need to make tables work in a responsive environment.
https://www.digitalgov.gov/2014/10/30/hhs-conquers-tables-in-a-responsive-design/
Test Your Mobile Website
You need to embed testing in the creation, development and launch of your mobile product. These articles will give what you need to know to test successfully.
While usability testing focuses on the look, feel and ease of use, compatibility testing focuses on determining if the hardware and software display and allow the application to function properly.
https://www.digitalgov.gov/2015/08/14/what-is-mobile-device-compatibility-testing/
Our CrowdSource Mobile Testing program is a FREE service provided for federal agencies by federal employees. We do compatibility testing (determining how mobile websites display on the multiple makes and models of devices, operating systems, and mobile browsers), for mobile websites.
https://www.digitalgov.gov/services/mobile-application-testing-program/
Developing a test device selection plan that is updated on a regular basis will help your organization whittle down the list of devices to a manageable number.
https://www.digitalgov.gov/2013/10/29/which-devices-should-i-test-with/
This article is a resource of the Federal CrowdSource Mobile Testing Program and focuses on two common test types are compatibility testing and functional testing.
https://www.digitalgov.gov/2013/11/21/mobile-product-compatibility-and-functional-testing-101/
A test case is simply a list of setup instructions (or preconditions) and steps to expect a test usually linked to a requirement or expected behavior. Think of a test case as the directions you would give to a user to complete a task broken into the most basic of steps. Test cases allow almost anyone to execute the same test in the same way every time.
https://www.digitalgov.gov/2013/12/16/the-test-case-write-it-once-test-many-times/
The CrowdSource Mobile Testing Program offers a simple way to collect feedback on compatibility testing. During each test cycle, testers log issues specific to the application or site being tested. Four themes have emerged from the logs, with lessons that are relevant to anyone developing mobile websites.
https://www.digitalgov.gov/2015/02/24/trends-on-tuesday-mobile-web-lessons-from-the-crowdsource-mobile-testing-program/
Do all developers and testers need a collection of devices to physically test the application with? There are many types of tools that provide alternatives to building your own lab.
https://www.digitalgov.gov/2015/06/09/the-emulator-dilemma-can-mobile-device-testing-be-completed-without-mobile-devices/
Focus on Performance
If your mobile product breaks a user’s phone, you are not creating a good experience. Here are some concepts and approaches you should apply to your development process to avoid a bulky product.
https://digital.gov/resources/guide-improve-mobile-friendly-websites/
During the MobileGov Around the Horn Call, the AIDS.gov team laid out why performance testing is important for government, how they approach the testing and some tools agencies use for testing.
https://www.digitalgov.gov/2014/11/18/trends-on-tuesday-speed-matters-when-measuring-responsive-web-design-performance-load-times/
The U.S. Web Design System team embarked on a 3-month research effort to better understand what performance means to U.S. government web teams of all shapes and sizes, and we’re excited to share the results with you.
https://designsystem.digital.gov/performance/
The Information Technology & Innovation Foundation (ITIF) published a report that looked at the page load speed, mobile-friendliness, security and accessibility of the top 297 government websites. And based on the four benchmark areas, we’ve pulled together a number of resources and tools to help your agency’s website provide better access to services and information.
https://www.digitalgov.gov/2017/03/24/new-itif-report-inspires-a-closer-look-at-website-performance-and-security-here-is-where-to-begin/
Case Studies/Good Examples/Aspirational Stories
There are a number of resources in the private sector for designing excellent user experience. Here are some recommended by the MobileGov Community of Practice.
Push notifications allow agencies to connect with their audiences for immediate communication. The Office of Personnel Management (OPM)’s OPM Alert app provides a real time look at the current operating status for federal offices in the Washington, DC, area and uses push technology to alert users of status changes.
https://www.digitalgov.gov/2016/02/23/the-benefits-of-being-push-y-reaching-your-audience-through-push-notifications/
The U.S. Food and Drug Administration (FDA)’s Digital Health Innovation Plan is focused on fostering innovation at the intersection of medicine and digital health technology. This plan will include a novel, post-market approach to how we intend to regulate these digital medical devices.
https://www.digitalgov.gov/2017/06/16/fostering-medical-innovation-a-plan-for-digital-health-devices/
The Smithsonian Institution’s Office of Policy and Analysis has another tool to consider for your UX toolbox: IPOP. It was formed to guide exhibition design, and born from years of research studies and interviews with Smithsonian visitors. IPOP is a useful framework for building a content strategy and thinking about audience diversity and preference differences.
https://www.digitalgov.gov/2016/12/08/the-smithsonians-ipop-exhibition-framework-lessons-for-a-human-centered-content-approach/
DHS.gov now works for desktop computers, tablets and smartphones, making it easier to get the information you need—wherever you are—in the format appropriate for your device. https://www.digitalgov.gov/2016/06/09/welcome-to-the-new-dhs-gov/
The U.S. Department of Education’s website and blogs now have responsive design and Bootstrap styling. The combination of responsive themes and Bootstrap means that Ed.gov pages automatically adjust to the size of smartphones or tablets.
https://www.digitalgov.gov/2015/02/12/building-brick-by-brick-ed-govs-website-redesign-and-mobile-implementation/
The MY TSA mobile app and website developed by the Transportation Security Administration (TSA) is designed to help passengers better prepare for security so they can get through TSA airport security checkpoints more efficiently. The app has multiple functions to help travelers and uses information from TSA, the Federal Aviation Administration (FAA), NOAA and users.
https://www.digitalgov.gov/2012/02/22/my-tsa-mobile-app/
Other Resources
We’ve covered the essentials above, but below is information about policies, platforms and other resources you should think about when building a mobile experience.
App Platforms
If you are creating an app, you will need to work with the platform to get your app added to their store. The following have federal-compatible Terms of Service agreements.
https://www.digitalgov.gov/2013/05/30/apples-ios-terms-of-service-developer-program-license-agreement/
https://s3.amazonaws.com/digitalgov/_legacy-img/2014/07/blackberry-app-world-tos-agreement.pdf
Native Apps or Progressive Web Apps
Should you focus your efforts on either of these two options?
Native Apps
Agencies who have created native apps outlined three areas they considered in the mobile development process: strategy, business requirements and measuring value.
https://www.digitalgov.gov/2015/07/01/planning-with-a-purpose-3-reasons-why-agencies-created-native-apps/
Progressive Web Apps
Progressive Web Apps have been able to take the best of native and web applications and combine them into a hybrid application that is fast (with or without a fast network connection), can work across devices, and does not need to be distributed through a store as it is as linkable and shareable as a web page.
https://www.digitalgov.gov/2016/09/20/progressive-web-applications-part-1-the-new-pack-mule-of-the-internet/
Along with the advantages, PWAs bring challenges, and these may be deal breakers for some.
https://www.digitalgov.gov/2016/10/13/progressive-web-applications-part-2-pros-cons-and-looking-ahead/
Public Trends, Policies, Legislation or Initiatives
When you are building an app or creating a mobile-friendly site, there are certain requirements to be aware of.
Initiatives
Policies
Security
This document provides guidance and recommendations for vetting the security of mobile apps based on standards and agency best practices.
https://www.atarc.org/wp-content/uploads/2017/10/ATARC-MSCT-Report-Navigating-Future-of-Mobile-Services.pdf
Security and privacy are part of the six Mobile User Experience Guidelines developed by the MobileGov Community of Practice. This webinar dove further into guideline six: Develop security and privacy guidelines with regard to what the app does and how it protects user data and government systems.
https://www.digitalgov.gov/2016/01/21/making-your-agency-apps-secure/
The Department of Homeland Security (DHS) submitted a report to Congress that details current and emerging threats to the federal government’s use of mobile devices and recommends security improvements to the mobile device ecosystem. The DHS Science and Technology Directorate (S&T) led the study in coordination with the National Institute of Standards and Technology (NIST) and its National Cybersecurity Center of Excellence.
https://www.digitalgov.gov/2017/05/04/dhs-study-on-mobile-device-security/
The Chief Information Officers (CIO) Council’s Services, Strategy, and Infrastructure (SSI) Committee sponsored an initiative to identify agency secure mobility success stories to feature in a best practices report that agencies can use to model their own initiatives.
https://cioknowledge.max.gov/?q=system/files/attachment/Federal%20Secure%20Mobility%20Toolkit.pdf
Privacy
We are providing sample SOW language for the procurement of customer or external-facing mobile products, skills, testing and mobile code sharing. This language is also included in the RFP-EZ contracting tool. Here are some guidelines for its use.
https://www.digitalgov.gov/resources/mobile-sow-and-developer-qualifications/
The review of privacy risks should begin at the earliest planning and development stages of agency actions and policies that involve PII, and should continue throughout the life cycle of the information. (See page 6)
https://www.whitehouse.gov/sites/whitehouse.gov/files/omb/memoranda/2017/m-17-06.pdf
Negotiated Federal Terms of Service
This is a list of free tools and services that have federal-compatible Terms of Service agreements. https://www.digitalgov.gov/resources/negotiated-terms-of-service-agreements/
Federal Mobile Apps Directory
A sortable list of all known federal government apps https://www.usa.gov/mobile-apps
U.S. Digital Registry
Resource to confirm the official status of social media and public-facing collaboration accounts, mobile apps, and mobile websites. https://digital.gov/services/u-s-digital-registry/
MobileGov Community of Practice
Join this network of federal employees who are tackling mobile technology challenges together. https://www.digitalgov.gov/communities/mobile/