-
UX London
UX London — Launched today - I'm really proud of the liquid semi-elastic layout, in particular the way the homepage resizes. There's also a whole bunch of HTML 5 and CSS 3 loveliness. Pair programmed with Jeremy Keith.
-
CSS Systems for writing maintainable CSS
I gave a talk this morning at BarCamp London 5 about CSS Systems, a new term that I am using to define a top-down approach to architecting a site's CSS.
A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
The talk elaborates on this concept, and also describes a number of tricks I use to preempt maintainability issues.
You can view just the slides on SlideShare, but as they might not make sense out of context you can download a PDF of the slides with notes for the complete experience.
-
Anti-aliased Rounded corners with JQuery
-
CSS layouts without using FLOAT
CSS layouts without using FLOAT — Using display:table-cell; to portray layout.
-
Katemonkey.co.uk: X-UA-Lemur-Compatible
Katemonkey.co.uk: X-UA-Lemur-Compatible — Very funny commentary on the whole IE8 debarkel ... Zeldman's blue-hatted lemur definitely is the detail that completes this parody.
-
pixelspread: Easy Drop Caps
pixelspread: Easy Drop Caps — mini tutorial on using ':first-child:first-letter' to do CSS progressively enhanced drop caps.
-
KilianValkhof.com » Blog Archive » (Almost) Cross browser text-shadow
KilianValkhof.com » Blog Archive » (Almost) Cross browser text-shadow — Text shadowing using CSS2 and 3 techniques with those IE filters fo fill in the gaps.
-
pixelspread: List Based Calendar
pixelspread: List Based Calendar — Cute list based calender, using the same markup but different CSS to display two different calender views. It would be even better if it sported hevent though :).
-
Geek Trends: 15 Footers with great usability by Pop Upon Magazine
Geek Trends: 15 Footers with great usability by Pop Upon Magazine — The art of footer design.
-
Lets talk about x baby
Lets talk about x baby — Greater flexibility on the horizon for the typographer in you.
-
Test of System Color Values defined in CSS 2
Test of System Color Values defined in CSS 2 — Old resource I know, but I was having a dig round in Firefox's browser default CSS the other day and I was reminded of thid.
-
Understanding CSS Colour modes
Understanding CSS Colour modes — in both CSS2.1 and CSS3, particularly exciting are RGBa and HSLa formats supported by firefox 3 and safari 3.
-
Posh CSS
Posh CSS — interesting looking blog, havn't had chance to check out the archives yet.
-
Genfavicon. Free Online Favicon Generator. Icon Generator.
Genfavicon. Free Online Favicon Generator. Icon Generator. — nice idea, its normally a bit of a faff to make favicons (unless you are using the gimp :p ).
-
Vitamin Features » Ensuring your HTML emails look great and get delivered
Vitamin Features » Ensuring your HTML emails look great and get delivered — Guide to HTML email creation, gosh it still sucks, thank goodness for the email standards project!
-
Wufoo · Theme Gallery - Custom CSS Form Designs
Wufoo · Theme Gallery - Custom CSS Form Designs — Yay for the new wufoo gallery, nice interface for fast creation of pretty forms.
-
Email Standards Project
Email Standards Project — working with email client developers and the design community to improve web standards support and accessibility in email.
-
Print style sheets - a photoset on Flickr
Print style sheets - a photoset on Flickr — Jeremy's printstyles photoset.
-
DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer
DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer — I have yet to play with this but it is effectively a 'firebug for ie' - Thanks Dan Webb for pointing me at this one.
-
Single Line CSS // Ordered List by Steve Smith
Single Line CSS // Ordered List by Steve Smith — We all have our personal preference, I believe that using CSSEdit (my new favorite css editor) negates the need for this particular technique.
-
Juicy Studio: Screen Readers and display:none
Juicy Studio: Screen Readers and display:none — A recent article describing some interesting behavior with screen readers, anchor elements and display:none.
-
Grid Layout
Grid Layout — keybord co-ordinated grid layout toggle inspired by one of Jon Hicks's tweets.
-
Sangeeta asks the CSS Guy how to create a table like Orbitz's airline flights scheduling and pricing matrix (Ask the CSS Guy)
Sangeeta asks the CSS Guy how to create a table like Orbitz's airline flights scheduling and pricing matrix (Ask the CSS Guy) — Using tables cunningly.
-
Styling File Inputs with CSS and the DOM // ShaunInman.com
Styling File Inputs with CSS and the DOM // ShaunInman.com — a little bit hacky but pretty smart.
-
Blueprints are not final
Blueprints are not final — I agree with this entirely.
-
Particletree » Rediscovering the Button Element
Particletree » Rediscovering the Button Element — Beautiful use of the button tag styled cross browser as used in Wufoo, with the possablility of using the same styles for links.
-
Nifty Corners Layout
Nifty Corners Layout — New version of Nifty Corners ... still using the b tag with inline styles though I see.
-
Stu Nicholls | CSSplay | Mini tabbed pages
Stu Nicholls | CSSplay | Mini tabbed pages — Cute, but I really dont like this type of user interface, where hoverover has an action that prompts a large change in form, its too easy to do by accident.
-
Em Calculator
Em Calculator — cute.
-
CSS3 Preview - CSS3 . info
CSS3 Preview - CSS3 . info — glimpsing into the future of CSS.
-
Why “Conditional Comments” are bad, repeat: bad – Jens Meiert
Why “Conditional Comments” are bad, repeat: bad – Jens Meiert — I disagree with this article, at some point I will explain in more detail why.
-
Coding Horror: Stylesheets for Print and Handheld
Coding Horror: Stylesheets for Print and Handheld — printing we know, but this article tells you how to get set up with handheld browser emulators.
-
isnoop.net CSS Superdouche
isnoop.net CSS Superdouche — not a greatly informative name but this is a compressor for CSS, might come in handy.
-
Upcoming CSS3 support in Opera - Slightly ajar - by David Storey
Upcoming CSS3 support in Opera - Slightly ajar - by David Storey — CSS support in Opera just gets better - roll on CSS3!
-
SitePoint Blogs » Microsoft Breaks HTML Email Rendering in Outlook 2007
SitePoint Blogs » Microsoft Breaks HTML Email Rendering in Outlook 2007 — REALLY bad news if you are forced to make HTML emails, if making them wasnt bad enough this will top it off.
-
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine — "53 CSS-based techniques you should always have ready to hand if you develop web-sites.".
-
Stu Nicholls | CSSplay | Experiments with cascading style sheets
Stu Nicholls | CSSplay | Experiments with cascading style sheets — messing with css in interesting ways because you can.
-
7 Habits of a Highly Successful In-house Web Designer | Standardzilla
7 Habits of a Highly Successful In-house Web Designer | Standardzilla — ... but also good tips for any of us in the industry.
-
c THE dot.de cssutils - CSS library for Python
c THE dot.de cssutils - CSS library for Python — A Python package to parse and build CSS Cascading Style Sheets. Partly implements the DOM Level 2 Style Stylesheets and CSS interface - very excititng!
-
Chris Wilson, Internet Explorer 7 and CSS 2.1 compliance
Chris Wilson, Internet Explorer 7 and CSS 2.1 compliance — "Microsoft is still disconnected from web authors' demands, needs and perspective.".
-
YUI: CSS Grid Builder
YUI: CSS Grid Builder — Very interesting CSS addition from the Yahoo User Interface team. Im not so sure about the nonsemantic class names but if standardised layouts lead to more maintainable code then maybe it isnt so bad.
-
Vitamin Features » Create cross browser vector graphics
-
DerekAllard.com : Conditionally Sticky Sidebar
-
Shape Shed - Journal - Overlapping tabbed navigation in CSS
Shape Shed - Journal - Overlapping tabbed navigation in CSS — .
-
Reliably attaching CSS
-
Rich text editor
Rich text editor — .
-
On having layout — the concept of hasLayout in IE/Win
-
Clever use of the materials at hand!
Inspired by the recent Daily WTF article, some colleagues of mine developed an ingenious solution to a server timeout problem.
A connection to a server would time out after 2 minutes of inactivity, to counteract this whilst an application was being installed they attached an optical mouse to a rotating fan to simulate movement. Genius!
-
iStock photo contributor application
It was starting to get a little depressing. I had tried unsuccessfully five times to apply as an iStock photo contributor. You know how it is, friends and family tell you they like your photos; eventually you begin to think that hey, that photo wasn't bad.
At some point you want to release your creativity onto the world not necessarily to make money, for me it was more about validation. My boss told me that I should try and apply, so I did.
If I had all my photos rejected - you need three accepted samples to become approved - I may not have persevered such as I did. As it happened my first photo of the Roman Snail was accepted with no explanation, just 'ok'. That was fine, a small note of encouragement was enough to spur me on.
I was initially a little worried about the licencing issues, since I am a big fan of theCreative Commons even for all my code and creative works. This however did fit together since all my photos are released under a noncommercial share and share alike type thing, which means anyone can do whatever they like to my photos so long as they do not make money out of it and that they attribute me and distribute their work in the same licence. iStock allows me to sell the commercial use of these photos.
The most common reasns for rejection were noise and compression, which when you have a point and shoot camera such as mine (good though the Canon is) is pretty hard to avoid, especially in low light levels. Compression I've since reduced by knocking up my camera to the highest quality and largest size photos, with artifacting I have been trying not to use my digital zoom or digital macro which are pretty dreadful for that sometimes.
The second photo accepted (once I rotated it and resubmitted it after it was rejected for being the wrong way up) was a photo I took a while ago on my old camera of my little sister's lettuce seedlings coming up in spring.
I got a couple of 'nice but show us something more interesting' comments which were more encouraging, as well as unfortunately some 'bad composition' ones. I now permanently have grid lines turned on as a guide on my camera.
It is nice that with each rejection they supply the reason and a link to the article helping you overcome the problem. When you look through your photos to find something appropriate it's amazing how many of them just are not big enough (1200 x 1600 minimum) or have something subtly wrong with them or that 'just aren't stock'. Simon has been helping me with phrases such as "what you have to think about is 'what type of PowerPoint presentation could this photo be used in'".
This weekend I was out exploring the Cotswolds with my family and I took this photo of a lone leaf which was the last photo of mine to be accepted by iStock.
Having tried and failed 5 times now (though it feels like much more!), it is so satisfying just to be accepted. I have noticed that for an application, a close up photo of something interesting seams to be the way to go.
Purely for your continued education (not as fuel to mock me with) here is a list of my rejections.
- Rust: Unfortunately this image contains undue artifacts when viewed at full size. Artifacts are most commonly caused by over-compression but may be a result of other factors. Be sure your camera is at its highest quality setting and remember to also save your JPEGs at the highest possible quality (level 12). For more information about over-compression or artifacting.
- Commute: Sorry, but we found the overall composition of this file lacking impact and therefore not suitable as stock, if you have anything else you can show us we would love to see it. For more information on composition and impact. For more information on Suitable Stock Photography
- Palm tree: Photo shows unacceptable levels of chromatic aberration, also referred to as 'purple fringing'. For more information on this
- Leaves: Please show us something more interesting
- Window: Sorry, but we found the overall composition of this file lacking impact and therefore not suitable as stock, if you have anything a little more interesting you can show us we would love to see it. For more information on composition and impact. For more information on Suitable Stock Photography
- Flower: We're not really accepting many more flower photographs right now. If you have anything else you can show us, We would love to see it.
- Thorns: We could not find a clear center focal point and found this image to be out of focus. Try using a tripod at slower shutter speeds, even intentional blurs or shallow DOF (depth of filed) should have a point of focus. For more information about focus
-
A List Apart: Super-Easy Blendy Backgrounds
-
How to structure large CSS files - Friendly Bit
-
Wake up and smell the IE7!
Wake up and smell the IE7! — guide to debugging in ie7.
-
CSS - Fun with tables
-
Details on our CSS changes for IE7
-
Inline image quotes
-
CSS-Based Forms: Modern Solutions
CSS-Based Forms: Modern Solutions — inspiration for forms.
-
Playing with CSS selectors
Playing with CSS selectors — really cool selector demo.
-
Webdev Entry - Cody Lindley: IE 7 Supports More CSS Selectors, Whip-e-dee-doo-da
Webdev Entry - Cody Lindley: IE 7 Supports More CSS Selectors, Whip-e-dee-doo-da — .
-
Newly Supported CSS Selectors in IE7
-
Getting Fieldset Backgrounds and Legends to Behave in IE - Matt Heerema : Web Design
Getting Fieldset Backgrounds and Legends to Behave in IE - Matt Heerema : Web Design — .
-
CSS: The Definitive Guide, 3rd Edition
-
Onload image fades without Flash | clagnut/sandbox
-
Particletree » Dynamic CSS Changes
Particletree » Dynamic CSS Changes — alternate stylesheets in js.
-
Five Simple Steps to designing with colour : Journal : Mark Boulton
Five Simple Steps to designing with colour : Journal : Mark Boulton — .
-
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution — .
-
A beginners guide to CSS
-
Overview | Accessibility in the User-Centered Design Process
Overview | Accessibility in the User-Centered Design Process — .
-
centricle : css filters (css hacks)
centricle : css filters (css hacks) — never ever ever use these ...... but if you have to this is where they are.
-
Markup Maker - Takes a simple list of page ids that you enter and converts it to a valid XHTML document | Developer Tools | Accessify
-
Order Now Hand-coded Markup for your Design by PSD to HTML service, PSD2HTML.com
Order Now Hand-coded Markup for your Design by PSD to HTML service, PSD2HTML.com — .
-
Clearance // ShaunInman.com
-
CSS: Specificity Wars | And all that Malarkey
CSS: Specificity Wars | And all that Malarkey — css selectors Specificity.
-
MeasureIt - Firefox ruler extension for web developers
-
pebbleRoad: Creating & Maintaining a Web Style Guide
-
Design Detector
Design Detector — .
-
Thierry Image Placement
-
TIP method
TIP method — interesting ...
-
centricle : css filters (css hacks)
-
Happy Cog Studios: Zeldman Video Keynote
-
bobbyvandersluis.com | Ten good practices for writing JavaScript in 2005
bobbyvandersluis.com | Ten good practices for writing JavaScript in 2005 — .
-
Unobtrusive Javascript
-
Vitamin - A resource for web developers, designers and entrepreneurs
Vitamin - A resource for web developers, designers and entrepreneurs — .
-
CSS Filters - CSS-only Filters Summary (dithered.com)
CSS Filters - CSS-only Filters Summary (dithered.com) — css hacks.
-
Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks
-
A Basic Primer in Using S5
-
clagnut sandbox
clagnut sandbox — .
-
Nice titles
Nice titles — .
-
deconcept › FlashObject: Javascript Flash detection and embed script
deconcept › FlashObject: Javascript Flash detection and embed script — .
-
Rounded Corners with CSS and JavaScript [JavaScript & DHTML Tutorials]
Rounded Corners with CSS and JavaScript [JavaScript & DHTML Tutorials] — .
-
Fizbang Web Design » How to Improve Your Logo
-
A List Apart: Articles: Dynamic Text Replacement
-
Download details: Internet Explorer Developer Toolbar Beta
Download details: Internet Explorer Developer Toolbar Beta — finally! the quest is over.
-
Efficient CSS with shorthand properties
Efficient CSS with shorthand properties — another shorthand article.
-
CSS shorthand properties - an introduction
CSS shorthand properties - an introduction — Useful if you are absolutly intent on using shorthand css.
-
Simple Rounded Corner CSS Boxes
Simple Rounded Corner CSS Boxes — good but not hugely semantic.
-
A List Apart: Articles: In Search of the Holy Grail
-
Unobtrusive Javascript
-
Simon Willison: Executing JavaScript on page load
-
Enhancing Structural Markup with JavaScript [JavaScript & DHTML Tutorials]
Enhancing Structural Markup with JavaScript [JavaScript & DHTML Tutorials] — .
-
Top 10 custom JavaScript functions of all time
-
Form widgets - A library of nice looking DHTML(dynamic HTML) scripts - DHTMLgoodies.com
Form widgets - A library of nice looking DHTML(dynamic HTML) scripts - DHTMLgoodies.com — .
-
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution — .
-
mezzoblue § A Bit of Transparency
-
Accessible interdependent dropdowns
-
Code_Punk - Beginning JavaScript Lesson 25 - Dynamic CSS Using "getElementById"
Code_Punk - Beginning JavaScript Lesson 25 - Dynamic CSS Using "getElementById" — .
-
Samples using DOM 1, DOM 2, CSS and JS
-
UrbanGiraffe » WordPress Theme Guide
-
Rasmus' 30 second AJAX Tutorial - lunatechian (lunatech-ian)
Rasmus' 30 second AJAX Tutorial - lunatechian (lunatech-ian) — .
-
ColourMod » DHTML Colour Picker
ColourMod » DHTML Colour Picker — exceeeedingly cool colour picker.
-
CSS for All Browsers (Browser-Specifics)
-
CollyLogic: Image fades for overflow: auto
-
Ten more CSS tricks you may not know
-
doxdesk.com: software: minmax.js
-
Paged media
Paged media — .
-
Selectors
Selectors — Using the correct selectors eliminates un-needed ID's and classes!
-
Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification
Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification — .
116 items tagged "css"
Look at "css" on del.icio.us, Flickr or Technorati