The Basics of Responsive Web Design

Abstract

Mobile ASP.NET MVC 5 will take you step-by-step through the process of developing fluid content that adapts its layout to the client device using HTML, JavaScript and CSS, and responsive web design. This book introduces server-side techniques that allow you to show different content to different devices and make the most of their strengths and capabilities. Mobile ASP.NET MVC 5 includes a wide range of techniques, tips, and guidelines for dealing with some of the challenges of mobile web development, such as browser incompatibilities, varying device performance, and targeting older devices. Yo. At a Glance; Introduction; Chapter 1: The Basics of Responsive Web Design; Is This for Developers?; Getting Started; Losing that Fixed Fixation; A Flexible Layout; Flexible Content; CSS Media Queries; The Viewport Meta Tag; Incompatibilities; Retina Screens; Summary; Chapter 2: CSS Layout Bootcamp; First Steps; The Basic Rules; Display: Block, Inline, and Inline Block; Floats; CSS Rule #6 Always set an explicit width for floated elements so they will behave consistently.; Collapsing Containers; Calculating Width; Box-Sizing; Laying Out a Page in CSS; Creating a Page with a Sidebar. Adding Some PaddingConsistent Columns; Display Like a Table without a Table; Faux Columns; Creating a Horizontal Menu in CSS; Laying Out the Menu Using Floats; Laying Out the Menu Using Display: Inline-block; Summary; Chapter 3: Flexible Layouts; Setting up a New Responsive ASP.NET MVC Site; Revisiting the Three-Column Layout; Making Our Three-Column Layout Flexible; Creating Space; Adding Borders; What about Older Browsers?; A Two-Column Layout; A Ten-Column Layout with Header and Footer; Summary; Chapter 4: Flexible Navigation; Making the Horizontal Menu Vertical. Moving the Menu to the BottomTurning the Menu into a Select; Creating Accordion-Style Navigation at the Top; Creating Off-Canvas Flyout Navigation; Summary; Chapter 5: Flexible Content; Flexible Text; Em; Rem; Line Height; Responsive Text; Flexible Tables; Plain Tables; Scrolling Table; De-table the Table; FooTable; Flexible Video; HTML5 Video; Default Behavior; Setting Max-width: 100 Percent; Is It That Easy?; Embedding Video; Setting Max-width: 100 Percent; Change the Dimensions with a Script; Flexible Images; The Problems; Solving for Image Size; Solving for Resolution and Bandwidth. The Picture Element and PicturefillHow Practical Is All This?; Summary; Chapter 6: Display Modes, View Engines, and Html Helpers; Mobile Views; Step 1: Create an Empty ASP.NET MVC 4 or 5 Site; Step 2: Create the HomeController; Step 3: Create the View; Step 4: Create a Layout; Step 5: Create the CSS and JavaScript; Step 6: Create our Mobile Overrides; DisplayModes; Setting Up a Windows Phone 8 DisplayMode; Custom View Engine; Adding A/B Testing; HtmlHelpers; Summary; Chapter 7: Device and Feature Detection; Device Detection; Parsing User Agent Strings with WURFL; Abstracting WURFL. Feature DetectionPractical Feature Detection; Device Detection versus Feature Detection; Summary; Chapter 8: Mobile Performance; Tools; The Chrome Developer Tools; Fiddler; Performance Techniques; Always Reduce the Number of HTTP Requests as Much as Possible; Always Use Gzip Compression; Always Combine and Minify CSS and JavaScript; Always Cache Client-Side When Possible; If-Modified-Since; Expires; Cache-Control; Always Optimize where CSS and Scripts are Included in the Page; Consider Using CSS Sprites; Always Optimize Your Images; Consider Using a Content Delivery Network; Summary.