Webdesigninformer.com

Snook Go to the source

I remember a couple years ago speaking at An Event Apart and mentioning how I don’t use the definition list. I may have said it a few times, to the annoyance of the audience. When pushed on why I don’t use definition lists, I mentioned that screenreaders read out that a term is equal to a definition. Somebody tested and confirmed with me afterwards that his particular screenreader did in fact read it out in a way that would be awkward if people were to use them. (Alas, I can’t remember exactly what it was that the screenreader actually announced.) It’s been a couple years since that fateful day and the situation came up at work. A co-worker was using a definition list and I mentioned the accessibility issue. … Read the rest here

Adactio Go to the source

Dear Apple Claus, I’ve been a very good boy this year so I hope you don’t me asking for a little present. What I’d really like for Christmas is for you to fix that strange orientation scaling bug in Mobile Safari. Just in case you’ve forgotten about it, my friend Scott —who has been a very, very good boy this year (what with that whole Boston Globe thing)—put together a test page quite a while back to demonstrate the problem. Basically, if I set meta name=”viewport” content=”width=device-width, initial-scale=1.0″ then it means a pixel should be equal to a pixel: in portrait view, the width should be 320 pixels; in landscape view the width should be 480 pixels. But in Mobile Safari, if I move from portrait to landscape, the width jumps to a value larger than 480 pixels, which means the hapless user must double tap to bring the scale down to 1:1. … Read the rest here

Hicksdesign Go to the source

Safari Omnibar is a SIMBL plugin for Safari that enables a single addressfield/search bar like Google Chrome’s Omnibox. Its still fairly early days, but it works well, and has just been updated to support search shortcuts: (the search bar is hidden after installation) To edit keyword searches, right click the address field… … and then you can then enter the search keywords This is of course functionality that’s been available in Opera and Firefox, long before Chrome, but this is a great way for folks that prefer Safari to get it. Safari Omnibar is hosted on github Tagged: plugins , safari … Read the rest here

Cameron Moll Go to the source

What Safari’s Reading List Means for Instapaper : Marco Arment: Our world changes quickly, especially on the cutting edge, and I really don’t know what’s going to happen. (Nobody does.) But the more potential scenarios I consider, the more likely it seems that Safari’s Reading List is either going to have no noticeable effect on Instapaper, or it will improve sales dramatically. Time will tell. … Read the rest here

Snook Go to the source

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let’s review these two approaches before I reveal the magical third. Sizing with px In the early days of the web, we used pixels to size our text. … Read the rest here

Snook Go to the source

One method that I’ve been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based. textarea { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; } I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn’t respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. … Read the rest here

Snook Go to the source

For years now, we’ve used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable to any project). Here is a summary of those techniques and the pitfalls of each technique: Text Indent .element-invisible { text-indent: -9999em; outline: 0; } Unfortunately, this technique doesn’t work with RTL (Right-to-Left) languages. Position Absolute and Collapsed .element-invisible { height: 0; overflow: hidden; position: absolute; } In this case, Apple’s Voice Over will not read content within an element that has zero height. Position Absolute and Offscreen .element-invisible { position: absolute; top: -999999em; left: auto; width: 1px; height: 1px; overflow:hidden; } In this case, if you have focusable content within the positioned element, the page will scroll to that element, thus creating an unsettling jump for sighted users. … Read the rest here

Eric Meyer Go to the source

As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them. So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content? … Read the rest here

Snook Go to the source

Let’s face it, testing multiple browsers on multiple systems isn’t very practical. But it’s still a fact of life for the web developer. What I’m about to show you is how I manage testing in multiple browser versions. About three years ago, I used to do all of my development on a Windows laptop. I had an old Mac G3 tower, an Ubuntu server, and a Windows 2000 server… Read the rest here

Cameron Moll Go to the source

Printopia: Print from iPad/iPhone to Any Printer Connected to Your Mac : I thought printing via iPad would work out of the box with iOS 4.2. Not so. A compatible printer is required . (Anyone have a list of those printers?) A tweet by Brian Hoff mentioned Printopia. Let me just say this: Wow. Totally impressed with how easy this was to set up. … Read the rest here

Cameron Moll Go to the source

iPhone 4 on a Glif, Manfrotto, GlideTrack, and Tripod : This is a little wacky and definitely looks like overkill. But it was a fun proof-of-concept to throw together. See the test video . Incidentally, you

Cameron Moll Go to the source

CSS3 Flexible Box Module : This morning is the first I

Snook Go to the source

On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven’t worked on a browser engine, I have my theories. In short: performance . How CSS gets evaluated With work, I’ve had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlenecks are. … Read the rest here

Eric Meyer Go to the source

At the prompting of an inquiry from a respected software vendor, I asked The Twitters for pointers to “canonical” lists of vendor-prefixed properties, values, and selectors. Here’s what the crowd sourced at me: Microsoft

Snook Go to the source

On an impulse, I decided to buy the Bluetoothed Apple Wireless keyboard for use with the iPad. I felt there were times where I would want to create content without wanting to pull out my laptop and still have the flexibility of putting the keyboard away to enjoy the usual benefits of the iPad. I’m sitting in the middle seat of a six-hour flight home and thought, "this would be a good time to give this a try"— especially with blog post ideas popping to mind. As it turns out, the experience is quite nice. … Read the rest here

Cameron Moll Go to the source

Browser UI for Photoshop : How handy is this? Create a browser window around any size document, existing or new, with this Photoshop action by Ben Shoults. Just $3 gets you individual actions for Chrome, Safari, and Firefox. And generously, Ben is donating all proceeds to the Authentic Jobs charity: water campaign for the next 5 days. … Read the rest here

Cameron Moll Go to the source

Macworld: 25 Safari Extensions : Good list. Just installed a few of them. /via Daring Fireball … Read the rest here

Cameron Moll Go to the source

LiveReload Safari Extension : Apply CSS or Javascript changes without even reloading the page. And Gregg Pollack

SimpleBits Go to the source

CSS3 flash light : Another impressive demo from simurai (Safari only right now). … Read the rest here

Cameron Moll Go to the source

Helvetify Safari Extension : Make everything Helvetica. On any page. Word. … Read the rest here