sunpig + html   389

Triumph of the Mundane | Blog | design mind
It is inevitable that devices will ship with interactivity built in. But as more devices become functional, it’s going to become overwhelming to have each device be it’s own island. The three shifts discussed here: micro functionality, liberated interaction, and a clustered ecosystem all point to a new pattern of thinking: small devices with small functionality that all work together in profound ways. This is a triumph of the mundane; a challenge to our PC soaked way of thinking.
scottjenson  design  device  smart  smartdevice  connected  electronics  ce  html  push  screen  controls  interface  interaction 
5 weeks ago by sunpig
Hiding content untangled: Hiding vs. moving out of the visible viewport | Marco’s accessibility blog
The problem here was that the content “hiding” was done in a way that visually hides the content from the naked eye, but not from my screen reader. Furthermore, the fact that this page has different interaction models for keyboard and mouse users was not taken into account. In short: a wrong technique was used to hide the content.
marcozehe  content  hide  hiding  visibility  display  none  position  screen  accessibility  a11y  screenreader  reader  jaws  nvda  frontedn  webdev  html 
5 weeks ago by sunpig
the origin of the <blink> tag - www
Saturday morning rolled around and I headed into the office only to find what else but, blinking text. It was on the screen blinking in all its glory, and in the browser. How could this be, you might ask? It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.
blink  tag  web  html  history  lynx  browser 
6 weeks ago by sunpig
Designers respond to Nielsen on mobile | News | .net magazine
McGrane also noted the problems faced by users arriving from search engines: "If you're only delivering a subset of content and features on your mobile site, redirecting users to the mobile URL can cause huge problems. This scenario happens all the time: the user searches for something on Google from her phone, and finds the content she's looking for. Tapping the link in search results takes her to the mobile site, but because that content doesn't exist on mobile, she gets dumped on the mobile homepage. Sure, she can link to the full desktop site, but she winds up on the homepage there too. She knows the content exists, she just can't get to it anymore. Redirecting to the mobile URL breaks Google search. How is that ever a good user experience?"
karenmcgrane  bradfrost  netmagazine  jakobnielsen  mobile  content  strategy  design  phone  website  html 
7 weeks ago by sunpig
Using Modernizr to detect HTML5 features and provide fallbacks | HTML5 Doctor
Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called feature detection and is much more efficient than browser sniffing.
modernizr  html  javascript  js  yepnope  html5doctor  webdev  frontent  feature  detect  load  conditional 
7 weeks ago by sunpig
Stubbornella » Blog Archive » Scope donuts
The interesting thing about UI components (different than ads or widgets) is that they can sometimes contain other unrelated components. You can have a tabset that contains headings, paragraphs, media blocks, or even (holy ugly!) another tabset. Ideally, you would scope the CSS of the tabset to the tabs only, so it can’t bleed outward and change styles on the rest of the page, but you also want to prevent the styles from bleeding inward to content components. So we need a way of saying, not only where scope starts, but where it ends. Thus, the scope donut. The styles affect the donut shape, but not the other components which can be found in the donut hole.
css  nicolesullivan  scope  donut  hole  body  limit  html  webdev  frontend  future 
7 weeks ago by sunpig
Media Query & Asset Downloading Results | TimKadlec.com
If you’re going to hide a content image, you’re not going to be able to do it by setting display:none. I recommend using a Javascript or server-side based approach instead.

If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.

For swapping background images, define them both inside of media queries.
timkadlec  mediaquery  screen  image  responsive  css  html  frontend  optimization 
7 weeks ago by sunpig
sigma.js | a lightweight JavaScript graph drawing library
sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:

Display interactively static graphs exported from a graph visualization software - like Gephi
Display dynamically graphs that are generated on the fly
canvas  graph  html5  javascript  visualization  js  data  html  webdev  frontend  library 
9 weeks ago by sunpig
envision - demos
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.
js  javascript  graph  chart  canvas  html  css  visualization  data  library  design  web  webdev  frontend 
9 weeks ago by sunpig
How to work around the Mobile Safari image resource limit
Because of the memory available on an iPad or iPhone, Mobile Safari has much stricter resource limits than most desktop browsers.

