How to Design a Large Scale Responsive Site.
An article describing the process of designing one of the first complex responsive sites, a hotel booking engine for Macdonald Hotels. - https://goo.gl/n2By1F
#design #responsive
An article describing the process of designing one of the first complex responsive sites, a hotel booking engine for Macdonald Hotels. - https://goo.gl/n2By1F
#design #responsive
Uxbooth
How to Design a Large Scale Responsive Site | UX Booth
In 2011, Elaine McVicar wrote an article describing the process of designing one of the first complex responsive sites. Now that the concept is no longer in its infancy, we're taking another look at how to redesign a large scale responsive site.
Using Reduced Motion on the Web
WebKit now supports the prefers-reduced-motion media feature. Here, James Craig from the WebKit team runs through a few demos of how the feature is intended to work. - https://goo.gl/yjR8h4
#responsive #design #motion
WebKit now supports the prefers-reduced-motion media feature. Here, James Craig from the WebKit team runs through a few demos of how the feature is intended to work. - https://goo.gl/yjR8h4
#responsive #design #motion
WebKit
Responsive Design for Motion
Fundamentals of Responsive Images
A good explainer of the key concepts for responsive images, and an overview of a few different responsive image tactics. - https://goo.gl/4skwd5
#image #responsive
A good explainer of the key concepts for responsive images, and an overview of a few different responsive image tactics. - https://goo.gl/4skwd5
#image #responsive
Lullabot - Strategy, Design, Development
Fundamentals of Responsive Images
Picture this: images that look awesome and load fast. Learn how to size up responsive image solutions to choose what's right for your site.
Crossing Guards
A really great overview from Chris Burnell about the IntersectionObserver. Chris looks at how we (used) handle lazy-loading or infinite scrolling these days, covers off the potential pitfalls when it comes to 60FPS and performance and finishes with a rather tasty codepen demo - https://goo.gl/T3Jv2E
#responsive
A really great overview from Chris Burnell about the IntersectionObserver. Chris looks at how we (used) handle lazy-loading or infinite scrolling these days, covers off the potential pitfalls when it comes to 60FPS and performance and finishes with a rather tasty codepen demo - https://goo.gl/T3Jv2E
#responsive
Chrisburnell
Crossing Guards – Chris Burnell
Throttle back on your scroll events and watch out for the IntersectionObserver!
Common Responsive Layouts with CSS Grid (and some without!)
If you want to get started with CSS Grid then try and replicate some of these web layouts. Jo has already built them so there’s code for you to test out, but half the fun is working on your own solution. -
https://goo.gl/TzkiEy
#css #responsive
If you want to get started with CSS Grid then try and replicate some of these web layouts. Jo has already built them so there’s code for you to test out, but half the fun is working on your own solution. -
https://goo.gl/TzkiEy
#css #responsive
Medium
Common Responsive Layouts with CSS Grid (and some without!)
Example code for you to try out, change and make your own
The anatomy of responsive images
If you need something technical explained in a way that is super easy to understand then Jake Archibald is often the person to go to. The impressive thing for me is that he has used SVG to paint what you would usually assume to be an image with arrows. Nicely done Jake, nicely done. - https://goo.gl/kjwifL
#responsive #images
If you need something technical explained in a way that is super easy to understand then Jake Archibald is often the person to go to. The impressive thing for me is that he has used SVG to paint what you would usually assume to be an image with arrows. Nicely done Jake, nicely done. - https://goo.gl/kjwifL
#responsive #images
Jakearchibald
The anatomy of responsive images
Essential Image Optimization
This is a wonderfully comprehensive ebook from Addy Osmani. “In 2017, image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist.” - https://goo.gl/A5nLSg
#responsive #images
This is a wonderfully comprehensive ebook from Addy Osmani. “In 2017, image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist.” - https://goo.gl/A5nLSg
#responsive #images
images.guide
Essential Image Optimization
A free book on modern image optimization techniques. Formats, decoders, techniques for efficient compression and more are covered.
Using Media Queries For Responsive Design in 2018
Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future. - https://goo.gl/TgjjEu
#css #media #responsive
Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future. - https://goo.gl/TgjjEu
#css #media #responsive
Smashing Magazine
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.
Responsive Components: A Solution to the Container Queries Problem
Container queries would let us style elements based on the size of a containing element rather than the viewport, but they’re still not available - this post presents a viable alternative -
https://goo.gl/45sxzw
#css #responsive
Container queries would let us style elements based on the size of a containing element rather than the viewport, but they’re still not available - this post presents a viable alternative -
https://goo.gl/45sxzw
#css #responsive
Philipwalton
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
Thoughts on web development, open source, software architecture, and the future.
Dynamic Social Sharing Images
It’s been on my list of side projects to enable automatic screenshots for the Am I Responsive tool, I think this is something which I could adapt - http://amp.gs/V8uE
#image #responsive #tools
It’s been on my list of side projects to enable automatic screenshots for the Am I Responsive tool, I think this is something which I could adapt - http://amp.gs/V8uE
#image #responsive #tools
24ways.org
Dynamic Social Sharing Images
Drew McLellan draws this, our fourteenth season to a gentle close by getting a little Inside Snowball and gives an account of how we put the robots to work in generating custom dynamic social media sharing images for each of the articles here on the site.…
Planning for Responsive Images
Adjusting the width simply doesn’t cut it when it comes to handling responsive images. - http://amp.gs/RTIb
#responsive #image
Adjusting the width simply doesn’t cut it when it comes to handling responsive images. - http://amp.gs/RTIb
#responsive #image
CSS-Tricks
Planning for Responsive Images | CSS-Tricks
The first time I made an image responsive, it was as simple as coding these four lines: img { max-width: 100%; height auto; /* default */ } Though that
Responsive Images: A Reference Guide from A to Z
A comprehensive guide for implementing responsive images correctly. - http://amp.gs/oLgC
#responsive #images
A comprehensive guide for implementing responsive images correctly. - http://amp.gs/oLgC
#responsive #images