※ Permalink

Here’s what Morten had to say about my talk:

the accessibility session that for once was not one long boring talk about you being sued if you didn’t put ria roles inside you code – This was about getting it done (and cock pushups…)

And here is your chance to give the organizers a review of my talk.

※ Permalink

But it depends on the definition of what “designing in the browser” actually is. For me, the PSD I get is almost every time a starting point. We don’t have a PSD for every possible state of the web page but extend from the design patterns we get off the document. This will be reviewed by the designer and if they got comments or other ideas they just use Photoshop to visualize those things and hand it back. Designing in the browser isn’t just the HTML/CSS part and you don’t need to go the whole way browser-only. Use the appropriate tools to solve the problems as they arise.

※ Permalink

※ Permalink

Web designers have had access to OpenType features for a year or so, through properties proposed in the CSS 3 Fonts Module. Firefox has supported this since version 4, and but until recently it was the only browser do so. Now Microsoft has joined the party by announcing OpenType support in Internet Explorer 10, along with Chrome on Windows (not Mac yet).

※ Permalink

Please note that I’ve abandoned Feedburner. A redirection is in place, but just make sure that the correct URL is in your RSS-Reader of choice: http://yatil.net/rss-feed

※ Permalink

For what it’s worth, it’s stuff like [vertical media queries] that gets me excited about the future of web design. We’re leaping past any point where the word webpage makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

I’m so looking forward to seeing him talk next week in Nottingham.

※ Permalink

I’m sure about another property that changes how a screen reader reads a document: content(). This one clearly adds content like text or an image to the content of the document, hence the name. It alters the document. Look at this code:

a[href$=".pdf"]:after {
	content: " (PDF document)";
}

Clearly here content gets inserted that will benefit everyone, so reading it out to screen reader users is a good thing. (Note: While Firefox thinks this is valuable for screen readers, it doesn’t allow us to select or copy that text, see this fiddle. I consider this a bug and will file one. This is a bug since – grab a seat! – August 1999. No, really it is!)

Now, finally, to icons:

The best practice until now to add icons from fonts is to use a data attribute and generated content through :before or :after pseudo elements, like Jon Hicks showed in his 24ways article. This works great and has all the benefits you get from the icon fonts: Unlimited scalability, easy maintainability, small footprint, no tedious sprites, easy to change color, text effects using text-shadow, to name a few. (See this example of font icons in use by css-tricks.com to experience the benefits.)

This is the code currently used to define the icon (example by Nathan Smith):

HTML:

<!-- Assuming "D" is your font's Delete icon -->
<span data-icon="D">Delete</span>

CSS:

[data-icon]:before {
  font-family: 'Icon Font Here';
  content: attr(data-icon);
}

Sadly, the behavior of browsers and screen readers make this example inaccessible (or at least somewhat annoying), as it reads: “D Delete”. This is not desirable, as this blog post by Scott Jehl of Filament Group shows. There is nothing we can do to prevent this using CSS, but there is one technique that can help with this issue:

ARIA please help us!

ARIA is an intermediate solution to the problem of HTML being not powerful enough to handle (more complex) tasks accessible. One thing you can do with ARIA is telling the screen reader that an element is not visible to assistive technology. That’s exactly what we want. ARIA works directly in the HTML, unfortunately, so there is no stylesheet-like language we could use. Using pure HTML the accessible example would look like this:

<!-- Assuming "D" is your font's Delete icon -->
<span><b aria-hidden="true">D</b> Delete</span>

CSS:

b { font-family: 'Icon Font Here'; }

This looks ugly but works. Typing that whole HTML may be a lot of work in interfaces and there is no way back if we get an property in CSS that sets generated content to presentational only.

jQuery to the rescue!

So we need JavaScript to insert the icons. The HTML is the one from the example by Nathan:

<!-- Assuming "D" is your font's Delete icon -->
<span data-icon="D">Delete</span>

CSS:

[data-icon] b { font-family: 'Icon Font Here'; }

jQuery JS:

$(document).ready(function(){
	$('[data-icon]').each(function(){
		var target = $(this);
		var icon = $('<b>' + target.attr('data-icon') + '</b>');
		icon.attr('aria-hidden', 'true');
		target.prepend(icon);
	});
});

What does this code: For every element with an data-icon attribute we create a b element which content is the value of the data-icon attribute. The b is set as aria-hidden and prepends the first child of the element with the data-icon attribute. (So this is the before behavior, we could add after using another data attribute, but I decided to keep it simple.)

That’s great and works but of course you won’t have icons if your JS fails to load, so hide the text of the button (or span) only if JS is loaded and executed.

The future?

[data-icon]:before {content:attr(data-icon); speak:none;}

This was the idea of Nicolas Gallagher (or @necolas) on Twitter:

<a href="https://twitter.com/MarcoZehe">MarcoZehe</a> yatil I wonder if `:before {content:”$”; speak:none;}` would work to prevent reading of that content?

— Nicolas Gallagher (@necolas) December 12, 2011

