Content
CSS3 ribbon effect
torsdag 28 juli 2011 - Filed under CSS
This wrap-around banner effect contains no unneccessary markup, and uses padding + negative margins to align the content with its parent element. The illusion of depth is achieved by using the :before and :after selectors. The triangles are created with border corners, where an opaque border meets a transparent border.
As far as I know, there is no simpler way to achieve this effect. Hope you can use it!
:: Share or discuss :: 2011-07-28 :: Asgeir
Stop hiding behind products
måndag 14 mars 2011 - Filed under General
Years back, we at User Interface Engineering did a little experiment. We asked folks to search for information and items on sites they’d never been to. In advance of showing them the site, we asked them what terms they thought described what they were seeking, then we asked them to go to the site and find what the items. After they either completed the task or gave up, we went back to the site’s home page and counted the number of times the users terms were on that page.
On the sites where the users’ terms were present in the navigation, those users succeeded about 72% of the time at finding what they were seeking. Yet, on the sites that didn’t mention the users’ terms at all, those users only succeeded 6% of the time.
http://webstandardssherpa.com/reviews/stop-hiding-behind-products/
:: Share or discuss :: 2011-03-14 :: Asgeir
Single input login
måndag 25 oktober 2010 - Filed under User Interface
Amrinder Sandhu over at A Way Back has attracted a lot of attention with his single input login form. I don’t really see the huge benefit (and the gained space is really a non-issue, like several commenters have mentioned,) but it’s still refreshing to see somebody try a different take on things.
This guy, Jef Raskin, believes you should cut the username altogether:
:: Share or discuss :: 2010-10-25 :: Asgeir
Target the iPad with CSS media queries
onsdag 15 september 2010 - Filed under CSS
Media queries can still be confusing for a lot of us, and people are using them differently. When looking for a way to target the iPad specifically, I found a number of different solutions. This is the one I prefer.
Using the max-device-width lets you know that this is a device with a maximum of 1024 pixels. Then use the width property to limit the query to match the size of the iPad, which is 1024 pixels on the long side, and 768 on the short side. Obviously, if there is another tablet with the exact same specifications–and if not, there surely will be–it will display the same styles.
@media screen and (max-device-width:1024px) and (width:1024px) { /* iPad landscape styles*/ }
@media screen and (max-device-width:1024px) and (width:768px) { /* iPad portrait*/ }
I believe this is as iPad specific as it gets.
2 comments :: Share or discuss :: 2010-09-15 :: Asgeir
Google ‘Streaming’ search
tysdag 24 august 2010 - Filed under Web development
Search results updated by the key stroke. (via The Register)
1 comment :: Share or discuss :: 2010-08-24 :: Asgeir