leereamsnyder + webdesign   2857

How the Sausage Gets Made: The Hidden Work of Content · An A List Apart Article
‘Unless you’re working with a pristine data source, there often is no “content hose” or “automagical” tool that cleans up data and moves it from one app or content management system to another.’
cms  contentstrategy  content  webdesign  collaboration 
yesterday by leereamsnyder
Performance Calendar » Evolution of <img>: Gif without the GIF
The latest Safari can use <img src="*.mp4" />, leading to gigantic size and processing savings

Article includes code for handling fallbacks so you can use it ASAP
html  performance  webdesign  browsers  gifs  movies 
9 days ago by leereamsnyder
Font-display playground
“For example, if you're rendering the main body text on a site, you should use font-display:optional. On browsers that implement it, like Chrome, the experience will be much nicer: your users will get fast content, and if the web font download takes too long, they won't get a page relayout halfway through reading your article.

If you're using a web font for icons, there is no acceptable fallback font you can render these icons in (unless you're using emoji or something), so your only option is to completely block until the font is ready, with font-display:block.”
performance  fonts  webdesign  browsers 
14 days ago by leereamsnyder
The Best Request Is No Request, Revisited · An A List Apart Article
With HTTP/2, your priority needs to be to reduce total data sent on the wire, not necessarily reduce the number of resources
performance  webdesign  webdev  http 
15 days ago by leereamsnyder
Over-engineering is under-engineering – Baldur Bjarnason
“You need to make the form look a certain way and to do that while also keeping the widget accessible requires an enormous amount of, well, engineering.
It’s also an issue for website performance. Most websites are much too slow which means, given that dropping features is untenable from a business perspective, they are by definition under-engineered.”
programming  webdesign 
15 days ago by leereamsnyder
Rik Schennink on Twitter: "@heydonworks I put this in <head> and normal <img> tags in <body>. - No image requests visible in Firefox dev tools - Safari shows requests but 0 bytes t… https://t.co/1AhuUiwhSH"
Use a MutationObserver and you can mostly still use <img src="" alt=""> and leave images accessible for no-script situations, but still change src to data-src for lazy loading
browsers  webdesign  performance  images  javascript  html 
16 days ago by leereamsnyder
A Content Slider
“Carousels (or 'content sliders') are like men. They are not literally all bad — some are even helpful and considerate. But I don't trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don't have the choice. Hence this article.”
webdesign  accessibility  javascript  css  ux 
16 days ago by leereamsnyder
Collapsible Sections
This goes into making baby Web Components, which is pretty awesome
accessibility  javascript  css  webdesign 
16 days ago by leereamsnyder
Network based image loading using the Network Information API in Service Worker | justmarkup
“The Network Information API and especially effectiveType is great to deliver content based on network connection.

Although the API isn’t widely supported at the moment we can still use it to improve the loading experience for some users; Progressive enhancement is never a bad thing.”
webdesign  javascript  images  performance  mobile 
16 days ago by leereamsnyder
How to use SVG as a Placeholder, and Other Image Loading Techniques
Some good ideas are tracing SVG outlines as a placeholder, or using the Primitive library to make a representation out of simple shapes
webdesign  performance  images  svg 
22 days ago by leereamsnyder
Faux Grid Tracks · An A List Apart Article
How to place extra elements around a grid to reveal tracks or backgrounds
webdesign  grid  css  layout 
22 days ago by leereamsnyder
Short note on improving usability of scrollable regions | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
tabindex=0, role=region, and aria-label on the container

better: aria-labelledby with a reference to something in the container. header? table caption?
accessibility  webdesign  html 
23 days ago by leereamsnyder
Animista - CSS animations on demand
Great examples, with code you can adjust and copy/paste
css  animation  webdesign  tools  webtools 
24 days ago by leereamsnyder
The Anti-hero of CSS Layout - "display:table" | Colin Toh
It has broad support, works fairly well, and solves a bunch of layout issues. It's no grid or flex, but it's a solid fallback
css  html  layout  webdesign  browsers 
27 days ago by leereamsnyder
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
Mostly you can use older methods and grid will override them, as specified. (Smart!)
webdesign  layout  css  browsers  grid 
27 days ago by leereamsnyder
Don’t Use ARIA Menu Roles for Site Nav | Adrian Roselli
Menu roles are for OS-like application menus, not basic web navigation
a11y  accessibility  webdesign  navigation 
4 weeks ago by leereamsnyder
Grid areas and element that occupies them aren't necessarily the same size. | CSS-Tricks
I ran into similar issues with flex box

