recentpopularlog in

abberdab : rwd   99

« earlier  
How to make a chart of your users' window sizes · Mozilla Marketing Engineering & Operations
In preparation for the MDN redesign I examined our analytics to get an idea of how wide our users’ browser windows were. I wanted window widths, not screen sizes and I thought a chart would tell a more compelling story than a table.
googleanalytics  browsers  viewports  reports  charts  responsive-design  rwd 
july 2018 by abberdab
Responsive Image Breakpoints Generator by Cloudinary
Efficiently analyze each hi-res image and find the best dimensions for embedding as responsive images in your site
tools  image  breakpoints  dev  rwd 
november 2016 by abberdab
embedresponsively.com
A tool for generating responsive object embeds.
embeds  tools  youtube  vimeo  googlemaps  video  iframe  instagram  rwd 
september 2016 by abberdab
Responsive Web Design Examples — Responsive Web Design
Really nice examples of responsive design. Not your usual listicle. Also represents a current way of representing responsive design in all the various sundry devices it might appear.
rwd  rwd:inspiration  examples  inspiration  portfolio  demonstration 
august 2016 by abberdab
Flexbox Layouts with Susy by Michelle Barker on CodePen
"I like Susy, of all the grid solutions out there that we might choose while we wait for the glorious day where we have CSS Grid Layout support, I think Susy is one of the best options. Here is a useful article explaining how to use it in conjunction with flexbox."
flexbox  susy  css  layout  grids  rwd 
august 2016 by abberdab
Front-End Development in an Internet of Things World
The world wide web has continuously developed and morphed throughout its 27-year history. How we display and style content has gone through various phases throughout this time, the most recent of which was the emergence of a responsive web — one web that adapts to fit multiple browsers and device sizes. When it comes to a web with an ever growing number of “Internet of Things” (IoT) devices such as Raspberry Pis, smartwatches, personal assistants that work solely via voice, and so much more — the potential of the responsive web is going to be tested.

The IoT means even more varied devices out there in the wild that could potentially try to load content from the web. We need to ensure that the web remains as accessible and usable to those devices if we are to avoid another big segmentation like we had in the early battles between mobile and desktop. The last thing we want is one web designed for the IoT and one for the mobile and desktop web.
iot  front-end  device-agnostic  rwd  dev 
august 2016 by abberdab
The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine
For some time, we've run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS...
javascript  element-queries  polyfills  rwd  dev 
july 2016 by abberdab
The New Web Typography › Robin Rendle
We must prioritise the text over the font, or semantics over style.
We ought to use and/or make tools that reveal the consequences of typographic decisions.
We should acknowledge that web typography is only as strong as its weakest point.
typography  design  article  open  foot  fout  progressive-enhancement  rwd  www 
july 2016 by abberdab
Frank Chimero - The Web’s Grain
This site is an interpretation of my talk from Webstock, 2015. It is a companion to What Screens Want, a previous essay on designing natively for screens.
design  article  philosophy  rwd  www  dev 
july 2016 by abberdab
Responsive images: Smaller page sizes with the picture element and WebP – Mike Babb – Web Developer
At a recent Bristol Web Performance meetup Bruce Lawson gave a talk on responsive image techniques using the <picture> element he devised and had added to the HTML spec with help from some other clever people. I happened to be starting work on a project that’s particularly image-heavy for a client, so it seemed like a great opportunity to try out Bruce’s techniques and see what kind of bandwidth savings I could get.

The purpose and syntax of the <picture> element has been covered in a lot of detail elsewhere, so I’ll focus on my actual results here. Bruce talked about two ways to use the <picture> element to reduce page sizes and save bandwidth:

- Serving smaller image assets to devices with small screens, like smartphones, and
- Replacing JPG and PNG images with Google’s WebP format for browsers that support it
responsive-images  rwd 
july 2016 by abberdab
Use Cases For CSS Vertical Media Queries
Two weeks ago, Sara Soueidan tweeted about the love of CSS Vertical Media Queries, I’ve remembered that I used them in some projects and so I decided to write an article about them.

