dirtystylus + webdesign   641

Semantic sidenotes for the web | Koos Looijesteijn
As a nice side effect, on large screens, where the sidenote appears next to the body text, both asterisks get hover styling when one either the content or the inline span has the mouse cursor over it. ) to keep the required JavaScript simple.

Then there’s the inline phrase that gets the asterisk, or let’s call it a label. I’m using the <label> tag after all. That idea came from Roman Komarov who
html  editorialdesign  webdesign  css  accessibility 
8 days ago by dirtystylus
Fit on a Floppy
1.44mb Floppy Disk capacity

Websites are getting bigger and bigger. The internet is getting faster and faster but not everywhere at the same pace. A floppy is a physical reminder of filesize.
webdesign  performance  webperf  via:beep 
18 days ago by dirtystylus
The Aesthetic-Accessibility Paradox

Don't read this if the ableism in it will upset you. Do read this if you want to understand how pervasive ableism is in web design. This is just one person who spent a lot of words to be wrong, but their beliefs are common. https://uxmovement.com/thinking/the-aesthetic-accessibility-paradox/#comment-92641

There is no aesthetic-accessibility paradox. Accessibility is important; aesthetic isn't. No one is making accessibility the enemy of beauty. People who make this argument are first crafting a sword, then falling on it and claiming they have been stabbed.
accessibility  design  ux  webdesign 
18 days ago by dirtystylus
No, Absolutely Not | CSS-Tricks
I think the difference between a junior and senior front-end developer isn't in their understanding or familiarity with a particular tech stack, toolchain, or whether they can write flawless code. Instead, it all comes down to this: how they push back against bad ideas.
by:robinrendle  webdesign  webdev  css  javascript  frontend 
21 days ago by dirtystylus
Mark Boulton on Twitter: "Whenever I'm designing editorial content, I always design for worse case scenario: - Terrible images (or no images) - Poorly written, long headlines - Really long paragraphs with no links - Overwhelming inappropriate advertising
Whenever I'm designing editorial content, I always design for worse case scenario:
- Terrible images (or no images)
- Poorly written, long headlines
- Really long paragraphs with no links
- Overwhelming inappropriate advertising
Because, you can bet, that's how it will end up.


So, if you can make poor content meet the baseline: accessible (URL, a11y), readable (typography, typesetting), navigable (IA). Then you're mostly there. Everything else is an enhancement.
editorialdesign  contentstrategy  webdesign  by:markboulton 
25 days ago by dirtystylus
Why is Chrissy Teigen’s new website so bad?
Traditional platforms provide plenty of fodder to react to and position around—you can stand out by being messy where others strive for perfection, or by matching the president’s foul language where others demure.
editorialdesign  editorialstrategy  culture  food  cooking  celebrities  chrissyteigen  branding  webdesign 
4 weeks ago by dirtystylus
Why Are Accessible Websites so Hard to Build? | CSS-Tricks
Here’s an example: when developing a site, JavaScript errors are probably going to be caught because everything breaks if something goes wrong. And CSS bugs are going to get caught because something will look off. But the accessibility or performance of a website can go from okay to terrible overnight and with no warning whatsoever. Yhe only way to fix these invisibly broken things is to first make them visible.

So, here’s an idea: what if our text editors caught accessibility issues and showed them to us during development? It could look something like this:
accessibility  a11y  by:robinrendle  via:csstricks  webdesign 
6 weeks ago by dirtystylus
Our new web design addresses both these issues. Thanks to a low-tech web design, we managed to decrease the average page size of the blog by a factor of five compared to the old design – all while making the website visually more attractive (and mobile-friendly). Secondly, our new website runs 100% on solar power, not just in words, but in reality: it has its own energy storage and will go off-line during longer periods of cloudy weather.
environment  webdesign  solarpower 
september 2018 by dirtystylus
The Font Loading Checklist—zachleat.com
When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.
css  webdesign  typography  font  webfonts  performance  webperf  by:zachleatherman 
september 2018 by dirtystylus
Practical CSS Scroll Snapping | CSS-Tricks
Messing with scrolling is risky business. Since it’s such a fundamental part of interacting with the web, changing it in any way can feel jarring—the term scrolljacking used to get thrown around to describe that sort of experience.
scrolling  scrolljack  via:csstricks  by:maxkohler  webdesign  css 
august 2018 by dirtystylus
Aesthetic Usability Effect | Laws of UX
Users often perceive aesthetically pleasing design as design that’s more usable.
ux  design  webdesign  appdesign 
august 2018 by dirtystylus
The Web is Made of Edge Cases by Taylor Hunt on CodePen
People will use your site how they want, and according to their means. That is wonderful, and why the Web was built.
via:beep  webdesign  accessibility  a11y  progressiveenhancement 
august 2018 by dirtystylus
Steve Jobs on Prototypes - Snook.ca
“We haven’t built a prototype in engineering for two years.

