Responsive Web Design for Enterprises

This documentation is archived and is not being maintained.

Article

December 2014

If you want to speed up technical news, you probably have heard at least a little of the hype around responsive web design (RWD). The phrase, coined by Ethan Marcotte in May 2010 in his article A List Apart, refers to a modern approach to web design aimed at crafting websites that provide an optimal user experience for all, regardless of their browser or device.

Download

Article, 248 KB, Microsoft Word file

The reality that web developers face today is that there are more people using their mobile devices on the web than ever. An e-commerce study from Marketing Land reported that 30 percent of web traffic came from mobile devices in 2013.

Not only are consumers browsing the Internet and checking their Facebook account on their phone, but most are also using it for their work. Employees are expected to be connected at all times: CIOs review content in passing time within a busy meeting schedule, developers proofread priority web content on a minute's notice, and all employees want the option of catching up on low-priority tasks like reviewing company benefits and perks on their bus ride home. This bring-your-own-device culture is already here. Is your company ready to step up to the plate and fulfill its potential in a connected, content-aware society?

A current solution is to make a mobile version of your website. It sounds pretty simple. Just design a version of your s ite for your Windows Phone, netbook, Ultrabook, tablet, phablet, and the latest version of Android and iPhone—and don't forget to keep in mind all of their different screen resolutions. The number of new devices has skyrocketed in the last five years and won't stop anytime in the next five. And web design doesn't come cheap. Creating a wide breadth of pages simply to accommodate multiple devices is time consuming, expensive, and leads to a fragmented web portfolio.

RWD is a universal approach that is not device specific or version specific. Using fluid layouts and general information about a user's screen size or orientation offers a timeless solution to website design. As an enterprise solution, it allows your employees to work for you in a way that is comfortable for them: where they want, when they want, and on whichever device they see fit. The adoption of RWD for enterprises will be a crucial milestone for companies to compete and adapt to modern trends in today's techn ical world.

The Future of Enterprise RWD

Consumers always want better content, faster devices, and shorter wait times. But, with all of the focus on consumers, what about your employees? They want and deserve all of the same things, and you are entrusting them to maintain your company's reputation as the best of the best.

Enterprises that can adopt RWD practices into their own line-of-business (LOB) applications provide resources for employees to work in environments in which they thrive. For example, IT Showcase at Microsoft offers support for all things mobile, to embrace a bring-your-own-device culture. Employees don't want to be confined to their laptop and cubicle to log their timecard after a long week or check if they have enough vacation time to attend their best friend's wedding in Hawaii. So, don't make them.

RWD adoption can seem like a daunting step, but, piece by piece, it can help bring your company to the top. Employee expectations of your own product s are reflected in your company culture, and ultimately can be seen in products or services that you provide.

RWD is a goal, not a destination. Designing according to RWD, at its core, is offering fluid and appropriate content for users across all devices. RWD adoption isn't going to be a cake walk, but here are some tips to help you along your way:

Use a "mobile first" approach so you can provide content that is accessible and appropriate for users on all of their devices.

Develop fluid content that dynamically offers content based on the size of the device. CSS3 Media Queries and HTML5 offer quick universal tools to determine screen size and orientation.

Offer gesture support. Take advantage of touchscreen capability to offer an engaging user experience beyond simple point-and-click functionality.

Mobile users don't always want to "snack" on content, just because they are on a mobile device. Reevaluate the content that you are offering and ask your users what they want to make sure that you aren't shorting users on their device of choice.

Most enterprise solutions include content management systems to keep track of web presence and content. For example, look at Microsoft SharePoint 2013. Although most out-of-the-box SharePoint templates don't follow RWD practices, there is a reasonably simple solution. With a few CSS3 media queries, your SharePoint websites can respond universally to different browsers and devices. Many companies are also developing RWD templates that enable employees, regardless of web expertise, to build modern webpages that follow RWD practices. Templates can be found from various creators such as CodePlex.

Best Practices

If you are serious about RWD adoption, your first and most important step lies within your content. Your content should reflect what your users want to see in our modern era, across all devices. Reimagine what information your users need and think critically about when to show and hide content, depending on how and when your users interact with your website. Utilize CSS3 to ensure that all of your newly adapted, fluid content works in scenarios appropriate to your product.