We all love media queries, don’t we? Without them our layouts won’t be responsive. Media queries that check for min-width and max-width are well-known and used a lot. In this article we will explore different use cases for using vertical media queries in CSS. So we will focus on min-height and max-height.
css  design  mediaqueries  vertical  navigation  landscape  rwd 
july 2016 by abberdab
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
Not long ago, I became interested in how we can replace the hamburger menu and wrote a post that was relatively well received. One of the alternatives that I researched and really liked is known as a progressively collapsing navigation.

If you're confused as to what a progressively collapsing navigation is, I previously summarised it as a navigation that utilises space, prioritises visible items and keeps the optimal ‘desktop’ view for as long as possible. But read that other post for more info.

All of the current applications of this type of navigation rely on JavaScript and like many other front-end developers, I am obsessed with cutting out JavaScript wherever possible. In this guide, I will show you how to create a progressively collapsing navigation with just HTML and CSS.
navigation  flexbox  css  collapsing  rwd 
july 2016 by abberdab
My process of creating the Arriva web site | Veerle's blog 3.0
"Just a while ago I wrote about a cool project I finished for a small start up company called Arriva. I shared the logo design process back then. Today I’ll talk about the design of the web site and I’ll share how I get started with my coding, how I prepare the different assets, which tools I use, and how I organise my files, my CSS (or better put SCSS) in particular."
designer-developer  process  tools  rwd  sass  css 
may 2016 by abberdab
» Breaking Out With Viewport Units and Calc Cloud Four Blog
An alternative, more streamlined CSS layout approach for combining full width images with constrained width text.
css  layout  rwd 
may 2016 by abberdab
Everything I know about responsive web typography with CSS — Zell Liew
Responsive typography is a tough nut to crack. This was the best method I could come up with when I first started creating responsive websites: p { font-size: 16px; } @media (min-width: 800px) { p {
typography  vertical-rhythm  articles  typography:vertical-rhythm  rwd 
january 2016 by abberdab
Create the perfect website layout system | Web design | Creative Bloq
Fantastic article about alternatives to media queries when building responsive sites. Nice!!!

"Thanks to media queries, we can create sites that work on any device. Without them the current web simply couldn't work. But there are other options as well. In certain situations, a different
viewports  css  viewport-units  rwd  fluid  layout 
january 2016 by abberdab
CSS Layout News - Issue 16
Responsive design, Susy Grid, SVG, Grid Alignment and much more.
css  layout  frameworks  susy  rwd  grid 
november 2015 by abberdab
Using Responsive Images (Now) · An A List Apart Article
Use responsive images now! Chen Hui Jing introduces us to the new selection types and shows us how we can make them work for us.
images  rwd 
october 2015 by abberdab
Responsive Aspect Ratios With Pure CSS
One of the hurdles I faced when beginning to work with responsive designs was the lack of an obvious way to assign an aspect ratio to a container in CSS. This kind of thing can be handled with an image placeholder or Javascript, but neither is an elegant solution. Fortunately, with a little bit of digging, an answer soon presented itself!
aspect  ratios  css  rwd 
september 2015 by abberdab
Making SVGs Responsive with CSS
An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive.
svg  css  rwd 
september 2015 by abberdab
Reflecting on the Revamped Sherpa - Web Standards Sherpa
Our Publisher Aaron turns the spotlight on the Sherpa site and walks through some of the choices we made for the mobile-first overhaul of this site.
mobile-first  ems  design  rwd  www  dev 
october 2014 by abberdab
Gridset · Responsive Report 2013
Earlier this year we sorted through hundreds of responses to Mark Boulton's The Business of Responsive Design Survey, defining themes, pulling data into pivot tables and drawing conclusions. We’re pleased to bring you the results of our labor:
View the Gridset Responsive Report 2013
In five digestible sections, the report looks at who responded, as well as covering challenges, feelings, trends and resources around responsive design. Our Research Director Emma Boulton has also written a blog post explaining the process behind creating the report.
rwd  reports  web:industry  2013 
september 2014 by abberdab
SCSS @extends Across Media Queries - CodePen
A nice paginated tutorial in Codepen to get @extend 'working' with Media Queries.
mediaqueries  rwd  dev  www  sass  css 
september 2014 by abberdab
Nature and the Artist - Van Gogh Museum
Beautiful, immersive "story" about how nature inspired Vincent Van Gogh.
inspiration  storytelling  rwd  dev  design  www 
august 2014 by abberdab
Responsive Newsletter Form
In an attempt to simplify sign-ups, this form was created.
css  html  js  forms  rwd  www 
august 2014 by abberdab
Mobile + Tablet Device Dimensions
Preview relative sizes of many mobile and tablet screens.
resources  crossbrowser  dev  rwd  www 
june 2013 by abberdab
Introducing Subscribe Pages - Campaign Monitor
Hot on the heels of the new Subscribe Button, today I'm happy to announce another simple tool that makes it easy to grow your audience with Campaign Monitor. As of today, every list in your account now has its very own Subscribe Page, a simple, customizable page that lets anyone join your list - no coding required.
mobile  email  forms  rwd 
june 2013 by abberdab
Pure
CSS with a minimal footprint.

Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
css  library  modules  prototyping  framework  rwd  dev  www 
june 2013 by abberdab
Details | Adaptive Images
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
image  php  rwd  dev  www 
march 2013 by abberdab
Browser Led Design | A talk by Dan Davies
There was an ongoing discussion at a conference I went to recently about designing in the browser and it was widely accepted that the term “designing in the browser” was confusing and incorrect, leading me to suggest “browser led design”.

It's essentially designing around a HTML base building up layers of design as we go through the process whether it be via CSS or Photoshop.
process  style-tiles  in-browser-design  rwd  dev  design  www 
march 2013 by abberdab
Default Perch Theme | Laura Kalbag
Laura Kalbag's process for designing the default Perch theme (responsive, style tiles!)
perch  style-tiles  rwd  cms  design  www 
march 2013 by abberdab
Compressive Images | Filament Group, Inc., Boston, MA
We also used the 220% sizing method for JPGs, as outlined by too:
images  retina-display  rwd 
january 2013 by abberdab
Building with Content Choreography by Jordan Moore — Web Designer & Front End Developer
The flexible box layout module allows us to do more interesting things than our current box model allows for producing layouts, including the ability to reorder elements.
css  flex-box  reordering  rwd  dev  design  www 
december 2012 by abberdab
Adactio: Journal—Conditional CSS
Just to recap, I was looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating my breakpoints. That bit is important: I’m not looking for MatchMedia, which involves making media queries in JavaScript. Instead I’m looking for some otherwise-useless CSS property that I can use to pass information to JavaScript.
css  javascript  mediaqueries  rwd 
december 2012 by abberdab
24 ways: Responsive Responsive Design
These sites were praised for their visual design and responsive nature, and rightfully so. They’re very easy on the eyes and a lot of thought went into their appearance. But the numbers above tell an inconvenient truth: for all the time spent ensuring the visual design was airtight, seemingly very little (if any) attention was given to their performance.

It would be one thing if these were the exceptions, but unfortunately they’re not. Guy Podjarny, who has done a lot of research around responsive performance, discovered that 86% of the responsive sites he tested were either the same size or larger on the small screen as they were on the desktop.
design  performance  rwd  dev  www 
december 2012 by abberdab
LukeW | RESS: Responsive Design + Server Side Components
There's no shortage of debate about the best way to develop Web sites that work well across many networked devices. Some teams favor a client-side approach while others lean towards server-side solutions. But I'm increasingly interested in solutions that try to bring together the best of both worlds. RESS (Responsive Web Design + Server Side Components) is one such proposal.
mobile  rwd  dev  design  www 
december 2012 by abberdab
Responsive Web Design Patterns | This Is Responsive
A collection of patterns and modules for responsive designs.
css  design  mobile  patterns  rwd  dev  www 
december 2012 by abberdab
« earlier      
per page:    204080120160

Copy this bookmark:





to read