recentpopularlog in

garrettc : webdesign   1173

« earlier  
Historical Browser Bugs
"A complete list and demonstrations of more than 1000 browser bugs, plus a bug table, Netscape bugs, CSS and HTML guides and much much more"
browser  bugs  compatibility  css  html  webdevelopment  webdesign  history 
4 days ago by garrettc
The Click-Away Pound Survey 2019 - Home Page
Click-Away Pound is a research survey designed to explore the online shopping experience of people with disabilities and examine the cost to business of ignoring disabled shoppers.
accessibility  webdevelopment  webdesign  society  inclusivity  retail  business 
9 days ago by garrettc
CO2 emissions on the web
"I’ve spent the last month trying to reduce the carbon footprint of the websites I have (some) control over. When talking about this with other people they often look at me blankly before asking “aren’t you taking this a little too far?”."
webdevelopment  webdesign  environment  carbon  society 
11 days ago by garrettc
The CSS Cascade
"We style our websites using CSS, which stands for Cascading Style Sheets, but what does Cascading really mean? To save ourselves from future angst, let’s take a step back and learn this thing for real."
browser  css  webdesign  webdevelopment 
20 days ago by garrettc
Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]
"Let’s make 2020... fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today."
checklist  performance  programming  webdevelopment  webdesign  accessibility 
6 weeks ago by garrettc
Scaling SVG Elements
Interactive demo of how viewbox works.
css  webdesign  webdevelopment  svg  demo  interactive 
12 weeks ago by garrettc
Uncommon Use Cases For Pseudo Elements
"Pseudo-elements are in use for a long time. However, there are some uses cases that I feel they are not entirely known across developers."
css  webdesign  webdevelopment 
november 2019 by garrettc
Spacing, Grids and Layouts
Learn how to define baseline grids, column grids, spacing and layouts.
css  grid  layout  webdesign  bestpractice 
october 2019 by garrettc
Where to put buttons on forms
Button placement can make or break a form. Find out the best place to put them in this article.
webdesign  webdevelopment  userexperience  forms  bestpractice 
october 2019 by garrettc
Type Terms
The animated typographic cheat sheet.
css  design  font  typography  webdesign  reference 
september 2019 by garrettc
Even more about how Flexbox works — explained in big, colorful, animated gifs
"Even more about how Flexbox works — explained in big, colorful, animated gifs"
css  webdesign  webdevelopment  flexbox  layout 
september 2019 by garrettc
Magic Numbers in CSS
"Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for "unnamed numerical constant". As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for. CSS is loaded with unnamed numerical constants, but they are usually paired with properties and in the context of a selector so there is little mystery. There are magic numbers in CSS though, and they are still bad."
css  webdesign  webdevelopment  bestpractice 
september 2019 by garrettc
Form design: from zero to hero all in one blog post
"90% of the problems found in forms solved in a few hundred precious words."
webdesign  webdevelopment  forms  userexperience  bestpractice 
august 2019 by garrettc
Useful Pens for Everyday Front End Development
"This collection is a way of bookmarking some techniques that will be useful in practice in everyday dev."
css  html  javascript  webdesign  webdevelopment 
august 2019 by garrettc
Inspired Design Decisions: Ernest Journal
"In this third instalment of Inspired Design Decisions, Andy Clarke will teach you how to use frameworks to create layouts as engaging as in the well-known Ernest Journal. All it takes is an understanding of layout design and imagination."
webdesign  webdevelopment  inspiration  grid  layout  css 
august 2019 by garrettc
CSS Filters
A little playground for CSS filters....
css  webdesign  webdevelopment  filters  tool 
august 2019 by garrettc
Storybook: UI component explorer for frontend developers
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
javascript  react  webdevelopment  vuejs  html  css  designsystems  designpatterns  component  webdesign 
august 2019 by garrettc
Everything You Need To Know About Alignment In Flexbox
"In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works."
css  flexbox  layout  webdesign  webdevelopment 
august 2019 by garrettc
Gradient Magic
A gallery of fantastic and unique CSS Gradients.
background  css  gradient  webdesign  generator 
august 2019 by garrettc
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!"
css  grid  layout  responsivedesign  webdesign  webdevelopment 
july 2019 by garrettc
HTML & CSS Is Hard
A free web development tutorial for complete beginners
html  css  tutorial  education  learning  webdevelopment  webdesign 
july 2019 by garrettc
Inspired Design Decisions: Pressing Matters
In this second installment of Inspired Design Decisions, Andy Clarke will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. This article will change the way you think about designing with grids.
grid  css  design  webdesign  layout 
july 2019 by garrettc
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."
css  tutorial  bestpractice  grid  webdesign  webdevelopment 
july 2019 by garrettc
Better Search UX Through Microcopy — Smashing Magazine
For large-scale and e-commerce sites, the search experience is an increasingly critical tool. You can vastly improve the experience for users with thoughtful microcopy and the right contextualization.
webdevelopment  webdesign  search  userexperience  microcopy  copywriting  contentstrategy  contentdesign 
july 2019 by garrettc
Organising around outcomes
In the pre-internet era, technology projects were defined up-front with a huge specification document, a formal business case and maybe a Prince 2 Project Initiation Document. In the internet era, technology projects got smaller as teams were able to release more regularly and deliver iterative value, and governance got lighter. Today, a team is more…
webdevelopment  webdesign  appdevelopment  userexperience  usercentereddesign  userjourney  business 
july 2019 by garrettc
Baseline Grid
Baseline Grid To celebrate the 100th anniversary of the German design school Bauhaus, we published a story at The New York Times featuring some of its buildings outside Europe. Designed by Rebecca Lieberman, Eden Weingart and I, it featured a small detail for the design-history aficionados: a baseline grid. Baseline grids are horizontal lines evenly spaced where text should align to. Aligning type based on its bottom, or baseline, was a common practice in movable type. Its founding publication, the Gutenber
typography  css  grid  webdesign  webdevelopment  layout 
july 2019 by garrettc
Inspired Design Decisions: Avaunt Magazine
This is the first edition of Inspired Design Decisions in which Andy Clarke explains how to design and implement skinny columns using meaningful markup and efficient CSS.
css  webdesign  webdevelopment  layout  magazine  inspiration 
june 2019 by garrettc
Indicating focus to improve accessibility
"Focus indicators make the difference between day and night for people who rely on them. Focus is something that happens between the interactive elements on a page."
keyboard  accessibility  userexperience  usability  css  webdesign  webdevelopment 
june 2019 by garrettc
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.
webdevelopment  webdesign  css  programming 
june 2019 by garrettc
Wrapping long words with CSS or HTML
How to manage long words when they do not fit to the screen or within a narrow container.
css  guide  typography  webdesign  layout 
june 2019 by garrettc
Using the Grid Shepherd Technique to Order Data with CSS
"When dealing with data, programmers often don't know if it is correctly filtered or sorted. This is especially painful when iterating over an array then displaying the data on a site without knowing the locations of each element receiving it. The Grid Shepherd is a technique that helps position and sort items where you want them to be, using CSS Grid instead of JavaScript."
grid  css  accessibility  webdesign  webdevelopment  data 
june 2019 by garrettc
4 reasons your z-index isn’t working (and how to fix it)
"Z-index is a CSS property that allows you to position elements in layers on top of one another. It’s super useful, and honestly a very important tool to know how to use in CSS. Unfortunately, z-index is one of those properties that doesn’t always behave in an intuitive way."
webdesign  webdevelopment  css  layout 
june 2019 by garrettc
SVG symbol viewer
An online, no-upload drag-and-drop SVG file symbol extractor and viewer.
webdevelopment  webdesign  svg  images  graphics  tool 
june 2019 by garrettc
CSS Grid Generator
"This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid."
css  generator  grid  webdesign  webdevelopment 
may 2019 by garrettc
The Difference Between Explicit and Implicit Grids
"Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.

This is all handled by the so called explicit and implicit grid."
css  grid  layout  webdesign  webdevelopment 
may 2019 by garrettc
Accessible Icon Buttons
"There is a handful of ways that an icon button can be implemented accessibly. This article is an overview of them all."
accessibility  svg  icon  webdesign  webdevelopment 
may 2019 by garrettc
The Dark Side of the Grid (Part 2)
CSS Grid Layout is one of the most exciting new CSS specifications but it also creates new dangers regarding accessibility and UX.
accessibility  css  grid  webdesign  webdevelopment 
may 2019 by garrettc
Part 2: What the Fr(action)?
"In the second part of the Debugging CSS Grid series, we’ll take a look at fr (or fraction) units. Fr units are very useful for sizing grid tracks, and vastly simplify the process of building responsive layouts. But there are one or two unexpected behaviours you may run into if you don’t understand how they work. This article will aim to demystify these."
css  webdesign  webdevelopment  grid  layout 
may 2019 by garrettc
How to Create Joined Bulletpoint Lists with CSS, BBC News-style
"BBC News has a neat HTML list effect that I've reverse engineered and share here."
bbc  css  webdesign  timeline 
may 2019 by garrettc
New in Firefox 66: animating CSS Grid
"One feature that has recently landed is the animation of CSS Grid."
browser  mozilla  firefox  grid  css  webdevelopment  webdesign  animation 
may 2019 by garrettc
Why Don't We Just Use Material Design? | Webdesigner Depot
'The question posed in that meeting (Why don’t we just use Material Design?) reverses the design process in a way that epitomizes the problem with any design system. The question that should have been asked was: “Would employing Material Design solve some, or all, of our problems?”'
analysis  design  opinion  webdesign  google  designsystems  designpatterns 
may 2019 by garrettc
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
"Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation.

You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring to as we go."
css  navigation  webdesign  webdevelopment  userinterface  svg  grid 
may 2019 by garrettc
Color Designer
"Generate easily a color palette for your project. The tool will also generate for you tints and shades. You can easily control how many colors you want to generate."
design  webdesign  colour  generator  tool 
may 2019 by garrettc
Part 1: Understanding implicit tracks
"When observing people getting to grips with CSS Grid, I’ve noticed a few issues that catch people out more often than others, or present more of a challenge when it comes to building a layout. This short series of articles will delve into these common problems and aim to provide a better understanding of Grid so that you can anticipate layout problems, and debug them more easily when they occur."
css  webdesign  webdevelopment  grid  layout 
april 2019 by garrettc
Creating an aspect ratio CSS utility
"Until we get a native aspect ratio unit in the browser: achieving a controlled height based on a container’s width might seem difficult in a responsive design at first glance. It is actually pretty darn trivial, thanks to good ol’ padding and a touch of positioning magic (read: hacking)."
css  webdesign  webdevelopment  ratio 
april 2019 by garrettc
Fading out siblings on hover in CSS
This is a nifty technique using :hover and pointer-events to fade out sibling elements of a hovered element.
animation  css  userinterface  webdesign  webdevelopment 
april 2019 by garrettc
MDN Web Docs Glossary
Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.
webdevelopment  webdesign  glossary  reference 
april 2019 by garrettc
Diagonal Containers in CSS
In this tutorial, we'll take a look at how to create full-width, diagonal sections in CSS using the clip-path property.
css  webdesign  inspiration  webdevelopment 
april 2019 by garrettc
Art Direction For The Web Using CSS Shapes
"Andy Clarke expands on the topic of 'Art Direction for the Web' with CSS Shapes to create exciting and inspired new design ideas."
webdesign  css  inspiration  webdevelopment  shapes 
april 2019 by garrettc
Exclusive: Experience the Best Dinosaur Fossil of Its Kind in 3-D
In this lifelike interactive, come face-to-face with the remarkable armor and soft tissue of a 110-million-year-old nodosaur.
3D  inspiration  webdesign  history  science  dinosaurs 
april 2019 by garrettc
How To Align Things In CSS
"It can be quite a challenge to align things with CSS. Rachel Andrew takes a look."
css  grid  layout  flexbox  webdesign  webdevelopment 
april 2019 by garrettc
Color accessibility: tools and resources to help you design inclusive products, by Stéphanie Walter - UX designer & Mobile Expert.
All the tools, tips and resources your need to build and check the color accessibility and color constrast of digital products!
webdevelopment  webdesign  css  javascript  userexperience  reference  colour  contrast  design  resource 
april 2019 by garrettc
Water.css
"Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer."
css  html  template  responsive  webdesign  webdevelopment 
april 2019 by garrettc
Flexulator
"If you are trying to work out how much space is being distributed by flexbox this tool may help. It also nicely demonstrates the fact that flexbox is about distributing space, rather than making fixed or percentage width layouts."
css  layout  flexbox  tool  webdesign  webdevelopment 
april 2019 by garrettc
RTL Bugs
Clever use of RTL to make your day more annoying
webdevelopment  webdesign  bugs  rtl 
april 2019 by garrettc
Blurred Borders in CSS
"Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery."
css  webdesign  webdevelopment  border 
march 2019 by garrettc
Sophisticated Partitioning with CSS Grid
Create compelling grid patterns by harnessing specificity.
css  grid  layout  inspiration  webdesign  webdevelopment  music  posters 
march 2019 by garrettc
Stacked "Borders" | CSS-Tricks
"A little while back, I was in the process of adding focus styles to An Event Apart’s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and footer and orange rings in the main text. But in one place, I wanted rings that were more obvious—something like stacking two borders on top of each other, in order to create unusual shapes that would catch the eye."
css  webdesign  webdevelopment  borders 
march 2019 by garrettc
CSS Grid: Floor Plan
Impresseive use of Grid to generate a floor plan.
css  grid  inspiration  webdevelopment  webdesign 
march 2019 by garrettc
Why Hover Menus Do Users More Harm Than Good
"Do you know how your hover menu is affecting users? Hover menus are a popular way to navigate. But the way they open can cause usability problems that most designers aren’t aware of. Before you settle on hover menus for your navigation, you should know how they affect users."
navigation  userexperience  webdevelopment  webdesign 
march 2019 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read