Sindre Wimberger | sin3

Accessibility for Mobile und RWD

Published by Sindre Wimberger on September 11th, 2014

What Does Responsive Web Design Have to do with Accessibility?
https://www.ssbbartgroup.com/blog/2013/07/11/what-does-responsive-web-design-have-to-do-with-accessibility/

Mobile And Accessibility: Why You Should Care And What You Can Do About It

http://www.smashingmagazine.com/2014/05/21/mobile-accessibility-why-care-what-can-you-do/

a11y

NoMoreCaptchas - Welcomes Humans and Sends Away Spam Bots

Published by Sindre Wimberger on July 29th, 2014

NoMoreCaptchas analyses behavior while a user name and password are being entered and determines if the user is human or a bot. There’s no extra field to fill out like with CAPTCHA, no incomprehensible audio to try and decipher and no hidden field that can trick or confuse a screen reader. That means there’s nothing blocking content and a website is still secure.

http://nomorecaptchas.com

a11y

skiplinks

Published by Sindre Wimberger on July 28th, 2014

WCAG 2.0
G1: Adding a link at the top of each page that goes directly to the main content area
G124: Adding links at the top of the page to each area of the content

Keyboard-Only Navigation for Improved Accessibility
http://www.nngroup.com/articles/keyboard-accessibility/

"Skip Navigation" Links
http://webaim.org/techniques/skipnav/

Skip links on mobile and tablets
http://www.iheni.com/skip-links-on-mobile-and-tablets/

Web Accessibility: Skip Navigation Links
http://www.bignerdranch.com/blog/web-accessibility-skip-navigation-links/

Voiceover returns to title of page after reading offset text
http://stackoverflow.com/questions/17245424/voiceover-returns-to-title-of-page-after-reading-offset-text

Fixing Focus Scripts

http://www.yaml.de/docs/#yaml-accessibility
http://www.yaml.de/yaml/core/js/yaml-focusfix.js

http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/

https://github.com/dylanb/a11yfy/blob/master/examples/votabindex2.html

a11y

OGD

Published by Sindre Wimberger on July 21st, 2014

CitySDK is creating a toolkit for the development of digital services within cities.
http://www.citysdk.eu/
City Dahsboard example http://citydashboard.waag.org/

CitySDK Linked Data API links datasets through addressable, real-world objects.
https://github.com/waagsociety/citysdk-ld/wiki/About

A collaborative model and open standard for civic issue tracking
http://www.open311.org/learn/

ogd

Webfonts - @font-face

Published by Sindre Wimberger on June 30th, 2014

Google Fonts - Technical Considerations
https://developers.google.com/fonts/docs/technical_considerations

Fighting the @font-face FOUT
http://www.paulirish.com/2009/fighting-the-font-face-fout/#update2011

Controlling the Flash of Unstyled Text (or FOUT) using Font Events
http://help.typekit.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events

How Can I Prevent FOUT?
http://www.fonts.com/support/faq/fout

Web Font Loader gives you added control when using linked fonts via @font-face

https://github.com/typekit/webfontloader

Web Fonts and the Critical Path
http://ianfeather.co.uk/web-fonts-and-the-critical-path/

Improving Smashing Magazine’s Performance: Deferring Web Fonts

http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/3/

Minimising font downloads
http://jakearchibald.com/2014/minimising-font-downloads/

@font-face for icons? Compaitibility Research
https://docs.google.com/presentation/d/1n4NyG4uPRjAA8zn_pSQ_Ket0RhcWC6QlZ6LMjKeECo0/edit#slide=id.p

webfonts

form submit button

Published by Sindre Wimberger on June 23rd, 2014

Why is it inaccessible to create a form with no submit button?
http://ux.stackexchange.com/questions/23440/why-is-it-inaccessible-to-create-a-form-with-no-submit-button

WCAG 2.0 - 3.2.2 On Input
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#consistent-behavior-unpredictable-change

http://www.w3.org/TR/WCAG20-TECHS/H32.html

a11y form

CSS Ressources

Published by Sindre Wimberger on June 18th, 2014

Framework

Normalising Designs For Better Quality CSS
"If we can achieve 80% of the design with 20% code, we should."

https://speakerdeck.com/csswizardry/normalising-designs-for-better-quality-css-1

What Is A CSS Framework Anyway?
https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway

InuitCSS

http://inuitcss.com/

https://github.com/inuitcss
https://github.com/csswizardry/inuit.css

CSS minifier
http://cssshrink.com/
https://github.com/stoyan/cssshrink

Styleguide

A methodology for documenting CSS and generating styleguides.
http://warpspire.com/kss

High-level advice and guidelines for writing sane, manageable, scalable CSS
http://cssguidelin.es/

Performance
CSS statistics (font-size, selectors,..) from a URL
http://cssstats.com/

A function for loading CSS asynchronously
https://github.com/filamentgroup/loadCSS

Print CSS
Making Your Site Printable
http://de.slideshare.net/aardrian/css-summit-2014-making-your-site-printable

Ressources

Create beautiful image sliders entirely in CSS. No jQuery, no JavaScript, no image icons, no coding!
http://cssslider.com/

css print

HTML5 Picture Element

Published by Sindre Wimberger on June 17th, 2014

The picture Element - W3C Working Draft

http://picture.responsiveimages.org

A responsive image polyfill
http://scottjehl.github.io/picturefill/

Current users, polyfills, prototypes, and implementations
https://github.com/ResponsiveImagesCG/picture-element/wiki/Current-users,-polyfills,-prototypes,-and-implementations

Chrome 34 Beta: Responsive Images and Unprefixed Web Audio
http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html?m=1

responsive html5 image

Evernote Einbindung

Published by Sindre Wimberger on June 17th, 2014

Neuer BlogFlow mit Evernote und Sentinote
http://ralphkuehnl.de/2014/03/neuer-blogflow-mit-evernote-und-sentinote/

Sentinote makes it easy to manage your WordPress site with Evernote.
http://sentinote.com/

Evernote for Drupal
https://drupal.org/project/evernote
http://chrisshattuck.com/taxonomy/term/86?page=1

evernote

Mobile Hamburger Icon

Published by Sindre Wimberger on June 17th, 2014

Usability

Improving the hamburger button
http://azumbrunnen.me/blog/improving-the-hamburger-button/

Let's Not Kill the Hamburger Icon Just Yet
http://mattdsmith.com/hamburger/

Kill The Hamburger Button
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

The Hamburger Icon - When common practices and trends should be questioned.
https://medium.com/@gavinelliott/the-hamburger-icon-f2c42f858630

Why and How to avoid Hamburger Menus
http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

UX designers: Side drawer navigation could be costing you half your user engagement
http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/

The Hamburger is Bad for You
http://mor10.com/hamburger-bad/

Analytics

Mobile Menu AB Tested: Hamburger Not the Best Choice?
http://exisweb.net/mobile-menu-abtest

Hamburger vs Menu: The Final AB Test
http://exisweb.net/menu-eats-hamburger

Development

CSS Animated Hamburger Icon
http://www.elijahmanor.com/css-animated-hamburger-icon/

mobile

View More Posts →