One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
safari  mobile  ios  ipad  iphone  webkit  resource  limit  image  size  html  webdev  frontend  constraint 
10 weeks ago by sunpig
About HTML semantics and front-end architecture – Nicolas Gallagher
When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that none can perform CSS-alchemy.
html  css  js  javascript  stack  webdev  frontend  semantics  oocss  architecture  structure  module  reuse  necolas  nicolasgallagher  from twitter
11 weeks ago by sunpig
Greenbelt Festival - Where arts, faith and justice collide
Lovely responsive design & implementation: designed & built by @rachelandrew, @drewm, @ratiotype
responsive  web  design  rwd  frontend  fluid  adaptive  art  culture  music  css  html 
11 weeks ago by sunpig
The bigger the box, the more you can do...
Should you use padding or margin to create space between boxes?
padding  margin  spacing  box  css  context  html  frontend  browser  webdev  thierrykoblentz 
february 2012 by sunpig
Better Numerical Inputs for Mobile Forms | David Goss
RT @davidjgoss: Using pattern="[0-9]*" as suggested by @brad_frost is useful in other ways too -
input  type  number  numeric  keypad  ios  iphone  pattern  html  webdev  usability  spinner 
february 2012 by sunpig
Redefined | Trent Walton
RT : "The largest and most exciting part of the design process now happens in the browser" great read by ...
trentwalton  responsive  adaptive  design  pixel  proportion  layout  mediaquery  webdev  html  css  from twitter
february 2012 by sunpig
10. Tables and frames
@wnas @ysbreker Tables are awesome, when used correctly! One of my favourite pages in the internet:
html  reference  joeclark  tables  td  tr  tbody  thead  scope  webdev  accessibility  a11y 
november 2011 by sunpig
Crap! It doesn't look quite right, or, how I learned to stop worryi...
"Crap! It doesn't look quite right, or, how I learned to stop worrying and set my mobile web sites free" by @lyzadanger
lyza  responsive  web  design  fluid  control  webdev  layout  html  content  mobile  devie 
november 2011 by sunpig
« earlier      

related tags

