Best Practices for Modern Web SitesBroaden the Audience ResponsivelyThe Bennett Adelson Modern Web All-Stars• Wendy Trem• Matt Miller• Bill Wolohan• Jim Raden• Rich Deken

We’ll Discuss…

Why We Redid Our Web Site

How We Designed It How We Built It

Content Responsive Design Images and

Animation Takeaways

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

Who are you?

Your questions are encouraged!

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 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

Follow along!

http://www.bennettadelson.com

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

April .NET SIG4/14/2015Richard Broida Connected Systems Practice Director – Bennett Adelson

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