There is a lot to love here. First: It keeps the simplicity of the CSS-only solution. Second: This is already defined in CSS 2.1, although only in the aural media type. Third: No JS needed.

This value is not exposed by Firefox as far as I can tell and isn’t interpreted in any way. Webkit seems to support it, at least it appears in the inspector, but a quick test using voice over on the iPad resulted in no success.

I think Firefox and the other browsers should adopt the property and expose it to assistive technology, or treat speak:none; as the css equivalent of aria-hidden="true" attribute/value.

What do you think about this issue? Is speak:none the Holy Grail of icon fonts? Or could we use SVGs to archive similar things? What is the best way in your opinion? Write something in the internets and ping me (by mailing, tweeting or plussing me).

※ Permalink

※ Permalink

Update: From November 1st, 2011 the Daily Nerd is published in English. Enjoy!

※ Permalink

※ Permalink

It’s exciting to look around and see sites using new semantics. Even the mark element is getting some action! Are you using new elements? Which ones do you feel safe to implement?

I use the new elements since about two years now, probably three if you count early private projects, and never looked back. It is just what makes sense and really improves readability and maintainability of our code. To be honest, it would be very hard to be limited to the (X)HTML elements. It just is the right decision to make your HTML the best you can, having more semantics really helps.

※ Permalink

Today I read the latest in the long, long, long line of why I won’t support IE6. How fucking droll. If IE6 support is part of your job or the contract – then that’s what it is, that’s the job, that’s the challenge of your work.

Thanks for writing those words, Remy. We don’t support (i.e. haven’t IE6 in our contracts) for about two years now. Of course we try to degrade gracefully whenever possible. If we’d take on work that requires IE6 testing, we’d just do it. We know how to work around it’s odds. For most of our clients to date supporting better tech had more value than IE6 testing.

※ Permalink

※ Permalink

The GEL guidelines are a reference point for all designers creating BBC websites (future iterations will also incorporate mobile and IPTV recommendations).

A compendium about how the BBC’s website work, a great resource. Probably every web project should have something like that. Don’t forget to see the style guide in PDF form.

(via @danoliver)

※ Permalink

What I still don’t understand is that newspapers don’t think of Google News as free advertisement. The articles are typically read on the website anyways.

※ Permalink

If you care about your online presence, you must own it. I do, and that’s why my email address has always been at my own domain, not the domain of any employer or webmail service.

※ Permalink

My main objectives at the moment are responsive web design (ORLY) and the nitty gritty of HTML5 and CSS3. Accessibility is a main concern to me, so it will find its place here, too.

Technical details: the CMS is Textpattern, the layout and design is based on “320 and up” by @malarkey based on the genius HTML5boilerplate.com. Statistics are collected by Gauges.

As you can see there are no comments enabled on this site. I want to keep it very clean here, and we got so many social back channels, so hit me on Twitter, Facebook or Google+ if you like to comment on an article. If you’re really old school, just write me an e-mail

Don’t forget to get the Feed!

Performance is a browser level issue, it is not something for HTML/CSS authors to fix or work around. As long as we are authoring valid and sensible HTML and CSS, we should not need to resort to such ridiculous rules simply to enhance the speed at which a given page renders. Nor need we, these things are getting faster with every release.

More Tools in our tool belt are good, but we must make reasonable assumptions about their use. Just being dogmatic doesn’t work.

※ Permalink

※ Permalink

※ Permalink

※ Permalink

Eric Eggert
Rheinstraße 211
45219 Essen

Kontakt:

Telefon: +49 151 41932204

E-Mail: yatil.de@gmail.com

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:

Eric Eggert

Rheinstraße 211
45219 Essen

Quelle: Impressum erstellt durch Impressum Generator von eRecht24

Haftungsausschluss:

Haftung für Inhalte

Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Haftung für Links

Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

Urheberrecht

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.

Datenschutz

Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.

Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.

Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.

Datenschutzerklärung für die Nutzung von Facebook-Plugins (Like-Button)

Auf unseren Seiten sind Plugins des sozialen Netzwerks Facebook, 1601 South California Avenue, Palo Alto, CA 94304, USA integriert. Die Facebook-Plugins erkennen Sie an dem Facebook-Logo oder dem “Like-Button” (“Gefällt mir”) auf unserer Seite. Eine Übersicht über die Facebook-Plugins finden Sie hier: http://developers.facebook.com/docs/plugins/.
Wenn Sie unsere Seiten besuchen, wird über das Plugin eine direkte Verbindung zwischen Ihrem Browser und dem Facebook-Server hergestellt. Facebook erhält dadurch die Information, dass Sie mit Ihrer IP-Adresse unsere Seite besucht haben. Wenn Sie den Facebook “Like-Button” anklicken während Sie in Ihrem Facebook-Account eingeloggt sind, können Sie die Inhalte unserer Seiten auf Ihrem Facebook-Profil verlinken. Dadurch kann Facebook den Besuch unserer Seiten Ihrem Benutzerkonto zuordnen. Wir weisen darauf hin, dass wir als Anbieter der Seiten keine Kenntnis vom Inhalt der übermittelten Daten sowie deren Nutzung durch Facebook erhalten. Weitere Informationen hierzu finden Sie in der Datenschutzerklärung von facebook unter http://de-de.facebook.com/policy.php