"Perhaps the most interesting limitation is that you can't target the grid area itself. If you want to take advantage of alignment, for example, you're giving up the promise of filling the entire grid area."
css  grid  layout  webdesign 
4 weeks ago by leereamsnyder
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
Reduce contrast for the image, then boost it back up client-side with filters. Not bad.
css  images  webdesign  performance 
5 weeks ago by leereamsnyder
Focusingly – Better focus styling
yeah but per CSS Tricks:

"outline color inherits from the color, which yields the same result."
css  javascript  accessibility  webdesign 
5 weeks ago by leereamsnyder
Web Design Museum
“The museum exhibits over 800 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.”
webdesign  history  design  inspiration  web 
6 weeks ago by leereamsnyder
Web Form Conundrum: disabled or readonly? | Aaron Gustafson
“TL;DR: If you really need it, which you probably don’t, readonly is what you want.”
forms  webdesign  javascript  usability  security 
6 weeks ago by leereamsnyder
Netflix functions without client-side React, and it's a good thing - JakeArchibald.com
“Netflix has shown you could start with React on the server, then activate the client side parts if you need them, when you need them, and where you need them.”
webdesign  html  performance  javascript  react 
6 weeks ago by leereamsnyder
Transpiled for-of Loops are Bad for the Client - daverupert.com
“I am responsible for the code that goes into the machine, I do not want to shirk the responsibility of what comes out. Blind faith in tools to fix our problems is a risky choice. Maybe “risky” is the wrong word, but it certainly seems that we move the cost of our compromises to the client and we, speaking from personal experience, rarely inspect the results.”
javascript  browsers  programming  webdesign 
6 weeks ago by leereamsnyder
Breaking down CSS Box Shadow vs. Drop Shadow | CSS-Tricks
If you have a non-box shape and can live with worse (still decent) browser support, filter: drop-shadow() is your friend
css  webdesign 
7 weeks ago by leereamsnyder
Alt-texts: The Ultimate Guide - Axess Lab
Some tidbits I didn't think about:

- alt="" in feeds/links/buttons with repetitive images
- end it with a period for a little pause for the screen reader
- do not include "image of" or whatever
- keep it short!
accessibility  html  webdesign  images  a11y 
8 weeks ago by leereamsnyder
Image Effects with CSS
Pencil drawing, watercolors, "hallucination", etc
css  effects  images  webdesign 
8 weeks ago by leereamsnyder
Web Typography: Numerals · An A List Apart Article
touches on sub/superscripts, old-style numbers and CSS font properties to enable them properly
css  webdesign  typography 
8 weeks ago by leereamsnyder
The Era of Newshammer - daverupert.com
I like the use of CSS variables for instant "themes"
css  webdesign 
8 weeks ago by leereamsnyder
Tabbed Interfaces
+ Don't provide tabbed interfaces unless they are suited to the use case and are likely to be understood and appreciated by the user. Just because you can doesn't mean you should.
+ Tables of content and same-page links are a simpler and more robust approach to many of the ostensible use cases for tabbed interfaces.
+ Make sure interfaces that appear as tabbed interfaces have the semantics and behaviors expected of them.
+ Single-page applications should not present or behave as tabbed interfaces, despite their shared use of JavaScript to switch between and/or populate content panes.
a11y  accessibility  css  javascript  ux  webdesign 
9 weeks ago by leereamsnyder
Amber Wilson - When Should You Use Which Image Format? JPG? PNG? SVG?
“PNG-8 limits you to 256 colours, which is enough most of the time, has by far the smallest file size, but may exhibit “banding” of colours. If you need more colours or want to avoid banding, consider PNG 24 or 32, but be aware of huge increases in file size. JPGs can contain millions of colours and have much smaller file sizes, but are best for photos where there are no crisp lines or text. For pictures with crisp lines or text (e.g. a graph), stick with PNG and compromise on the number of colours you use. Replace PNG with SVG for simple line drawings, logos and icons.”
images  webdesign  performance 
10 weeks ago by leereamsnyder
Web truths: CSS is not real programming | Christian Heilmann
“If you don’t consider an interface as an agreement with your users with various levels of fidelity depending on their technical platform, CSS isn’t for you. It is by design a forgiving language, that doesn’t throw any errors when something can’t get applied. Thus it is amazing for progressive enhancement. You don’t even need to worry about adding a line of unsupported code as the parser skips what it can’t apply. What causes a JavaScript parser to throw in the towel and give you an error message, the CSS parser shrugs off and moves on. That can feel odd for a developer – I for one like to know when something went wrong. But it frees you from needing to test on all possible user agents and put “if” statements around everything. Want to use a gradient on button? Define a background color, then override it with a gradient in the next line. If the user agent can’t render gradients, you get a simpler, but still working button. And you didn’t need to worry about gradient support at all.”
css  webdesign  javascript  programming 
12 weeks ago by leereamsnyder
Deploying ES2015+ Code in Production Today — Philip Walton
To put that another way, every browser that supports <script type="module"> also supports most of the ES2015+ features you know and love.

