Layouts: The Next Generation Rather than work with floats and positioned content we'll concentrate on 3 newish layout technologies: Multi column, flexbox and grid General considerations The table below, taken from Responsive Typographyhttp://shop.oreilly.com/product/0636920034063.do by Jason Pamental O’Reilly gives an idea of the different devices sizes and the elements sizes as related to them. We’ve also put the equivalent print sizes for comparison. | | | Print | Desktop xl | Desktop | Tablet | Phone | | --- | --- | --- | --- | --- | --- | --- | | Body | Font Size | 12pt | 16px...
Making and Breaking the Grid and The Elements of Typographic Style are two of my favorite books on design and, for the longest time, I thought about them only in their applications to books. Sitting at a full-day workshop with Jen Simmons about grids it has opened mind and reminded me of what can we do to expand the reach of the web. I will discuss some of them as a way to wrap this up. What is exclusive to the web We need to research and discover what is it that makes the web unique and different from other...
Media queries to control typography and layout Media queries are awesome. They allow developers us to change elements of the design based on arbitrary criteria…. We finally can customize our designs to fit on the target devices rather than the other way around. If we were to create a query for every device in the market we would be stuck in the process for a long, long time. Instead we'll build queries for device sizes using the following mixin. It’s broken in 2 sections: - A nested map containing this information: - The names of the breakpoint - The minimum...
Taking advantage of SASS to play with colors I'm bad at remembering headecimal, rgba or hsl colors. These fuctions will help convert the hexadecimal values scss $base-color: AD141E; Darken & Lighten These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%. scss darken $base-color, 10% lighten $base-color, 10% !http://media.tumblr.com/tumblrluv5i70HPp1qb5ozt.png Saturate, & Desaturate These will will adjust the Saturation of the colors HSL values, much like...
Rather than let font loading remain at the mercy of the network we'll use Font Face Observer to dynamically load the fonts and swap them when ready. This may cause a little user cognitive dissonance but it's better than the alternatives of browsers taking forever or not loading the font. setting up fonts We'll use the following mixin to create our @font-face declarations scss @mixin font-declaration $font-family, $font-file-name, $weight:normal, $style:normal { @font-face { font-family: '{$font-family}'; src: url'{$font-file-name}.eot'; src: url'{$font-file-name}.eot?iefix' format'embedded-opentype', url'{$font-file-name}.woff2' format'woff2', url'{$font-file-name}.woff' format'woff', url'{$font-file-name}.ttf' format'truetype', // working with myFonts requires the svg file // to be formated like this...
One of the things I would have killed for when I came back to doing serious web design was a set of guidelines, stylesheets and examples of how to use responsive design and typography on the web. This is my attempt at creating such a guide. It's far from perfect but it's a starting point. I don't hide the fact that I'm opinionated. There are reasons why I choose to do things a given way and I respect that you may disagree with me, that's your call. SASS/SCSS versus CSS The styles in this guide will be created using SASS...
- Responsive Web Design - Responsive Web Designhttps://abookapart.com/products/responsive-web-design — Ethan Marcotte, A Book Apart - Responsible Responsive Designhttps://abookapart.com/products/responsible-responsive-design — Scott Jehl, A Book Apart - Going Responsivehttps://abookapart.com/products/going-responsive — Karen McGrane, A Book Apart - Responsive Design: Patterns and Principleshttps://abookapart.com/products/responsive-design-patterns-principles — Ethan Marcotte, A Book Apart - Design For Real Lifehttps://abookapart.com/products/design-for-real-life — Eric Mayer & Sara Wachter-Boettcher, A Book Apart - Inclusive Design Patternshttps://www.smashingmagazine.com/books/inclusive-design-patterns — Haydon Pickering, Smashing Books - Service Workers - caniuse.com support matrixhttp://caniuse.com/feat=serviceworkers - Specificationhttps://w3c.github.io/ServiceWorker/ - Is ServiceWorker ready?https://jakearchibald.github.io/isserviceworkerready/resources.html — Jake Archibald - Service Workers: an Introductionhttps://developers.google.com/web/fundamentals/getting-started/primers/service-workers — Web Fundamentals - Service Worker APIhttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerAPI — MDN - Support...
As consumers of information we’ve all become more demanding. We want the content faster and we want to be engaged with the content we access online. PSPs should be no different in their performance to traditional web applications. Rather than provide a one-size-fits-all solution I present some of the data Nielsen first articulated in 1993’s Usability Engineering We’ll use these values to draw some basic conclusions that will start the thinking about performance and how PSPs can work towards achieving those performance goals. - 0.1 seconds — Operations that are completed in 100ms or fewer will feel instantaneous to the...
We want our content to look awesome regardless of the device. How do we accomplish this? A good starting point is Ethan Marcotte’s Responsive Web Designhttps://abookapart.com/products/responsive-web-design or whatever Responsive Web Design book is your favorite. We want the experience to scale to whatever device or platform we’re targeting and, whatever design we choose, the first thing we need to make sure of is that it’ll work well in phones, tablets and desktops in other words, everywhere there is a browser. Once we have a layout we can start thinking about, what to me is, the most important part of any...
I still remember the first time I made an annotation from a Kindle book available in their public site kindle.amazon.comhttp://kindle.amazon.com/. I saw the possibilities as limitless until I realized that there were limitless as long as you bought the book from Amazon and read it on a Kindle device or application. Every time I’ve turned around and searched for some way to annotate the web I've come with these two solutions but I've never had a project they work well with. I think PSPs are the perfect place to put this in practice. There are two libraries I think are...
