Slides that accompany a presentation on building responsive websites using Visual Studio 2013, Bootstrap 3.0, and other popular open-source tools and frameworks. It covers the following topics: trends and challenges in web application development, what's new in Visual Studio 2013; helpful extensions and packages; overview of Bootstrap 3.0 ; introduction to LESS; brief guide to popular JavaScript frameworks ( modernizr, initializr); working with fonts; using CDNs with local failover; implementing mobile-friendly page layout; using ELMAH (Error Logging Modules and Handlers).

1. Build Responsive Websites
with Visual Studio 2013 and Bootstrap 3.0
Alek Davis
Intel Corporation

2. Agenda
Summary
 The absolute minimum you need to know to build responsive websites using
Visual Studio 2013, Bootstrap 3.0, and other popular open-source tools and
frameworks
Intro
 Trends, challenges, goals
Tools
 Visual Studio 2013, extensions, packages
 Bootstrap 3.0; LESS; ELMAH, Modernizr, Initializr, etc; fonts
Demo
 Project structure, page layout, elements, branding, functionality, performance
2

3. Current state of web development
Summary
 Same problems, more and better tools, no perfect solutions
Challenges
 IE browser wars, form factors (big and small, touch), HTML5, CSS3, baby
boomers
Trends
 Larger fonts, minimalism, responsive design, adaptive page layout, end of
Flash, rise of JavaScript, new frameworks, Bootstrap
 See also Designing A Website For 2014 and Web Design Trends for 2014
Goals
 USE industry standards and popular frameworks to BUILD
functional, efficient, and responsive website that are easy to MAINTAIN and
upgrade
3

4. Visual Studio 2013
What’s new?
 Minor IDE improvements (color is back, peek definition [Alt+F12])
 TFS 2010 or newer
 Bootstrap and other frameworks included
 Lots of magic (ScriptManager, LESS semi-support, friendly URLs)
See also
 Difference between Visual studio 2012 and Visual studio 2013
 ASP.NET features in New Project Templates in Visual Studio 2013 explains
purpose of project packages
4

5. Visual Studio extensions
Required
 Web Essentials: compiles LESS files, bundles/minifies CSS/JavaScrip
 Visual Studio Spell Checker: shows spelling errors
Recommended
 SlowCheetah: transforms web.config files on build (requires a project file modification)
 StopOnFirstBuildError: stops solution build on first error
Optional
 GhostDoc auto-generates XML comments
 Microsoft Visual Studio Team Foundation Server 2013 Power Tools: Team Explorer enhancements
 Regex Tester: tests regular expressions from the IDE
 jQuery Code Snippets: increases productivity
 Code Alignment: aligns code using different algorithms
 CodeMaid: helps working with code
 Productivity Power Tools 2013: enhances IDE
 Indent Guides: improves code readability
5

6. NuGet packages
Essential
 ELMAH (Error Logging Modules and Handlers)
 See also related packages
6

7. Bootstrap 3.0
Basics
 HTML5 + JavaScript + CSS3 for building responsive websites
 Mobile first design (pros and cons)
 Page scaffolding (xs (480px), sm (768px), md (992px), lg (1200px))
 Components (navigation, modal dialogs, menus, grids, etc)
 Pros and cons (popularity, customization, complexity, bugs and features,
dependencies)
Source
 Bootstrap home page
7

8. Bootstrap 3.0 (continued)
Dependencies
 jQuery
Companions
 Themes are optional
 Glyphicons font not needed (use FontAwesome [compare to Glyphicons])
 Respond.js for IE8 and IE9 (+ extra code)
 Initializr template generator
 Modernizr feature detector (included by Initializr)
 HTML4Shi(m|v) HTML5 tag recognition for pre-IE9 (included by Modernizr)
8

9. Bootstrap 3.0 (continued)
Customization
 Online (pros and cons)
 Use custom CSS (must follow the Bootstrap CSS)
 Use Bootstrap LESS as-is (or customize)
 See also:
 Twitter Bootstrap Customization Best Practices
9

10. Bootstrap 3.0 (continued)
Learning
 Better UI/UX with Bootstrap: A Developer's Primer video (50 min)
 Learn Twitter Bootstrap in 2 Hours video tutorials by easydevtuts
 Code a Responsive Website with Bootstrap 3 video tutorials by Brad Hussey
 Twitter Bootstrap Tutorial video tutorials by Creativity Tuts
 Responsive Web Design With Bootstrap video tutorials by Coder's Guide
 More...
Resources
 The big badass list of useful Twitter Bootstrap resources
10

11. LESS (Leaner CSS)
Overview
 LESS home page
 CSS preprocessor syntax
 Compiled to CSS on server or client
 Alternative to SASS
Features
 Variables, mixins, functions, operations, nesting, imports, and more...
Visual Studio integration
 Web Essentials extension (compiles LESS on save)
11

12. ELMAH (Error Logging Modules and Handlers)
Purpose
 Automatic or programmatic logging of error information
 Error log UI
Setup
 Install primary NuGet package
 Install error log type-specific NuGet package (e.g. SQL Server)
 Configure error log settings in the web.config file
 Define admin access rules (must turn SSL on when not using integrated
Windows authentication)
 Adjust configuration settings (e.g. for page not found -- AKA 404 -- errors)
12

13. Demo
Project
 Structure (folders, etc)
 Bundles (styles and scripts)
 Transformations (config files)
 CDN (failover)
 Exception handling
Fonts
 Font Awesome
 Google fonts
 Adobe Edge fonts
 Open Sans (see also)
Layout
 Sticky footer (see explanation)
13