15 Free Online Tools for Web Designers on a Budget
About two years ago when I became a full time freelance web designer, I made it a point to operate with little overhead. Even though I was confident I could make it as a freelancer, there was some fear that things might not go as planned. Because of this, I didn’t go out and spend lots of money on equipment and expensive software. My focus was on being frugal and saving money where I could. One way I was able to do this was using free online tools or web apps to perform my everyday tasks as a web designer. Here are 15 free online tools that you will find very useful. Pixlr Pixlr is a powerful online image editing application. Google Analytics Google Analytics is probably the most popular free analytics tool available. Typetester The Typetester is an online application for comparison of the fonts for the screen. CSS Type Set CSS Type Set allows you to visually and interactively style text and it generates the CSS. net2ftp net2ftp gives you a fully featured ftp client within your browser. Kuler
960 Grid System
The 1Kb CSS Grid, Part 1 « Usability Post
Tyler builds websites and web apps for Vyre in London. CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging. Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). 12 Columns, 960 pixels The basic configuration is a 12 column grid system spread out over 960 pixels. The CSS Lets jump right in an have a look at the CSS. In addition to the column widths, there are only two other classes defined: ‘column’ and ‘row’. The HTML The HTML is as minimal as the CSS. Take it for a spin That wasn’t so painful, now was it? Tune in for part 2 and discover how to use the grid to streamline your page templates for content management.
Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable
At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated :-)). Below you will find more than 20 resources that you can use in sketching phase of application development. And, of course, don’t forget to share your wireframes on I ♥ wireframes :-) Printable sketch templates for websites These are some pretty good, printable sketch templates for website design. Browser Sketch Pad (PDF) Browser Sketch Pad by Design Commission — see original source 960 grid template 960 grid template by Nathan Smith — see original source 960 Sketch PDF template Graph paper Graph paper by Konigi — see original source Paper browser Paper browser by Rain Creative Lab — see original source MBTI sketching paper for ideation Sketching grid paper
Home - oocss - GitHub
Fluid Grids
Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1 Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” Of course, when I was coding the site, I didn’t have the luxury of writing a diatribe on the evils of fixed-width design. As it turns out, it’s simply a matter of context. Do I really have to thank IE for this? With ems, it’s easily done.
Learn CSS Positioning in Ten Steps: position static relative abs
1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
Blog Archive » Object Oriented CSS, Grids on Github
How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. If you didn’t attend my talk, you are probably asking yourself “what in the world is OO-CSS?” Object Oriented CSS: Two main principles 1. I’m writing a framework to demonstrate the technique, but more than anything, Object Oriented CSS is a different way of approaching CSS and the cascade. The answer, for most sites, is that it grows out of control and becomes an unmaintainable tangle of spaghetti code. Current methods for writing CSS require expert level ability just to get started. We don’t trust each others code What not to do #myModule h2{...} Object Oriented CSS Grids on github What’s up next?
PAGE DESIGN: Design grids for Web pages
Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user’s input and system activity. When used inappropriately or inconsistently, the typographic controls and graphics of web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase users’ confidence in your site (fig. 7.23). The business logic of design grids and templates Regular page grids—and the module and program efficiency and consistency they create—are the core element of cost-effective design programs for larger enterprises.