(babel-preset-env makes this particularly easy)
performance  javascript  browsers  webdesign 
september 2017 by leereamsnyder
Breaking the Grid - daverupert.com
Includes "clearfix 2.0" to make grids less likely to do this
css  webdesign  browsers  layout  grid 
september 2017 by leereamsnyder
For the love of God, please tell me what your company does
“So for the big companies, I truly believe these confusing websites, these websites that avoid at all costs telling you what the company actually does, are a deliberate tactic. Not to get leads, because I’m sure they realize they’ll lose a few in their artistic mess of a homepage. But to turn the leads they’d get anyway into overpaying customers.”
rants  webdesign  trends  internet  design  writing 
september 2017 by leereamsnyder
Interesting view library from the eBay folks
nodejs  templates  webdesign  javascript 
august 2017 by leereamsnyder
Things you could be doing instead of designing
“The reality is there are thousands of other worthwhile tasks designers and developers could be tackling to make more successful products.”
work  performance  webdesign  programming  accessibility  design 
august 2017 by leereamsnyder
Seems like a worthy follow-up to Tether
javascript  tooltip  webdesign 
august 2017 by leereamsnyder
Scotch Egg Navigation - Andy Beaumont
“Scotch Egg Navigation, it’s breadcrumbs with hidden meat.”

this is pretty much identical to the breadcrumbs solution I came up with at IBM
navigation  patterns  webdesign 
august 2017 by leereamsnyder
Best Practices for Homepage Links on websites
Include an explicit link home _once_ (either in the nav or breadcrumbs)
design  navigation  webdesign  usability 
august 2017 by leereamsnyder
Font style matcher
Helps you line up a webfoot with a system font so the transition isn't so jarring
css  fonts  webdesign  webtools  typography 
august 2017 by leereamsnyder
Intersection Observer comes to Firefox ★ Mozilla Hacks – the Web developer blog
This is a _much_ nicer way to determine if an element is visible in the viewport (or relative to any other element)
javascript  performance  browsers  webdesign 
august 2017 by leereamsnyder
If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks
"optional" gives 100ms to load a font, and if it's not there, you don't see it. it'll load the font and probably be in the cache next time, though.

