Essential bookmarks for web designers and web developers The project 'Essential bookmarks for web-designers and web-developers', previously updated on this page, has a new url ( a new design, a new hierarchical structure and, of course, new web-dev-resources. The reason for changing the basic concept of this project was a huge number of suggestions and links, which have overflooded my mailbox recently. Over the last few days, a new project was created and updated. The old version (which also will be updated in future) is still available on the page "Bookmarks: Maxi edition". Please update your bookmarks! How did it begin? This page is actualized once a week. This list was created with the help of many web designers and enthusiasts from Germany and United States, but mostly it was created by myself. Thanks!
Web Page Analyzer - free website optimization tool website speed test check website performance report from web site optimization Free Website Performance Tool and Web Page Speed Analysis Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates the latest best practices from Website Optimization Secrets, web page size guidelines and trends, and web site optimization techniques into its recommendations. Help Speed Up the Web Tired of waiting for slow web sites? <a href=" Page Analyzer</a> - Free web page analysis tool calculates page size, composition, and download time. Consider optimizing your site - with our Website Optimization Secrets book, contacting us about our optimization services, or our Speed Tweak tutorials. Related Website Optimization Services Version History
27 Must-Have Starter Kits For Web Designers Starter kits are great timesavers for web designers and they are particularly useful for those who often create mock-ups for project pitching on daily basis. If you are a designer-cum-programmer think of it as your code snippets So what’s in a starter kit? We think it varies – depending on what each designer routinely worked with. For GUI designers, keeping a copy of form elements (buttons, checkboxes, tab, drop down menus, etc) helps speed up the process of creating screens and layouts; on the other hand, browser (IE, Firefox Safari) templates with web safe area keep web designers reminded how/where they should prioritize their contents. Experienced designers will usually customize and keep a personal version of starter kit, some might have few too! In today’s article, we attempt to show you some of the best design starter kit we’ve come to know. GUI, Form Elements and Web Components Yahoo’s Design Stencil Kit Probably one of the most complete kit for designers. Browser Screens Templates
List of Really Useful Tools for CSS Developers Regardless of size and scope of your project, CSS development process can take quite a lot of time. Even if you are an experienced CSS developer; having good set of tools at your disposal can drastically improve your productivity. W3Avenue has compiled a list of really useful CSS tools that will help you increase both your productivity and knowledge. We have categorized these tools under various categories to help you easily find the right tools for your needs. Layouts CSS Layout Generator This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. CSS Frameworks Boks Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Fonts Typetester The Typetester is an online application for comparison of the fonts for the screen. Colors Sprites Forms UI Components Text Wrappers Analysis & Debugging Convertors Maintenance
The Best Social Media Icons All In One Place 464 shares 8 Free & Useful Minimal Icon Sets Icons are certainly a very important element of a design. Read More 916 shares 8 Beautiful and Free Flat Icon Sets For the past few years in web design, we’ve noticed a trend in moving toward simplicity and minimalism. The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.
Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery) Posted by Maggie on 07/01/2009 Topics: accessibility css javascript jQuery progressive enhancement ui design visual design web standards Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers. In the past few years web application interface designs have evolved from flat metal gray to having rich color palettes and dimensional background images thanks to the adoption of web standards and advanced CSS techniques. When considering how to build our own customized input script, we set out to do as little as possible — on their own, checkboxes and radio buttons capture data and display feedback, and we wanted to use that native functionality and not reinvent it using JavaScript. Demo jQuery CustomInput plugin demo by Filament Group Markup <form><fieldset><legend>Which genres do you like? Styles Script Usage
Beautiful Slide Out Navigation Revised After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order […] View demoDownload source After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The spans will carry the names of your menu items. 2. First, we define the CSS properties for the list:
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript
Get down! How to keep footers at the bottom of the page by Matthew James Taylor on 10 November 2007 When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done. When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal. There is only one limitation You must set the height of the footer div to something other than auto. So how does it work? The HTML div structure The CSS