spaceninja + responsive   170

Using a Mixin to Take the Math out of Responsive Font Sizes
Responsive Font Size (RFS) is a Sass mixin that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport. RFS makes writing code for fluid type feel a lot like writing native CSS directly in the stylesheets you’re already working in — only without having to wrangle and manage a bunch of media queries.
fridayfrontend  css  sass  mixins  responsive  typography  fluid 
29 days ago by spaceninja
How to make your HTML responsive by adding a single line of CSS
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS.
fridayfrontend  css  cssbasics  responsive  grids  cssgrid  layout 
7 weeks ago by spaceninja
Responsive Iframes
The best trick for responsive iframes, for now, is making an aspect ratio box. First you need a parent element with relative positioning. The iframe is the child element inside it, which you apply absolute positioning to in order to fill the area. The tricky part is that the parent element becomes the perfect height by creating a pseudo-element to push it to that height based on the aspect ratio. The whole point of it is that pushing the element to the correct size is a nicer system than forcing a certain height. In the scenario where the content inside is taller than what the aspect ratio accounts for, it can still grow rather than overflow.
fridayfrontend  html  css  iframes  responsive  aspectratio  cssbasics 
7 weeks ago by spaceninja
Intrinsically Responsive CSS Grid with minmax() and min()
CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!
fridayfrontend  css  layout  grids  cssgrid  responsive  minmax  min 
7 weeks ago by spaceninja
Tips for rolling your own lazy loading
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets by requesting images when they're needed. In this post, we’ll look at an implementation you can add to your site as I’ve done on this little demo site.
fridayfrontend  images  lazyload  performance  intersection-observer  responsive  javascript 
10 weeks ago by spaceninja
Responsive design ground rules
Creating a responsive design can be intimidating. There are many moving parts, things might lay out in ways you didn't expect and keeping all various viewports in mind when laying out a design can be daunting. With these ground rules, your responsive designs will be more robust and predictable.
fridayfrontend  css  cssbasics  responsive  layout  guidelines  rules  bestpractices  tutorial 
11 weeks ago by spaceninja
Making Tables Responsive With Minimal CSS
I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS.
fridayfrontend  cssbasics  html  css  tables  flexbox  responsive 
june 2019 by spaceninja
Six assumptions which could break your website
A mistake consistently made by some of the biggest websites shows they are thinking about responsive web design incorrectly.
fridayfrontend  cssbasics  responsive  layout  mobile  touch  cssgrid 
june 2019 by spaceninja
The CSS Mindset
CSS can be difficult to grasp if you think about it in terms of a "traditional" programming language. There is a certain mindset involved that helps to understand why it works the way it does.
fridayfrontend  css  cssbasics  tips  cascade  shorthand  flexible  responsive  bem  smacss 
june 2019 by spaceninja
The CSS background-image property as an anti-pattern
The CSS back­ground-image prop­er­ty allowed us to do some amaz­ing things, but in most cas­es, it’s time to leave it behind.
fridayfrontend  css  cssbasics  backgrounds  images  performance  accessibility  responsive 
june 2019 by spaceninja
The State of Fluid Web Typography
Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used?
fridayfrontend  cssbasics  css  webfonts  typography  fluid  responsive 
may 2019 by spaceninja
Create a responsive grid layout with no media queries, using CSS Grid
Embracing the flexible nature of the web gives us powerful, resilient front-ends, where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts. It’s a fully responsive grid that uses no media queries to work across all viewports and it’s all thanks to CSS Grid.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  responsive 
may 2019 by spaceninja
Relative sizing with EM units
Relative sizing helps in this situation and I like to let font-size do the work for me. By using em units to size elements that would be previously sized with px, we can let things scale, whilst maintaining a sensible scale of its parent’s font-size. We also have the flexibility to use em units for width and height with this strategy.
fridayfrontend  css  cssbasics  ems  responsive 
april 2019 by spaceninja
Custom Property controlled fluid type sizing
Without getting too much into the weeds, you set a min size and a max size (with optional min and max screen sizes), and the calc-based formula works out a fluid measure, on the fly, based on those 2 locks and the window’s current width.
fridayfrontend  css  cssbasics  customproperties  variables  typography  responsive  locks  fluid  utility 
april 2019 by spaceninja
Planning for Responsive Images
This article aims at affording simple yet effective guidelines for setting up responsive images and layouts in light of the many—and potentially confusing—options available. Do familiarize yourself with CSS grid, art direction, and resolution switching and you’ll be a ninja in short order. Keep practicing!
fridayfrontend  cssbasics  html  images  responsive  performance 
march 2019 by spaceninja
Responsive spacing with viewport and ch units
What I wanted with some elements of my site was some padding around them that was responsive to the viewport in both directions. The smaller the viewport — in either dimension, the tighter the element could be. When the user’s viewport was large, it could be very roomy. I found that using both vw and vh units made this quite easy — and without media queries.
fridayfrontend  css  layout  vw  vh  viewport  ch  units  responsive  cssbasics 
march 2019 by spaceninja
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing "hacky" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so cool about this era in web development is that we're capable of doing more and more with fewer lines of code.

In this article, we'll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It's easier than what you may think, and since CSS Grid was built with responsiveness in mind, it'll take less code than writing media queries all over the place. Let’s do this!
fridayfrontend  css  grids  cssgrid  layout  responsive  mediaqueries 
march 2019 by spaceninja
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints
CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful in numerous use cases, including managing color palettes, customizing components, and theming. But CSS variables can also be really helpful when it comes to responsive design.
fridayfrontend  cssbasics  css  customproperties  responsive  breakpoints  variables 
february 2019 by spaceninja
A Guide to Website Image Optimization and Performance
The RICG had a few goals, some shouted from the rooftops and some not. For example, the goal of finding efficient, preparser-friendly methods of tailoring image requests to browsing contexts was no secret. Paving a path for more designers and developers to become involved in the standards process—we were pretty loud about that one, too. More subtle, however, was a goal many RICG members shared, me included: a day when we would hardly think about responsive images.
fridayfrontend  html  images  responsive  compression  lazyload  automation 
february 2019 by spaceninja
Table Design Patterns On The Web
Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019.
fridayfrontend  css  cssbasics  tables  html  responsive  javascript  accessibility 
february 2019 by spaceninja
Understanding the Albatross
This morning, I read Heydon Pickering’s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step. I spent a bunch of time figuring out *why* it works.
fridayfrontend  css  layout  responsive  flexbox  containerqueries 
january 2019 by spaceninja
Responsive Images Using SVG Instead of Srcset
In conclusion, if your images can be exported to SVG, use SVG instead, and save a ton of bandwidth and your users will thank you for it. Thanks for reading!
fridayfrontend  cssbasics  svg  images  performance  srcset  responsive 
january 2019 by spaceninja
Responsive Design, and the role of development in design
This is a deep-dive into the role of development in the design process, with a focus on responsive design. It’s aimed at design leaders/managers and developers working with design teams, and visual designers looking to become better web designers. I’ll attempt to lay out the problems, and suggest practical solutions. I hope it helps. 🙂
responsive  design  layout  mobile  rwd 
january 2019 by spaceninja
It’s not about the device.
"Is anyone actually going to use the browser on a watch, though?" Sometimes the question’s asked sincerely; more often than not, it seems to be asked skeptically. (And perhaps a little derisively.) But each time I share a link to an article about browsing on the Watch, it’s always, always asked.
fridayfrontend  images  applewatch  ios  accessibility  performance  responsive 
december 2018 by spaceninja
Responsive Images on the Apple Watch
Unless you send Apple a specific signal that you’ve considered one-inch-wide screens, they’re going to assume that you haven’t, pretend to be a bigger, more-common viewport, and zoom out.
apple  ios  watch  rwd  responsive  images  fridayfrontend 
november 2018 by spaceninja
Responsive Images
Excellent bit of history from Mat Marquis on why we needed responsive images, and what was wrong with the `img` element in the first place.
fridayfrontend  responsive  images  html 
october 2018 by spaceninja
Improving Client-Side Performance
Below are some ways I’ve found to optimise the performance of a site when getting it ready for a production environment, or patching an existing site. Where possible I’ll list some common implementations, though understandably we don’t always have the kind of access we want to make changes.
performance  images  responsive 
september 2018 by spaceninja
Common Responsive Layouts with CSS Grid (and some without!)
When I was learning CSS and HTML the way that I learnt best was by copying layouts written by others and then changing bits, deleting bits and playing around with them until I understood what was going on. With that in mind, I’ve composed a few common responsive website layouts for you to copy, edit, mess around with. I’ll go over my thinking with each layout and will outline a few tricks from each one.
fridayfrontend  cssbasics  css  grids  layout  cssgrid  responsive 
september 2018 by spaceninja
Time-saving CSS techniques to create responsive images
As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours. This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.
fridayfrontend  css  cssbasics  responsive  images  object-fit 
august 2018 by spaceninja
Fitty scales text up (or down) so it fits perfectly to its parent container. Ideal for flexible and responsive websites.
typography  javascript  css  responsive 
august 2018 by spaceninja
Sometimes `sizes` is quite important
In this case, we're changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we're also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to tell the browser what size the image will be shown at, as per our CSS.
fridayfrontend  css  responsive  images  sizes  srcset  performance 
july 2018 by spaceninja
Designing Web Content for watchOS
On Monday Apple announced that it was bringing Webkit to the Apple Watch with WatchOS 5. This will allow users to open links from the Mail and Messages apps directly on their watches. Naturally, as web developers, we wonder how this will work with our already responsive websites. Well here’s the basics.
fridayfrontend  css  mobile  watchOS  applewatch  responsive  guidelines 
june 2018 by spaceninja
Designing for Inclusion with Media Queries
Did you know that media queries aren’t just limited to screen size? This talk will dive into some lesser-known media queries that can help developers and designers create experiences for people browsing the web using assistive technologies.
fridayfrontend  video  css  mediaqueries  featurequeries  inclusive  responsive 
june 2018 by spaceninja
Building a responsive image
I got the idea to build a logo file for our company, that not only reacts to the browser width but instead adapts while respecting its aspect ratio. So you can use it anywhere, and the file itself chooses which version to show depending on the size it’s given.
fridayfrontend  svg  logos  responsive  aspectratio 
june 2018 by spaceninja
Responsive tables, revisited
The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. So I wondered, is there any way to create it without duplicating content either in the markup or in the CSS? After a bit of thinking, I came up with two ways, each with their own pros and cons.
fridayfrontend  css  html  accessibility  responsive  tables 
may 2018 by spaceninja
Container-Adapting Tabs With "More" Button
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
css  cssbasics  navigation  tabs  flexbox  layout  responsive  javascript  fridayfrontend 
may 2018 by spaceninja
CSS Grid — Responsive layouts and components
Let’s make a photo gallery responsive quickly and using very few lines of CSS.
css  cssbasics  grids  cssgrid  layout  galleries  photos  responsive  fridayfrontend 
may 2018 by spaceninja
Things Designers Should Know About SEO In 2018
Here is an overview of what we will be covering in this article: Design mobile first for Google; Structure content for organic visibility; Focus on user intent (not keywords); Send the right signals with internal linking; A crash course on image SEO; Penalties for pop-ups; Say it like you mean it: voice search and assistants.
fridayfrontend  seo  mobile  responsive 
may 2018 by spaceninja
Obnoxiously Readable Responsive Text with Viewport Units
There have been other incarnations of this style of JavaScript text resizing. But as far as I can tell, we had the option to retire all of these approaches when Viewport Units were well supported in 2012! If CSS can do the job, do the job in CSS. Delete your redundant JavaScripts, everyone!
fridayfrontend  css  typography  viewport  units  responsive  webfonts 
may 2018 by spaceninja
Data Tables
Yes, it's still okay to use tables. Just don't use them if you don't need them and, when you do need them, structure them in a logical and expected way.
cssbasics  tables  data  accessibility  javascript  responsive  sorting  fridayfrontend 
april 2018 by spaceninja
Compressive Images Revisited
Compressive images give us a reduced file size, but it greatly increases the memory footprint. Thanks to the standards that have been developed around responsive images, it’s a trade-off we no longer need to make.
fridayfrontend  css  responsive  images  compression  retina  memory  performance 
april 2018 by spaceninja
`w` Descriptors & Sizes: Under the Hood
A detailed overview of how responsive images actually work in the browser, and why the `sizes` attribute affects the width of an image in ways you may not expect.
responsive  images  fridayfrontend  html  sizes 
march 2018 by spaceninja
Swapping Images with the Sizes Attribute
One thing that is interesting about sizes is that the browser trusts its description over the actual image's size in the page layout, which may not actually correspond at all. In other words, sizes allows you to lie about an image's layout size, and that turns out to be pretty powerful for dynamic image components like a magnifier tool.
fridayfrontend  css  responsive  images  sizes  zoom 
march 2018 by spaceninja
How to make responsiveness super simple with CSS Variables
By redefining variables instead of redeclaring styles, we’ve reduced our media query from four selectors down to one and from thirteen lines down to four.
fridayfrontend  css  variables  customproperties  mediaqueries  responsive 
march 2018 by spaceninja
Responsive Components: a Solution to the Container Queries Problem
Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond to their environment. And if you accept this larger framing, there are actually new web APIs that already let you achieve this.
fridayfrontend  css  javascript  containerqueries  responsive 
march 2018 by spaceninja
Viewports, or Why Responsive Design Works
Presentation by PPK on the nitty-gritty of media queries for viewports
viewport  mediaqueries  responsive  layout 
february 2018 by spaceninja
Full Width Containers in Limited Width Parents
how do we make a full-browser-width container when we're inside a limited-width parent?
layout  css  responsive  fluid  breakout 
february 2018 by spaceninja
Using Media Queries For Responsive Design In 2018
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
fridayfrontend  css  grids  cssgrid  flexbox  layout  mediaqueries  responsive  rwd 
february 2018 by spaceninja
Jackie Balzer - Schrödinger's Website
The website simultaneously exists and does not exist. In this talk, Jackie explains the paradox of building user-customizable responsive layouts for a website builder like Adobe Portfolio: how can a developer write the markup and styles for a website, and make it responsive, without first knowing what it will look like?
fridayfrontend  video  css  themes  customizable  responsive 
february 2018 by spaceninja
9 basic principles of responsive web design
Great animated gifs to illustrate the points here
css  rwd  responsive  design  layout  gifs 
january 2018 by spaceninja
Refreshing Search: Testing Search Box Variations
The most universally recognized icon for search isn’t a magnifying glass, it’s a wide rectangular box.
responsive  search  usability  ux 
january 2018 by spaceninja
Media Query Inspector
Use the Media Query Inspector to inspect and trigger the registered breakpoints on a page. In Device Mode, click the icon which looks like staggered bars in the upper left corner of the page, the MQI opens.
mediaqueries  devtools  chrome  responsive 
january 2018 by spaceninja
Making a difference with performance
* 47% of people expect a web page to load in 2 seconds or less.
* 40% will abandon a web page if it takes more than 3 seconds to load.
* 52% of online shoppers claim that quick page loads are important for their loyalty to a site.
* 14% will start shopping at a different site if page loads are slow, 23% will simply stop shopping.
* 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.
performance  speed  pagespeed  responsive  images  jquery  progressive  speedindex 
january 2018 by spaceninja
How to make your HTML responsive by adding a single line of CSS
In this article I’ll teach you how to use CSS Grid to create a super cool image grid which varies the amount of columns with the width of the screen.
fridayfrontend  css  grids  cssgrid  responsive 
december 2017 by spaceninja
Why you don’t need device specific breakpoints
With the ever growing number of different mobile, tablet, laptops, monitors, televisions, watches — and whatever else will communicate information to you visually — it’s finally time to put to rest those device specific breakpoints.
breakpoints  responsive  layout  mediaqueries  mobile 
december 2017 by spaceninja
Quick Tip: Never use maximum-scale=1.0
Why you never ever should use maximum-scale=1.0 in your viewport meta tag.
maximum-scale  viewport  meta  accessibility  mobile  ios  responsive 
december 2017 by spaceninja
Don’t use <picture> (most of the time)
For most responsive images, you shouldn’t use the <picture> element. You should use srcset and/or sizes.
css  html  responsive  images  picture  srcset  sizes 
december 2017 by spaceninja
A Responsive Accessible Table
After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt to break it down to give you enough information to make your own responsive, accessible table because my example will likely not fit your case precisely (or closely?).
fridayfrontend  html  tables  responsive  accessibility  javascript  css 
november 2017 by spaceninja
Web Typography: Designing Tables to be Read, Not Looked At
Tables are a frequently overlooked aspect of reading, sometimes overstyled, sometimes poorly thought out. Responsiveness is a particularly thorny issue as the best solutions depend very much on the utility of the table. Tables can be packed with data, rich in content and meaning. Give them the attention they deserve.
fridayfrontend  html  css  tables  design  responsive  typography 
november 2017 by spaceninja
Fundamentals of Responsive Images
In this article, I’ll be explaining some of the key concepts for responsive images, as well as providing an overview of a few different responsive image tactics. The solutions used for any particular image will vary. Understanding those options will help you to set out on the right path.
fridayfrontend  responsive  html  css  images  srcset  sizes 
october 2017 by spaceninja
`sizes` in Real Life with Eric Portis
etportis"In this talk we’ll develop an appreciation for both the paradoxical problem that `sizes` was designed to solve and its blunt, practical elegance as a solution. And we’ll explore a whole host of strategies for approaching, avoiding, and automating away the task of writing and maintaining this cornerstone of performant responsive image markup."
fridayfrontend  video  responsive  images  sizes  srcset 
october 2017 by spaceninja
Using viewport units to scale fixed layouts
There are plenty of ways to use viewport units, covered in many good articles. But the use cases are mostly limited to specific elements. In theory, you could use viewport units to scale the entire website layout relative to the viewport width. Of course, this does not work for most websites. But there are edge cases where you need a layout that is fixed, but also relative to the viewport width.
fridayfrontend  css  adaptive  responsive  fixed  viewport 
august 2017 by spaceninja
Importing CSS Breakpoints Into JavaScript
A quick and easy solution to this problem is to have your JS import the breakpoints directly from the CSS values in the DOM. This solution brings the current breakpoint variable into your JS in a way that's Simple & Lightweight, DRY, Compatible with all browsers that support media queries (IE9+)
css  breakpoints  javascript  responsive 
june 2017 by spaceninja
Responsive Images: Use Cases and Documented Code Snippets to Get You Started
The new <picture> element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.
responsive  images  rwd  example 
june 2017 by spaceninja
RespImageLint is a bookmarklet that checks images of a webpage against a list of common mistakes and best practises. Just run the bookmarklet and see if it detects any problems with your images.
responsive  images  tools  bookmarklets 
june 2017 by spaceninja
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`:
html  responsive  rwd  images  srcset  sizes  picture 
june 2017 by spaceninja
Emmet Re:view
A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.
responsive  design  testing  tools  extension  browsers  chrome 
june 2017 by spaceninja
Fun with Viewport Units
Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases.
fridayfrontend  css  viewport  units  responsive  layout 
june 2017 by spaceninja
NCC Image Checker - Chrome Web Store
Sending images that are too big can damage site speed. This tool scans a whole page to identify all images and highlights those that are sent at the wrong size.
browsers  extension  plugins  responsive  images  optimization  filesize 
may 2017 by spaceninja
Between the Lines
Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we'll use a technique called linear interpolation.
fridayfrontend  css  responsive  calc  viewport 
april 2017 by spaceninja
Building a CSS Grid Overlay
Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables.
fridayfrontend  css  grids  layout  overlay  responsive  variables 
april 2017 by spaceninja
A bit more on container queries. — Ethan Marcotte
Paul’s really done me a kindness, here: he’s touched upon a loose chink in my argument, and given me a chance to strengthen it a bit.
fridayfrontend  css  containerqueries  mediaqueries  rwd  responsive  fluid 
april 2017 by spaceninja
On container queries
Over the last few years, a number of web designers, web developers, and agencies have been asking for “container queries,” saying they’d be a welcome addition to a responsive designer’s toolkit.

I think they’re right. And I’d like to add my voice to theirs.
fridayfrontend  css  containerqueries  responsive  rwd 
march 2017 by spaceninja
Do responsive sites have to be so tall on mobile?
Height is often overlooked in responsive design. On mobile, pages can get pretty long. Should we address this?
fridayfrontend  css  responsive  height  layout  design 
february 2017 by spaceninja
Jonathan Snook on Responsive Web Apps With Container Queries
"How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year? With a focus on Container Queries, Jonathan will look at the approach the Shopify Admin team used to manage the intricate interactions between all the application’s components, and pull off a fully fluid responsive design in under a month."
fridayfrontend  video  mediaqueries  containerqueries  responsive  rwd 
january 2017 by spaceninja
Get the Balance Right: Responsive Display Text
"Richard Rutter shepherds a tea towel onto our collective heads and describes a technique for responsively scaling display text to maintain a consistent feel in both landscape and portrait screen orientations. That should put things back into proportion."
fridayfrontend  css  responsive  typography  viewport 
december 2016 by spaceninja
Responsive Images Are Here. Now What? by Jason Grigsby
"In this 60-minute presentation, captured live at An Event Apart Austin, Jason Grigsby shows us how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints."
fridayfrontend  video  responsive  rwd  images 
november 2016 by spaceninja
Keith J. Grant - Stop Thinking in Pixels - YouTube
"We tend to like working with pixels. They are predictable and easy to understand. But the real power of CSS is found in relative units: em and rem and vw/vh. Their exact meaning is determined with a “late binding” in the browser, where they change depending on their context. In this talk, we’ll unravel the mystery of relative units. I’ll show you how to build flexible designs with simpler code. I’ll cover how to make your design responsive without a single media query. And we’ll dive into one of CSS’s newest tricks: CSS Variables, which offer far more flexibility and control than the SASS/LESS variables you may be used to. Come learn how to stop thinking in pixels and embrace CSS’s late binding of styles."
fridayfrontend  video  pixels  relative  ems  flexible  responsive  variables  css 
november 2016 by spaceninja
« earlier      
per page:    204080120160

related tags

accessibility  adaptive  animation  apple  applewatch  aspectratio  automation  backgrounds  baseline  bem  bestpractices  boilerplate  bookmarklets  breakout  breakpoints  browsers  calc  carousel  cascade  centered  ch  checklist  chrome  clienthints  columns  compression  containerqueries  cropped  css  cssbasics  cssgrid  customizable  customproperties  data  design  device-width  devtools  elements  em  email  ems  errors  events  example  extension  featurequeries  filesize  first-child  fitvid  fixed  flexbox  flexible  fluid  frameworks  fridayfrontend  galleries  generator  gifs  gmail  gracefuldegredation  grids  guidelines  height  hints  howto  html  icons  ie  ie10  iframes  images  inclusive  initial-scale  intersection-observer  intrinsic  intuit  ios  javascript  jquery  justify  layout  lazyload  leading  library  line-height  liquid  locks  logos  masonry  matchmedia  math  max-width  maximum-scale  mediaqueries  memory  menus  meta  min  min-width  minmax  mix-width  mixins  mobile  mod  mode  modular  modulo  myths  namespacing  navigation  nth-child  object-fit  optimization  overflow  overlay  pagespeed  patterns  performance  photos  picture  pixels  placeholders  plugins  polyfills  prefixes  process  progressive  proportional  px  ratios  reference  relative  rem  resolutions  responsive  retina  rounding  rules  rwd  safari  sass  scale  scaling  search  seo  shorthand  shrink-to-fit  sizes  smacss  snap  social  sorting  speed  speedindex  srcset  suffixes  svg  tables  tabs  testing  themes  tips  tools  touch  transforms  transitions  tutorial  typography  ui  units  usability  utility  ux  variables  vh  video  viewport  vmax  vmin  vw  watch  watchOS  webfonts  width  window8  windows  windows8  wordpress  workflow  youtube  zoom 

Copy this bookmark: