Best Practices for Modern Web Sites • • • • • Wendy Trem Matt Miller Bill Wolohan Jim Raden Rich Deken

      Who We Are 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

Vision and Design

Goals for the New Web Site     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

What is Responsive Design?

Responsive design content is is the approach to creating/designing websites where the 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 2015 • 80% 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

A Tour of Our New Site Follow along!

http://www.bennettadelson.com

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

Building the Site

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

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

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

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

How We Formatted Images   Why SVG?

 Cross Browser Challenges E.g., IE 8 

Takeaways

4/14/2015 Microsoft Azure Hybrid Cloud: Bring Internet Scale to Your LOB Apps