recentpopularlog in

abberdab : responsive   15

Dropdown Breadcrumbs
Dropdown Breadcrumbs

A breadcrumb solution that exposes the last item for small screens and reveals the rest of the items in the trail when clicked. The entire trail is exposed when space becomes available.

Pros
Saves space by only exposing the last element in the breadcrumb trail.
Small screen users are still able to traverse the breadcrumb trail

Cons
Accordion-like control doesn't necessarily map nicely to breadcrumb interaction
JS dependancy - not necessarily a con, but worth keeping in mind that the Javascript dependency means more testing and consideration
navigation  patterns  breadcrumb  responsive 
june 2018 by abberdab
Precise control over responsive typography — Mike Riethmuller
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.
responsive  typography 
january 2018 by abberdab
A Responsive Accessible Table | Adrian Roselli
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?).
a11y  css  html  responsive  tables  accessibility 
november 2017 by abberdab
Rethinking web design
Browsers operate on an evergreen update model now, so features and bug fixes get shipped much faster than we’re used to with traditional software. So the range of browsers with varying features is extremely wide. This is part of parcel of web design, where we layer on different styles and looks based on feature support. This is part of the new normal I want to see.
web  design  responsive  feature-queries  crossbrowser 
august 2017 by abberdab
Your Site—Any Site—Should be a PWA | Aaron Gustafson
The other day, Frances Berriman—who coined the term “Progressive Web App”—wrote a bit about how she came up with that name. In it she clearly points out that the name has become a little problematic in dev circles:

"I keep seeing folks (developers) getting all smart-ass saying they should have been PW “Sites” not “Apps” but I just want to put on the record that it doesn’t matter. The name isn’t for you and worrying about it is distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer. It’s a way for you to keep making things on the open web, even those things that look really “app-y” and your company wants to actually make as a native app, 3 times over. They don’t want you to make websites anymore, but you still can if you’re sneaky, if you tell them it’s what they think they want."

As someone who is at once a practitioner, an educator, and a consultant on web projects, this can be tough to wrestle with. But like DHTML, Ajax, and HTML5 before, when viewed as a catch-all term for an approach to building stuff for the web it really shouldn’t matter that the word “app” is in there. Sure, it could have been “site” or “thang”, but when we—and I’m talking to the practitioners here—hear someone talking about PWAs, we need to take the broad view.
PWA  article  definition  terms  progressive-enhancement  web  development  responsive  design 
august 2017 by abberdab
Responsive web design tool, CMS, and hosting platform | Webflow
Design and develop at the same time
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
design  responsive  tools  gui  browser  cms 
july 2017 by abberdab
Fun with Viewport Units | CSS-Tricks
Best use cases and ideas for using viewport units, including typography ideas and more!
css  layout  responsive  typography  hero-images  footer  aspect-ratios  scrollbars  scrolling 
june 2017 by abberdab
Stephanie Liu
When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively. So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.
css  layout  video  responsive  design  development  methods  article  aspect  ratio  grid 
may 2017 by abberdab

Copy this bookmark:





to read