Second, develop a hierarchy that prioritizes which and how much content is on devices within specific size ranges. This will help ensure that your users are seeing exactly what they want and need in their current context.

Third, search optimization is imperative. Especially with the rise of digital voice assistants such as Cortana on Windows Phones, users want to search for content and be directed to the appropriate spot within your hierarchy.

Last, you will need strong front-end development skills to ensure that your RWD adoption follows best practices and utilizes the latest technologies. During the development stage, make sure that you are testing your content on various devices in various different contexts. Be creative when thinking about where users are interacting with your website and what they want in that context.

In case you are wondering how you r current web presence holds up to RWD practices, www.modern.ie offers tools that rate your website against modern RWD standards and provides support on how to modernize. These tools also enable you to see what your users see by offering simulation of different browsers and devices.

Does It Actually Pay Off?

Let's face it—full RWD adoption isn't going to be cheap. However, we also need to accept that users and their devices will keep getting more diverse, more operating systems will continue to be released, and versions of software will continue to climb, each with its latest modernizations and tools. Rather than duct-tape together your current web presence, you owe it to your future to start moving in the responsive direction.

According to CIO Insight, employees gain nine hours of work productivity per week due to mobile devices. So, why not enable your employees to work a little more on their terms? Give them the opportunity to use their mobile phone or tablet just as readily as they use their desktop. Catering to your employees' wants and needs will pay its dividends. Engaging employees and allowing them to work when, where, and how they want will encourage not only their creativity, but also their productivity.

Reexamining your web content and establishing clear standards for your own web presence will offer greater consistency across your web portfolio. After your hierarchy has been created, your content can be updated centrally and will seamlessly apply to all devices. Additionally, with content centrally located, analytic data regarding your web traffic, reach, and effectiveness will be aggregated into one URL. Services already exist that will enable you to analyze the aggregate data to determine who is using your product and where.

RWD adoption has the potential to pay off in a variety of ways. Consider it as an IT investment that will hold up even as technology progresses. At its core, RWD seeks to offer a timeless solution to the modern web.

How Is Microsoft Enabling RWD for LOB Apps?

In 2012, Microsoft took the initiative to develop its fully responsive public home page www.microsoft.com. This not only took full advantage of the modern device portfolio, but also capitalized on modern device features to offer a full user experience. This initiative started our movement toward a responsive internal and external web portfolio, modernizing all of the LOB applications to provide a seamless user experience for both consumers and employees. Content scales appropriately to any device and even offers less data-heavy content on devices that likely have less processing power, such as devices on mobile networks.

This website embraces latest techniques to encourage a positive perception of the company. All of this is wrapped up in a clean, accessible, and universal page that people can use at work, at home, or anywhere in between. This website ditched all out-of-date frameworks and plug-ins and now takes full advantage of modern web technology.

       

Conclusion

Enterprise RWD adoption will not be an instant solution that magically works on all devices imaginable. Companies will face roadblocks due to massive hierarchies of content, deep levels of site navigation, and departure from current content management frameworks. The ever-present worry of Internet identity and security also yields questions of on-premises or cloud offerings an d how to secure all of the sensitive data that you manage.

However, companies and consumers have been stuck in a desktop-centric web for far too long. You have the opportunity to break the vicious cycle and stand out in front of the rest. Approach the transition in bite-sized pieces to address your needs and those of your consumers. Focus on a long-term strategy that will set you on the right track to have a timeless web presence across devices to enable your employees.

Related Case Studies

5 IT Strategies for App Creation and Delivery(Published June 26, 2014)

Aligning the IT Organization to Deliver Modern Apps(Published July 24, 2014)

Building for the Modern Web - Leveraging IE11 Developer Tools to Build Modern LoB Applications(Published December 27, 2013)

For More Information

For more information about Microsoft products or services, call the Microsoft Sales Information Center at (800) 426-9400. In Canada, call the Microsoft Canada Order Centre at (800 ) 933-4750. Outside the 50 United States and Canada, please contact your local Microsoft subsidiary. To access information via the World Wide Web, go to:

www.microsoft.com

www.microsoft.com/ITShowcase

 

© 2014 Microsoft Corporation. All rights reserved. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Source: Responsive Web Design for Enterprises