"fallback" shows a fallback after 100ms, and gives ~3s for the font to load (so you don't get a big reflow after being on the page for 30 seconds)
css  performance  webdesign  usability  fonts 
august 2017 by leereamsnyder
Creation and consumption — Benedict Evans
“A small proportion of people might temporarily go from can to can’t, but vastly more go from can’t to can.”
webdesign  computers  usability  mobile  trends  accessibility 
july 2017 by leereamsnyder
« earlier      
per page:    204080120160

related tags

3d  a11y  accessibility  adblock  addons  adobe  advertising  advice  ajax  ala  amazon  analytics  android  angular  animation  apache  api  app  apple  applications  apps  architecture  archive  argument  art  audio  automation  backgrounds  backups  bandwidth  base64  bbedit  blog  blogs  book  bookmarklets  books  bootstrap  bower  branding  browsers  brushes  bullshit  business  buttons  caching  calendar  calibration  canvas  career  cartography  categories  cheatsheet  children  chrome  clever  clients  cloud  cms  coda  code  codeigniter  collaboration  color  comics  commandline  comments  communication  community  comparison  compass  compression  computer  computers  configuration  consoles  consulting  content  contentstrategy  contracts  contrast  controversy  conversation  converter  copyright  copywriting  craft  creativecommons  creativity  criticism  cryptography  css  css-tricks  css3  cufon  culture  data  databases  delicious  demonstration  deployment  design  designinspiration  development  dita  docker  documentation  dojo  domains  download  downloads  drama  dropbox  ecommerce  editing  education  ee  eecms  effects  efficiency  email  empathy  engineering  errors  ethics  excel  expressionengine  extensions  eyetracking  facebook  faq  favicon  filters  firefox  fireworks  flash  flickr  fonts  formatting  forms  forums  fra  frames  framework  free  freelance  freeware  fun  funny  future  gadgets  gallery  games  generator  gestalt  gif  gifs  git  github  givethanksforyourblog  gmail  google  googlereader  government  graphics  grid  grunt  guide  gulp  hacks  hardware  history  hosting  howto  html  html5  http  humor  ia  icons  ie  ie6  ie7  ie8  ie9  ie10  illustrations  illustrator  image  images  indesign  infoporn  inspiration  install  interesting  internet  interviews  invoice  ios  ios6  ipad  iphone  iphone4  iphone5  ipod  japan  javascript  jobs  journalism  jquery  json  keynote  language  languages  lastFM  law  layout  legal  less  libraries  life  lightbox  linked-data  linux  lion  list  loading  logic  logo  logos  mac  magazine  maintenance  management  mapping  maps  markdown  marketing  math  media  mediacenter  mediaqueries  menu  metadata  microformats  microsoft  mini  mobile  modernizr  modules  modx  money  monitoring  mootools  motivation  movies  mp3  mq  music  mysql  my_cmsicorn  navigation  networking  news  newsletter  newspapers  nodejs  noise  oldschool  omnigraffle  opensource  opera  opinions  organization  osx  outsourcing  password  patterns  pdf  perception  performance  phone  photography  photos  photoshop  php  pixels  plainenglish  plugins  poetry  politics  polyfills  portfolio  postcss  presentations  print  privacy  process  productivity  programming  progress  prototypes  proximity  psychology  ptdproject  publishing  python  quicksilver  ranking  rants  rdfa  react  reading  redux  reference  regex  regexp  research  resets  resources  rest  retina  reviews  rss  ruby  rubyonrails  rwd  s3  safari  sales  samples  sanity  sass  screencasts  screenreaders  scripts  search  security  self-publishing  semantics  seo  servers  services  sharing  shopping  sifr  silverlight  sitepoint  slate  slideshow  snark  social  socialnetworking  software  sourcecontrol  space  speaking  specifications  spreadsheet  statamic  statistics  stock  storage  stories  strategy  structure  style  styleguide  svg  symbols  syndication  tables  tags  teaching  teamwork  technology  templates  terminology  testing  text  TextExpander  textpattern  textures  themes  thinking  time  timelines  tips  toblog  todo  tools  tooltip  toread  tostudy  totry  touch  tours  training  translation  travel  trends  trivia  troubleshooting  truncation  tutorials  twitter  typekit  typography  ui  URLs  usability  utilities  ux  validation  vector  versioning  via:popular  video  videogames  virtualmachines  visualization  vm  WAI-ARIA  wallpaper  web  webapps  webdesign  webdev  webhosting  webkit  webmaster  webpack  webtools  widgets  windows  wireframes  wmm  wordpress  work  writing  xhtml  xml  yahoo  yepnope  youtube  yuck  z-index  zepto 

Copy this bookmark: