Geeks With Blogs

expression{web.blog} Thoughts on Expression Web and web tools in general

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.

Posted on Tuesday, May 15, 2012 9:35 PM | Back to top


Comments on this post: Mobile responsive site design in Expression Web

# re: Mobile responsive site design in Expression Web
Requesting Gravatar...
Hi
these are no longer available on mdsn can you give me a link or send them to me by email please.
thanks*
Peter
Left by peter on May 30, 2013 8:37 PM

# re: Mobile responsive site design in Expression Web
Requesting Gravatar...
They are now on my EW Resource site:

http://ew-resource.co.uk/v4addins.aspx

http://ew-resource.co.uk/sp2-snippets.aspx

Sorry for the dealy in replying.
Left by Ian Haynes on Jun 12, 2013 10:14 PM

Your comment:
 (will show your gravatar)


Copyright © ihaynes | Powered by: GeeksWithBlogs.net