&quot;tamper  3d  37signals  456bereast  @font-face  @media  a11y  aarongustafson  aaronrussell  abba  abbr  abbreviation  absolute  abtest  accelerometer  access  accessibility  accordeon  acessibility  acronym  actionview  activex  adactio  adaptive  adaptivepath  addevent  address  adoption  advanced  adverts  advice  ajax  ajaxian  ala  alanpearce  alexrussell  algorithm  alistapart  alt  analysis  anatomy  android  andybudd  andyclarke  angle  animation  annadebenham  antipattern  apache  api  app  appcache  appcelerator  apple  application  architecture  aria  art  article  asp.net  aspect  aspnet  aspx  assert  asset  assets  assistivetechnologies  async  asynchronous  at  attribute  attributes  audio  autocomplete  awesome  background  bar  base64  basecamp  baseline  basic  bdi  bedrock  beentheredonethat  beer  behaviour  ben  benchmark  benward  bertbos  best  bestpractice  bidi  bidirectional  bin  blank  bleed  blind  blink  bloat  block  blocking  blog  bobbyvandersluis  body  bodyguard  boilerplate  bokeh  book  bookmarklet  bootstrap  border  both  bottom  box  boxmodel  bradchoate  bradfrost  brew  brianfling  brothercake  browser  browserdetection  browsers  brucelawson  bubble  bubbling  bug  bugs  build  business  button  buttons  bytecode  c++  cache  calendar  camera  cameronmoll  camp  can  cannybill  canvas  capabilities  caption  capture  ce  cell  center  change  character  chart  cheatsheet  check  checkbox  checker  child  choice  chrisheilmann  chrome  class  clean  click  clickjacking  clickthrough  close  closure  cloudfour  cms  code  coding  coke  collaboration  color  colour  columns  combinator  comment  communication  comp  compatibility  compatible  compile  complete  complexspiral  compression  compressor  computing  conditional  conditionalcomments  conforming  connected  consditional  consensus  consideration  constraint  construct  container  content  context  control  controljs  controls  convert  cookie  cookies  copyright  cordova  corner  corners  create  creative  creator  crop  cross  crossdomain  cs  css  css3  csscience  culture  cursor  custom  cute  dancedarholm  daneden  daringfireball  data  data&quot;  database  datauri  date  daveshea  db  deanedwards  debug  decision  deck  default  definition  delay  delegation  demo  dennisforbes  density  derekpowazek  descendant  design  desktop  despair  detect  detection  dev  development  developmnt  device  deviceatlas  devie  dhtml  diagnose  diagonal  dialog  dialogue  diediedie  differene  digitalweb  dimension  dionalmaer  direction  disabled  displacement  display  div  document  documentation  documentwrite  dojo  dom  domain  donut  dope  dougbowman  download  draft  drag  dragdrop  drop  dropdown  dry  dumbphone  dummy  dustindiaz  dynamic  easing  ebook  editor  eement  effect  effects  elastic  electronics  element  elements  em  email  embed  embedded  ems  emulator  encode  encoding  end  enhacement  enhance  enhancejs  enhancement  entity  epub  ericmeyer  error  etago  event  events  ever  evolution  example  expand  experiment  extend  extensibility  extension  eyetracking  fahrner  failure  fallback  farukates  faux  feature  field  fields  filament  file  filemane  filesystem  filter  find  firebug  firefox  fireworks  fix  fixed  flag  flash  flexible  flickr  fling  float  fluid  fn  font  fonts  footer  forabeautifulweb  forever  form  format  formatting  formfactor  forms  forward  fragmentation  frame  framework  french  friendly  front-end  frontedn  fronteers  frontend  frontent  full  fullscreen  fun  function  functionality  funny  future  game  gameboy  gardget  garrettdimon  gecko  gedit  geek  geeknotes  generate  generated  generator  getelementsbyclassname  getUserMedia  gilde  github  glennjones  glossary  gmail  godfather  google  graceful  gradient  graph  graphics  gregorian  grid  grigs  group  gruber  gui  guide  guidelines  guild  gwt  gzip  hack  hacks  hakonlie  hakonwiumlie  haml  handheld  handset  hash  hcalendar  hcard  hci  head  header  heading  height  help  helper  hide  hiding  hierarchy  high  highlight  hints  historian  history  hole  hollybergevin  homescreen  horse  house  hover  howto  href  htc  html  html5  html5doctor  http  humour  hybrid  hyperlink  i18n  ia  id  ie  ie6  ie7  ie8  ie9  iframe  image  images  img  implementation  implicity  import  importnode  inayailideleon  inception  include  incoude  indent  infinitebrowserversion  info  infographic  information  initialism  injoke  inline  inline-block  inner  innerhtml  innovation  input  insert  insertAdjacentHTML  insight  inspiration  inspriration  interaction  interactiondesign  interface  internetexplorer  internetexplorere  introduction  io  ios  ipad  iphone  iteration  jakearchibald  jakob  jakobnielsen  jamesedwards  jamespearce  jasongrigsby  javascript  jaws  jeffcroft  jeremykeith  jessejamesgarrett  joeclark  johnallsop  johngallant  johnresig  jonathansnook  jonathanstark  jontan  jontangerine  jqm  jquery  js  js1k  jsbin  jslint  julian  karenmcgrane  karmatics  kentbrewster  kevinhale  keyboard  keynote  keypad  kscottallen  kurafire  label  labjs  lachlanhunt  language  layer  layour  layout  leading  leak  learning  legibility  lemur  libraries  library  libs  lightbox  limit  link  links  lipsum  liquid  list  live  load  loading  local  localization  localstorage  logos  long  lookup  loremipsum  love  ltr  lukew  lukewroblewski  lynx  lyza  machine  mafia  magazine  mail  maintainability  maintainable  manifest  map  marcozehe  margin  marketing  markotto  markpilgrim  markup  markwubben  master  mathiasbynens  matteopenzo  matthewlevine  mdn  media  mediaqueries  mediaquery  memory  memoryleak  merge  meta  mezzoblue  mhtml  michaelmahemoff  microformat  microformats  microsoft  mikedavidson  mini  misc  mistake  mistakes  mob  mobile  mobilefirst  mobilesafari  mobileweb  mode  modernizr  module  monkey  movabletype  mozilla  mri  mt  music  mvc  name  narrow  nataliedowne  native  nav  navigation  nbsp  ncz  neat  necolas  needabutton  negation  negativemargin  nest  net  netflix  netmagazine  nettuts  newsletter  nginx  nicholaszakas  nicolasgallagher  nicolesullivan  nielsen  nike  nl  no-js  node  nokia  non-breaking  none  notes  number  numbers  numeric  nvda  obfuscation  object  objects  obtrusive  odetocode  offline  offset  ogg  olistudholme  oninput  onkeydown  online  onload  oocss  opacity  open  openweb  opera  optimization  order  oreilly  outline  outliner  outlook  overflow  overlay  overview  package  padding  page  pages  pageweight  pagination  parallax  parse  partial  particletree  paste  pastrykit  path  pattern  paulirish  pda  pdf  performance  persistence  persistent  peterpaulkoch  philosophy  phone  phonegap  photography  photoshop  php  pie  pixel  placeholder  placement  plan  platform  playground  pleasure  plugin  png  podcast  policy  polyfill  polygon  popstate  popularity  popup  posh  position  positioning  positioniseverything  post  postpc  powerpoint  ppc  ppk  practice  prepare  presentation  price  pricing  prince  print  printing  privacy  problem  problems  process  production  professionalism  profile  prognostication  programming  progressive  progressiveenhancement  project  property  proportion  proposal  protolize  prototype  prototyping  proxy  pseudoclass  publisher  publishing  purpose  push  pushstate  puzzle  px  qt  query  queryselectorall  quicktime  quirksmode  rachelandrew  radial  rails  railscast  rant  raster  rate  ratio  readability  reader  reading  rearrange  record  rect  redesign  reference  reformat  regex  regularexpression  relative  rem  remysharp  render  rendering  repeat  replacement  replacestate  research  reset  resize  resolution  resource  resources  responsive  rest  retina  reuse  rgba  rogerblack  rogerjohansson  role  roll  roman  romancortes  rotate  round  rounded  roundedcorners  rounding  row  rtl  ruby  rule  run  russweakley  rwd  ryanlazuka  s3  s40  safari  samy  sandbox  satay  saveas  sb  scalable  scale  schill  scope  scottjenson  scratch  screen  screenreader  screenreaders  script  scripting  scroll  scrollimation  search  section  sectioning  security  select  selector  selectors  semantic  semantics  semanticweb  sencha  seo  separate  separation  server  sessionstorage  setup  sexy  sfw  shadow  shauninman  shim  shiv  show  sibling  sidebar  sifr  simonwillison  simple  simplebits  simplicity  site  sitepoint  sixpart  size  skeleton  skip  skiplinks  slant  slide  slides  slideshare  slidingdoors  slope  slow  small  smallscreen  smart  smartdevice  smartphone  smashingmagazine  sniff  snook  social  socialsoftware  society  software  source  space  spacing  spec  specification  specificity  speech  speed  spinner  spof  sprite  spriteme  sprites  sr  src  stack  stackoverflow  standard  standards  state  statistics  stevesouders  sticky  storage  stoyanstefanov  strategy  stres  structure  stuartlangridge  stubbornella  study  stupidwebtricks  style  stylecouncil  styleguide  stylesguide  stylesheet  stylesheets  styling  submit  summary  support  survey  svg  sweet  swfir  swiffer  sxsw  synchronour  syndication  synthesizer  tab  table  table-layout  tables  tablet  tabs  tag  tags  tantek  tap  target  tbody  td  tdn  teamsnap  technics  techniqeue  technology  tel  template  templaye  test  testcase  testing  text  texteditor  th  thead  theme  thierrykoblentz  thijsreigersberg  tidy  time  timing  timkadlec  timoereilly  tinysrc  tips  titanium  title  toggle  tool  toolkit  tools  toy  tr  tracking  transform  transformation  transition  translate  trends  trentwalton  trick  tricks  try  tufte  turntable  tutorial  tutorials  twitter  type  typepad  typography  ufo  ui  unicode  universality  unobtrusive  upload  url  usability  usage  userexperience  userinput  utility  ux  valid  validation  value-class  vaue  vcard  veerle  version  vertical  vestor  video  view  viewport  viewsource  visibility  visible  vision  vista  visual  visualization  vitamin  voiceover  w3c  wac  wai  walls  war  was  wasp  waterfall  wav  wcag  web  web2.0  webapp  webapplicationstack  webdesign  webdesignshock  webdev  webdirections  webforms  webkit  website  webstandards  webtech  wedje  westciv  whatwg  wide  widget  width  windows  wireframe  wpo  wufoo  wurfl  xbrowser  xfn  xhtml  xml  xmlhttprequest  xray  xss  yafla  yahoo  yaml  year  yepnope  yslow  yui  yui3  zachleat  zen  zencoding  zengarden  zip 

Copy this bookmark:



description:


tags: