Eric lippert - Amazon Web Services
Eric lippert - Amazon Web Services
Eric lippert - Amazon Web Services
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Things to note – Caveats, ifs and buts<br />
Well, that neatly sums up this example where we highlighted<br />
one way to leverage capabilities of CSS media queries. We only<br />
used the device width feature, but there are 11 other features<br />
for us to explore if we need them. Idea was to introduce you to<br />
them so that you can utilize them when the need arises.<br />
Key takeaways<br />
1. We have NO JavaScript references in our project whatsoever.<br />
2. CSS Media Queries are well supported in IE9+, Firefox 3.5+<br />
and most versions of Chrome. This app was built using IE10 and<br />
verified on Firefox 20.0.1 on Windows 8.<br />
3. We did not investigate any techniques to adapt to different<br />
image sizes based on form factor so this implementation has a<br />
disadvantage where it’s pulling the same amount of data on all<br />
screens which might be a problem for high latency networks like<br />
some mobile broadband. This can however be mitigated with<br />
some help from the Image source. Twitter supports multiple<br />
image sizes and we could use that to fetch different ‘versions’ of<br />
the same image.<br />
4. Older browser support: This is a thorny issue and often we<br />
simply cannot leave behind folks that are behind on the<br />
adoption curve. In such cases, there are JavaScript shims<br />
available. One of the popular ones is Respond.js. You can check it<br />
out at http://wordpress.org/extend/plugins/respondjs/<br />
5. The code for Twitter Authentication is not vetted from a<br />
security air-tightness point of view. So for a more ‘secure’ way,<br />
use ASP.NET’s Twitter Authentication using DotNetOpenAuth and<br />
then use LinqToTwitter to query if you want.<br />
Conclusion<br />
Responsive UI design for the web has got a huge boost with CSS<br />
Media Queries Level 3. This article is aimed to serve as a primer<br />
to Media queries. Feel free to explore various features that are<br />
available and adapt them to serve up the best possible Views for<br />
the maximum percentage of your users<br />
The source code can be downloaded from our<br />
GitHub repository at bit.ly/dncm6-cssmq<br />
Suprotim Agarwal, ASP.NET Architecture MVP,<br />
is an author and the founder of popular .NET<br />
websites like dotnetcurry.com, devcurry.com<br />
and the DNC Magazine. You can follow him on<br />
twitter @suprotimagarwal<br />
56 | DNCmagazine www.dotnetcurry.com
Change language