“What that means is, manufacturing gets involved from day one.

“A lot of times, when you build prototypes, it’s not quite the same technology as you’re going to use in production. And so all the accumulated knowledge you get from building your prototypes, you throw away when you change technology to go into production. And you start over in that accumulation process.
stevejobs  apple  prototyping  by:jonathansnook  webdesign  design  sketchapp 
july 2018 by dirtystylus
Reimagining The New York Times Digital Story Experience
May 8, 2018, marks the culmination of a years-long project to create an article ecosystem that promotes internal efficiency and delivers an enhanced reading experience for our users. We now have a single responsive article for both mobile and desktop on the web, and we use a subset of the same code to render stories in our native apps, Google’s Accelerated Mobile Pages (AMP) and our content management system. Here are the biggest benefits of the work we’ve done:
webdesign  nyt  editorialdesign  editorialstrategy  cms 
june 2018 by dirtystylus
horizontal scrolling prompt
javascript  ux  scrolling  webdesign 
may 2018 by dirtystylus
« earlier      
per page:    204080120160

related tags

3d  60fps  160over90  a11y  ABtesting  accessibility  actionscript  ada  adobe  advertising  agency  agency:fabrique  agency:gusto  agency:rallyinteractive  agency:stinkstudios  air  airbnb  airtable  ajax  ajaxinclude  algorithm  alistapart  analytics  android  aneventapart  angularjs  animal  animation  apollo  app  appdesign  appdev  apple  apprentice  apps  archive  aria  artdirection  as3  atomicdesign  attention  audiencebasednavigation  audio  automattic  autoplay  award  ballet  bbc  beer  bespoketemplate  bestof2015  bestof2018  bestpractices  bible  bigreveal  blackliberation  blacklivesmatter  blackness  blog  blogging  bluecadet  bluecadet:hia  bluecadet:nmai  blueprint  book  brain  branding  breadcrumb  browser  browserengine  buildtools  business  buttons  by:activetheory  by:adactio  by:alexrussell  by:beep  by:benfrain  by:brandongregory  by:chenhuijing  by:chriscoyier  by:christianheilmann  by:cloudfour  by:craighockenberry  by:csstricks  by:danieleden  by:daniellehuntrods  by:danmall  by:daverupert  by:eileenwebb  by:erinkissane  by:evanminto  by:feather  by:frankchimero  by:harryroberts  by:heydonpickering  by:inesmontani  by:jasonsantamaria  by:jeffreyzeldman  by:jensimmons  by:jeremykeith  by:johnallsopp  by:jonathansnook  by:jonniehallman  by:joshclark  by:karolinaszczur  by:kentatoshikura  by:lukew  by:lynnfisher  by:marcdrummond  by:markboulton  by:maxkohler  by:minamarkham  by:monicadinculescu  by:nathancurtis  by:nirzarpangarkar  by:paulrobertlloyd  by:rachelandrew  by:richardrutter  by:robinrendle  by:scottjehl  by:snookca  by:susanjrobertson  by:timkadlec  by:tylersticka  by:unakravets  by:upstatement  by:valhead  by:varunvachhar  by:veerlepieters  by:vitalyfriedman  by:wesbos  by:zachleatherman  cameras  cameronmoll  canvas  cardstacks  cardui  career  carousel  casestudy  cdn  celebrities  centering  chart  chobani  chrissyteigen  chrome  chromeextension  clearleft  clients  cloudfour  cms  codearchitecture  codepen  cognitiveload  colinkaepernick  collaboration  color  colorpicker  colortheory  commarts  commodification  communication  compass  complexity  components  compression  conference  conference:material  conference:webstock  constraints  content  contentblockers  contentdesign  contentpriority  contentstrategy  contracts  contrast  conversion  cooking  copywriting  course  creativecoding  creativity  criticalcss  criticalpath  css  css3  css:enduringcss  css:flexbox  css:FUN  css:grid  css:minmax  css:reset  css:specificity  css:utilityclasses  css:writingmode  cssframework  cssinjs  csstricks  culture  curbed  cute  cuttingthemustard  data  database  datauri  dataviz  davidsleight  dconstruct  deanallen  deathoftheweb  debugging  demo  denmark  design  designbs  designinbrowser  designinopen  designpairing  designpatterns  designsingularity  designsystem  designtrends  desktop  development  devtools  discovery  documentation  dog  domani  domanistudios  drawing  drizzle  dropcap  drupal  drupalcon2017  dubizzle  duotone  easing  ebook  editing  edito  editorialdesign  editorialstrategy  education  email  emmaboulton  empathy  emulator  encoding  environment  essay  ethanmarcotte  eulogy  facebook  faq  feminism  firefox  flash  flex  flexbox  flipflop  flv  FOIT  font  fontevents  fontloader  food  football  footer  form  FOUT  framework  freersackler  frontend  fullbleed  futurefriendly  gallery  game  gestures  google  googlefonts  googlemaps  government  graphql  greensock  gremlinjs  grid  gsap  hamburger  happycog  harrypotter  heroimage  hierarchy  highdpi  highered  hiring  history  historyrepeating  hostilenetwork  hover  html  html5  htmlemail  http2  humor  IA  icon  icons  IE  illustration  imageediting  imagery  images  imitation  inclusion  incrementalchange  indieweb  infinitescroll  inspiration  instagram  instantarticles  interactive  interfacedesign  interfaceinventory  internetarchive  interview  inventory  invisionapp  ios  ipad  iphone  iphonex  isabellastewartgardner  ITCSS  iteration  jam3  javascript  journalism  jpg  jqer  jquery  js  kinect  lagom  layout  lazyload  learning  leica  lgbtq  library  ligatures  lineart  linkbehavior  linkrot  links  list  listening  livechat  loader  localhost  location  locomotive  longevity  longwoodgardens  lookahead  mac  macos  magazine  maginative  maintainability  mamp  management  maps  marketing  materialdesign  math  mattdeslauriers  mcad  media  mediaquery  medium  mentalhealth  menu  microsoft  misogyny  mobile  mobilefirst  mobilevsdesktop  modularcontent  modularscale  motiondesign  motionsickness  museum  music  nativeamericans  navigation  netmag  news  newwwyear  nfl  NMAI  nonprofit  nyt  obsolescence  offline  offlinefirst  oldIE  opendesign  opennews  opensource  openweb  operatingsystem  opinion  optimization  orbitalcontent  organization  osx  pagination  panorama  paradoxofchoice  parallax  parenting  patternlab  patternlibrary  patterns  pbs  pdf  peers  performance  permissions  personalhistory  philosophy  photography  photos  photoshop  php  physics  placeholder  planning  podcast  polyfill  polygon  portfolio  postalservice  poster  preload  presentation  pricing  principles  priorityguides  process  productdesign  programming  progressivedisclosure  progressiveenhancement  progressivewebapp  propublica  protest  prototype  prototyping  ps4  publishing  pwa  python  queerness  racism  rails  reactjs  realestate  redesign  reference  research  resilientwebdesign  responsiveimages  retinascreen  review  rollover  ror  roundingerrors  ruby  rubyamf  rubyonrails  rwd  safari  sameness  sass  screendesign  screenshot  screensize  scripture  scrolling  scrolljack  search  sensors  series  serverless  service  shaders  sharinglinks  sidescrolling  signaturestyle  simplicity  sketch  sketchapp  sketching  slack  slackfodder  slate  slider  slideshow  smacss  smartphones  smashingconf  smashingmag  smithsonian  socialmedia  socialsoftware  SoDA  software  solarpower  sports  spreadsheet  squarespace  stackoverflow  staticpublishing  staticpublishing:eleventy  statistics  stevejobs  storyframes  strategy  styleguide  styleguide:fabricator  survey  susanjrobertson  sustainability  svg  talk  teamwork  tech  techculture  teens  testing  thefold  thegrid  theme  themes  threejs  timbrown  timelessness  tips  tools  toolsandtoys  touch  touchscreen  transitions  truncation  tutorial  tutorials  tweening  twitter  typekit  typography  ui  unicorn  usabilitytesting  userfirst  ux  ux:card  variablefonts  verticalmediaquery  via:adactio  via:beep  via:bradfrost  via:broderickgreer  via:chrisarasin  via:chriscoyier  via:clearleft  via:codrops  via:csstricks  via:danielmall  via:frandevinney  via:gray  via:gregsarault  via:grigs  via:henrysteinberg  via:jasonsantamaria  via:jeffeaton  via:jensimmons  via:joshgoldblum  via:karenmcgrane  via:khoi  via:kissane  via:lukew  via:malarkey  via:marcdrummond  via:markboulton  via:petehall  via:peterchappy  via:peter_chappy  via:rachelandrew  via:rachelnabors  via:rebeccasherman  via:robinrendle  via:ryanjohnson  via:sarahpolansky  via:scottjehl  via:shashashasha  via:smashingmag  via:susanjrobertson  via:trentwalton  via:valhead  via:wesbos  via:willvedd  via:yeseniaa  via:zeldman  video  viewportunits  visualinventory  visualscrapbook  voxproduct  vuejs  w3c  wcag  web  web2.0  webapp  webcomponents  webdesign  webdev  webdevbasics  webfonts  webgl  webkit  webperf  websitefold  webstandards  webvsnative  webvsprint  whitespace  widescreen  wikipedia  wireframe  wireframes  wireless  wobble  wordcampus2015  wordpress  workculture  workflow  writing  yearendlist  zombiedevices 

Copy this bookmark: