Blog Stats
  • Posts - 23
  • Articles - 0
  • Comments - 8
  • Trackbacks - 0

 

Mobile responsive site design in Expression Web

Although it doesn’t have any specific tools to help responsive or mobile site design this is still possible in Expression Web and I’ve created a number of snippets to help the process.

HTML5 and CSS3 are the key to responsive design, so the snippets cover the new HTML5 layout elements, form input types and microdata tags, and the CSS3 snippets cover box-radius, box-shadow, gradients etc. The mobile snippets include the CSS3 media queries, mobile meta tags and the responsd.js shim that enables older non-HTML5/CSS3 browsers to use the media queries.

The snippets are downloadable from the Expression Gallery:

http://gallery.expression.microsoft.com/HTML5Snippets

http://gallery.expression.microsoft.com/CSS3Snippets

http://gallery.expression.microsoft.com/MobileSnippets

I’ve also created a sample mobile-friendly responsive template for EW.

http://gallery.expression.microsoft.com/MobileTemplate

One caveat about using the CSS3 media queries with a mobile-first layout (the preferred way to use them) is that the Design view in Expression Web doesn’t recognise the queries and therefore displays the mobile view rather than the appropriate wide screen view. You may therefore have to rely more on browser preview when laying out pages.


Feedback

No comments posted yet.


Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

 

 

Copyright © ihaynes