Wenn Sie nicht wünschen, dass Facebook den Besuch unserer Seiten Ihrem Facebook-Nutzerkonto zuordnen kann, loggen Sie sich bitte aus Ihrem Facebook-Benutzerkonto aus.

Datenschutzerklärung für die Nutzung von Google Analytics

Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. (“Google”). Google Analytics verwendet sog. “Cookies”, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglicht. Die durch den Cookie erzeugten Informationen über Ihre Benutzung dieser Website (einschließlich Ihrer IP-Adresse) wird an einen Server von Google in den USA übertragen und dort gespeichert.

Google wird diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten für die Websitebetreiber zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen zu erbringen. Auch wird Google diese Informationen gegebenenfalls an Dritte übertragen, sofern dies gesetzlich vorgeschrieben ist oder soweit Dritte diese Daten im Auftrag von Google verarbeiten. Google wird in keinem Fall Ihre IP-Adresse mit anderen Daten der Google Inc. in Verbindung bringen.

Sie können die Installation der Cookies durch eine entsprechende Einstellung Ihrer Browser Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website voll umfänglich nutzen können. Durch die Nutzung dieser Website erklären Sie sich mit der Bearbeitung der über Sie erhobenen Daten durch Google in der zuvor beschriebenen Art und Weise und zu dem zuvor benannten Zweck einverstanden.

Datenschutzerklärung für die Nutzung von Google Adsense

Diese Website benutzt Google AdSense, einen Dienst zum Einbinden von Werbeanzeigen der Google Inc. (“Google”). Google AdSense verwendet sog. “Cookies”, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website ermöglicht. Google AdSense verwendet auch so genannte Web Beacons (unsichtbare Grafiken). Durch diese Web Beacons können Informationen wie der Besucherverkehr auf diesen Seiten ausgewertet werden.

Die durch Cookies und Web Beacons erzeugten Informationen über die Benutzung dieser Website (einschließlich Ihrer IP-Adresse) und Auslieferung von Werbeformaten werden an einen Server von Google in den USA übertragen und dort gespeichert. Diese Informationen können von Google an Vertragspartner von Google weiter gegeben werden. Google wird Ihre IP-Adresse jedoch nicht mit anderen von Ihnen gespeicherten Daten zusammenführen.

Sie können die Installation der Cookies durch eine entsprechende Einstellung Ihrer Browser Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website voll umfänglich nutzen können. Durch die Nutzung dieser Website erklären Sie sich mit der Bearbeitung der über Sie erhobenen Daten durch Google in der zuvor beschriebenen Art und Weise und zu dem zuvor benannten Zweck einverstanden.

Quellenangaben: Disclaimer von eRecht24, dem Portal zum Internetrecht von Rechtsanwalt Sören Siebert, Facebook Disclaimer von eRecht24, Datenschutzerklärung Google Analytics, Google Adsense Haftungsausschluss

※ Permalink

1. You need to know your content first. Real content, not the Lorem Ipsum kind of content that will later out of the sudden be some kind of rich text with images and stuff.
2. Get an overview on the different templates, identify reusable elements and make them reusable: use classes!
3. Add exceptionally good HTML. Think about every part of the site, use the most appropriate elements, don’t get too distracted. Use table for tabular data. Keep it simple. And then simplify some more!
4. Add CSS. Start your CSS with the basics: reset, fonts, positioning. Try not to add more elements to your HTML only because you think it can’t be accomplished with the existing structure. Often it will work and you saved not only some bytes but even more on maintenance cost.
5. Test regularly across targeted browsers. That is important. Start your working day with an hour of browser testing, at least use some screenshot tool to look for breaking layouts. Do not fix them immediately, just note them down. If you get back to that element during the day, fix it then or as a wrap up at the end of the day. (You will feel in “got things done” mode when you leave the office!)
6. Adding bells and whistles for real browsers, so IE7+ and the others, a website doesn’t have to look the same in all browsers, but it should at least be a consistent look and feel. If something is not supported by a browser use default fallbacks. If the fallback is not working as intended, add the feature only to browsers who support it.
7. Use shortcuts. You don’t get paid for reinventing the wheel every time, so don’t do it. Use a JS library to get around inconsistencies in browsers and use a CSS framework if you know it very well. Typically you’ll create a flexible framework for each project and you’ll learn which parts work and which to reuse. Different projects need different approaches.
8. Be accessible. Every part of the web site has to be accessible even if there is only the raw HTML code rendered. Everything can (and will) break, so be sure that the content is accessible. If non-targeted browsers like IE6 get something wrong, you can rely on your existing HTML structure and hide the JS from the browser.
9. Deploy, Enjoy. (Okay, that isn’t really a guideline ;)

One reminder: You may want to backup your important data regularly, probably with time machine on the mac or with Dropbox. You may also want to use at least a local version control system like GIT or SVN to track your progress.