background preloader

Focal Point: Intelligent Cropping of Responsive Images

Focal Point: Intelligent Cropping of Responsive Images
The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more. Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Meet Focal Point Focal Point is a GitHub project and CSS framework created by Adam Bradley. The problem with this idea of course is that if you arbitrarily crop an image, you could be cutting out the most important part of the image! Fortunately, Focal Point allows you to specify a targeted area of the image to retain (the focal point). How Does It Work? Implementing Focal Point is a pretty unique process, but it’s quite easy. The process here is to find the face, then count grid units from center. The Code Translate Grid Units to Classes Build It

Developing WordPress Themes Using Responsive Frameworks Responsive design is slowly but surely becoming an expected standard for web developers. This tutorial will show you how to add a responsive framework to your next WordPress theme. What Is Responsive Design? It used to be you only had to worry about website consistency across multiple browsers, but now we have to look at the bigger picture – consistency across multiple devices. Responsive design is all about making things fluid and adjusting according to screen size. Responsive Frameworks There are several responsive frameworks out there to choose from. Bootstrap Bootstrap from Twitter is built on a responsive 12 column grid. Less Framework Less Framework is based on 4 layouts and 3 sets of typographic presets. Foundation Foundation is a grid system based on 12-columns that do not have a fixed width; they can vary based on the resolution of the screen or size of the window. YAML is a multi-column layout based on a grid system with percentage widths. Step 2 Add IE Only Conditions <! iTheme2

Retina Display Media Query For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x": @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } Or other highish-res: Old Stuff (don't use, keeping for posterity) @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ } This is more future proof... @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina-specific stuff here */ } Notes: Example: Let's say you had three major breakpoints in a design.

filamentgroup/grunticon Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

Content Folding | CSS-Tricks Less than a year ago, Trent Walton published Content Choreography in which he lamented at some of the difficulties and limitations of responsive layouts. At times, it seems as though all of the site architecture & planning goes out the window as content reflows. You have to admit, an awful lot of responsive designs end up being: Squeeze everything into one columnPush the sidebar(s) to the bottom *cough* this site does that *cough* Trent mentioned it may be a more appropriate approach to "interdigitate" content. That is, to fold bits of content together into that single column in a more thoughtful or useful manner. A Practical Example: Ad Folding Consider a layout at a large browser window size. At narrower browser window sizes we've decided to drop down to a single column. But how? There's probably a number of ways to do this. Fair warning: This stuff is super new and subject to change. <section class="main-content"><article> ... 'ads' is an arbitrary name that we just made up. Semantics

How to Create Retina-Caliber Favicons Friday, 4 January 2013 A few months ago I decided to recreate this website’s favicon to support retina-caliber displays. I found this trickier to accomplish than I anticipated, mainly due to a dearth of good ICO-savvy icon creation tools. Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px. The app I found that works best is Icon Slate, by Kodlian. Next, create a new project in Icon Slate. I found no other tool that suited my needs. iConvertIcons doesn’t do multi-resource ICOs. X-Icon Editor is a free web app recommended by Thomas Fuchs in his otherwise excellent Retinafy Your Website flowchart, but the problem I found with it (other than the inherent clunkiness of a web app in general) is that it did awful things to colors — the colors in the ICO files it generated did not match the colors in my source PNG files.

15 Best Responsive Web Design Testing Tools Responsive Web Design is regarded as being the approach which suggests that web design and development should respond to the end-user’s behavior and environment based on their screen size, platform and orientation. Responsiveness consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. When the end-user switches from their laptop over to their iPad, the website being viewed should automatically switch to accommodate that particular resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the end-user’s preferences. Along with all of the newest devices – also come varying screen resolutions, definitions and orientations. With Responsiveness aimed at crafting sites to provide an optimal viewing experience, modern built web sites must now be able to support basic mobile devices that lack JavaScript. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. — Gavin

Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. The design used as of 2014 was largely created by Lennart Schoors. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY-NC 3.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Which features do you choose to add to this list?

Give Your Website an iOS Home Screen Icon With more mobile web users than ever, it's important to keep your branding strong. Let's go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens. *Awesome waffle icon by Eddie Lobanovskiy Before You Start Before we even think about about our icons' dimensions, there are a few important things you need to keep in mind while designing them (specifically where Apple devices are concerned). Keep it square. It's also worth bearing in mind while designing your icon that it's possible to override these default iOS behaviors. Apple Device Icon Sizes Each Apple Device has a different screen size and resolution. Here's all you need to know for each Apple device: iPhone and iPod Touch (Retina Display) Icon size: 114px by 114px iPhone and iPod Touch (None Retina Display) Icon size: 57px by 57px iPad (Retina Display) Icon size: 144px by 144px iPad (None Retina Display) Icon size: 72px by 72px Adding Your Own Effects

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.

CSS3 2D Transforms

Related: