 Wendy Trem, User Experience Practice Director  Matt Miller, User Experience Designer  Bill Wolohan, Senior ASP.NET and CRM Developer  Jim Raden, Senior ASP.NET Developer  Rich Deken, Business Intelligence Practice Director  Richard Broida, Connected Systems Practice Director Who We Are

Vision and Design

 Update the content to show our company today  Provide a contemporary look and feel  Responsive web design  Design and implement with the future in mind Goals for the New Web Site

What is Responsive Design? Responsive design is the approach to creating/designing websites where the content is optimally displayed regardless of screen/device. The website will adapt to your screen size and display the content to best fit.

Why Responsive Design? #1 – Flexibility: content moves freely across all screen resolutions and all devices. #2 - Excellent User Experience: provides the optimal user experience irrespective of whether they use a desktop computer, a smartphone or a tablet. #3 – Cost Effective: advantages of having a single site that conforms to the need of all devices are significant when compared to having multiple websites #4 – It is Recommended By Google: Google states that responsive web design is its recommended mobile configuration and an industry best practice.

Responsive Statistics % of users are using their phone to search the internet. 47% use a tablet. Of the Alexa’s top 100 sites only 11% of them are still using fixed widths. This means 89% of the tops sites in the world are responsive. What do we know moving forward? Responsive is here to stay! Source: Global Web Index

Follow along! A Tour of Our New Site

 Planning Content  Designing the Layout  Adapting for Small Devices How We Designed the Site

Building the Site

 Why ASP.NET MVC is great for responsive design Choosing the Platform

 MVC Views  Dynamic content from XML  Content from external sites Putting in Content

 Choosing a framework  How we used Bootstrap  How we used LESS Implementing Responsive Design

 Visual Studio Web Essentials  Taming Javascript  JQUERY  TypeScript More Helpful Tools

 Why SVG?  Cross Browser Challenges  E.g., IE 8  How We Formatted Images

Takeaways

Microsoft Azure Hybrid Cloud: Bring Internet Scale to Your LOB Apps