background preloader

Essential bookmarks for web-designers and webdevelopers

Essential bookmarks for web-designers and webdevelopers
For more useful and inspiring content related to design and web-development visit Smashing Magazine — a magazine dedicated to web design and development. If you think this web-project is useful, please consider making a donation using the button "Donate via PayPal". Support the further development of the project! updated/SaturdayJuly26th Although the "pocket edition" of Web-Dev-Bookmarks wasn't officially released one week ego, it has already been tagged, linked and bookmarked by thousands of users. updated/MondaySeptember19th Since the project "Web-Dev-Bookmarks" was slashdotted, digged, furled, mentioned on Del.icio.us, Stumble Upon, 456bereastreet, CSS Beauty, Lifehacker, remarked by Cameron Moll, Jeffrey Zeldman and linked on 1688 pages, it was literally overflooded with visitors and traffic. Over 31,000 users came across "Web-Dev-Bookmarks" over the last 7 weeks, more than 130,000 hits were made. Every donation counts. Please support the project (USD) Please support the project (EUR)

Bindows™ Home Colour Contrast Analyser Colour Contrast The old Accessibility Evaluation and Repair Tools (AERT) suggested algorithm for determining colour contrast now directs here. The AERT algorithm was never a recommendation, and WCAG 2.0's luminosity contrast algorithm is recommended instead. Success Criterion 1.4.3 of WCAG 2.0 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Analyse Luminosity Contrast Ratio

del.icio.us pioneers Advanced Selectors | New ways to style elements in CSS2 and CSS3 Path // → → ADVANCED SELECTORS Selectors are the way you reference the parts of your HTML documents with the styles you want to have applied to them. CSS2 and CSS3 brought with them a host of new selector specifications, designed to allow greater access to the elements and parts of those elements that make up each and every webpage. These new syntax rules allow greater flexibility and accuracy in defining exactly which parts of your page get styled. This page was last updated on 2012-08-21 Browser Compatibility Note: » Firefox, » Mozilla, IE5/Mac, NN6, Opera 5 and » Safari all support the CSS2 selectors. They are therefore more suited to adding finishing touches for browsers that support them — small design finesses and useful but non-critical visual feedback nuances. Combinators The advanced combinators allow you to define styles that are based on a more complex rule that will be applied to more specific elements. This rule will affect all em elements inside paragraphs. Child Combinator

An Overview of Current CSS Layout Techniques Introduction Learning how to use CSS for creating web sites is a pain in the ass. It’s not easy and it will hurt you. Over the last several years I’ve been asked by many web designers and developers about how to best get started with building web sites using CSS and standards. Usually, I’ll just send them 300 links and wish them a lot of luck. When it comes to understanding the world of standards based design, you have to think medieval. There are few manuscripts to guide the way and the few monasteries dedicated to the craft are mostly filled with men. That said this overview will cover the current strategies used around the web to build the foundation of every CSS-based web site: layouts. They’re Just a Bunch of Boxes There is a fierce and complicated history and dialectic to follow when it comes to the evolution of the XHTML and CSS architectures. 1. The layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute). 2. Fixed vs.

Ajax Tabs Content script Note: Updated April 8th, 08 to version 2.2. Adds support for expanding a tab via a link on another page and using a URL parameter. Only .js file changed from v2.1 Description: This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. Here's a quick outline of the script features: Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax. As you can see, this Ajax Tabs Content script was designed to be much more than look pretty, but usable. Reminder: Due to security limitations, the external pages loaded via each tab using Ajax must reside on the same domain as the script itself. Demos: Demo #1- Basic implementation - First tab shows default, inline content directly added inside container DIV - 2nd and 3rd tabs show external pages fetched via Ajax - 4th tab shows an external page fetched via IFRAME Demo #2- Expanding of arbitrary DIVs on the page enabled

20 Rules Of Smart And Successful Web-development 20 Rules Of Smart And Successful Web-development » Mar 20, 03:45 PM 12 months. 12 months already… A year ago I have started to improve my web-development skills and to share the knowledge I had with the visitors of my blog. Most projects and articles I’ve created or written are still popular in the Net – The Web-Developer’s Handbook has become one of the most popular web-sites since the beginning of social tagging, it was digged, slashdotted (twice), bookmarked by over 8000 + 3770 delicious users; the articles about my projects and articles appeared on SiteProNews, Lifehacker, Zeldman.com, 456bereastreet, mezzoblue, stopdesign and 274.000 other web-pages. The funny thing is that as I was just realizing my ideas in the Web, I didn’t think about getting the page popular, tweaking its position in search engines or finding potential clients on the Web. 1. Denny Carl from Devblog.de has placed Google Adsense Text Block in the right column.

Automatic HTML table formatting with JavaScript This article is also available in SPANISH A member on the Killersites.com Forum mentioned in a post how he was working with (or trying to work with) an article he recently read by a guy named David F. Miller. Basically, the article had some interesting JavaScript code that automatically changed the background color of every 2nd row in an HTML table. To make the table look good To make the table information easier to read You can see an example here. I want to point out a couple of things: This is for tables that are being used to present data. Because of that (the PHP thing), when I first took a look at the article, I did not pay much attention. So I got the JavaScript code, and put it to use on my page. I could have taken the easy way out, and just manually colored the many table rows. I got out my nerd-cap and started banging away at the JavaScript and CSS code that made this nifty script work. That being said, you are free to go into the code and check it out for yourself. 2.

Natural Docs Where To Find Great Free Photographs And Visuals 70 Expert Ideas For Better CSS Coding Advertisement CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them. And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. 1.1. 1.2. 1.3. Keep containers to a minimum.

Related: