CSS Media Queries & Using Available Space

We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types

The top 25 responsive web design tools | Web design Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and more. This onslaught of connected devices is just the beginning, and we're bound to see people accessing the web from a greater number of devices in the coming years. It's futile to create a dedicated web experience for every single device class out there, and the need to create a smart, flexible, adaptable web experiences is becoming more apparent every day. Just because responsive design is becoming necessary doesn't mean it's easy. Innovative tools These are formidable problems we're up against, but thankfully the web design community is up to the challenge. There's a lot to get excited about, but it can also be a huge task to keep track of the latest tips and tricks. 01. Mobile-first, Foundation closely follows a progressive enhancement strategy. 02. This is where Jetstrap comes in. 03. 04. 05. 06. 07. 08. 09. 10. 11.

The Fluid Grid This website is designed and built using a fluid grid. It will display properly on almost any screen resolution. It will render properly on mobiles, tablets, and Web enabled TV’s. No plugins required; no subdomains or mobile specific URLs (ie. mobile.promediacorp.com; promediacorp.com/mobile). Resize your web browser window and you will see that the content on this page renders differently depending on the height and width, as seen in the short clip below: This is how the homepage renders on a mobile handset, such as an iPhone: This is how the homepage renders on a tablet (portrait orientation), such as an iPad: This is how the homepage renders in a typical desktop view: Responsive web design on a fluid grid eliminates the question of whether you need a mobile site. An evolution in web design? By looking at the user’s available screen real estate, we can serve our site appropriately, thanks to the em property in CSS3. a) and Further Reading:

HTML5 Custom Data Attributes (data-*) Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul> We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. A word of warning Summary

When can I use... Re-designing busuu Design Principle Two: Pictures are better than words (and icons are better than pictures) Busuu teaches people to learn foreign languages — and it’s good at it; since I have been working here our user base has grown by just over 10 million. As a result of having such a large user base, we have to cater for multiple interface languages with dramatically varying text lengths. To get around this text-length problem we have made a huge effort to use icons as much as possible to support and (where possible) to replace text translations. Tip: Use SVGs Again — it seems easier to just do a sprite sheet for web, but having SVGs will save you heaps of time in the long run if you are redesigning your product and are susceptible to decisions changing around colour, size, etc. Design Principle Three: Less steps good, more steps bad Our users come to busuu to learn languages — so we have reduced the number of steps required before they can access a learning unit. Tip: Don’t get lost in product re-skins

50 fantastic tools for responsive web design | CSS3 As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid gridResponsive imagesMedia queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment). 01. 02. 03. 04. 05. Tools for a flexible/fluid grid 06. 07. 08. 09. 10. 11. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. slabText 23.

Adaptive Images in HTML Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. 1. 3.