Smashing Magazine we smash you with the information that will make your life easier. really.
PDF: 70 Coding Ideas + 80 Design Tips
May 23rd, 2007 in CSS, How-To | 50 Comments
It doesn’t matter, whether you’ve been working with CSS for years or have started to learn it recently. In both cases expert ideas for CSS coding and creative approaches for professional design are extremely valuable and can turn out to be life-savers in the design process. You might never use some of them, but it’s nice to have them right in front of you, on your desk, once you need them.
Recently we’ve published 35 Designers x 5 Questions and 70 Expert Ideas For Better CSS Coding, in which we’ve tried to cover the most important coding and design issues. Afterwards we’ve received dozens of e-mails, in which you asked us to pack both articles in .pdf-files, so they can easily be printed out for quick reference. And we’ve promised to do it. In every e-mail we’ve received.
So now it’s time to keep the promise. You can download both articles as .pdf-files, print them out and use them as a handy cheat sheet for usual problems you might run into in your next projects. Feel free to spread the word to developers who might be willing to use it, but please don’t refer to .pdfs, but to this article. Respect our work. Please.
- 35 Designers x 5 Questions (830 Kb, 49 pages, .pdf)
- 70 Expert Ideas For Better CSS Coding (160 Kb, 31 pages, .pdf)
The third article of this series is on its way.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Connard (May 23rd, 2007, 10:10 pm)
Can you add some more ads on this website please? I’m sure it’s still possible.
fearlex (May 23rd, 2007, 10:13 pm)
Awesome !!!!!! Thank you for that and with the incredible WORK you guys do, i’m sure no one will dare to NOT respect your work. Every post you make is incredible and once more, thanks for that guys.. Hasta la vista :D
Quakeulf (May 23rd, 2007, 10:15 pm)
:3 :3 :3 :3 :3 >:3
Chip Cullen (May 23rd, 2007, 10:17 pm)
Rock on! Thanks for making those outstanding articles so handy!
Shaun (May 23rd, 2007, 10:37 pm)
Awesome, thanks a lot :)
Mostafa Darvishzadeh (May 23rd, 2007, 10:45 pm)
nice! i’m waiting for 3rd one!
jeason (May 23rd, 2007, 10:48 pm)
The pages in the PDF files have been printed in landscape view. Any chance of producing them in portrait so that they can be printed sensibly?
It would also be good if the PDF could be produced with working web links, but I guess the PDF printer driver that you use software may not support that.
BillyG (May 23rd, 2007, 11:32 pm)
Shouldn’t it be 70 + 35 instead of 70 + 80?
Phil From Loreauville (May 23rd, 2007, 11:35 pm)
Great job- Yet again! Not only are you getting us awesome information, but your making it easy to acquire and study via the .pdf files. Keep up the great work!
HEY! How about a forum now??
Hal! (May 23rd, 2007, 11:39 pm)
2 Words. Thank you!!!
rtriharyana (May 24th, 2007, 12:53 am)
Great!! Thanks!
Maria V (May 24th, 2007, 1:05 am)
I wanted to thank you for all the articles that you publish - it definitely made me a better expert in CSS.
BooTCaT (May 24th, 2007, 1:45 am)
Thanks pals .
Big inside , light outside .
And sure has a lot of info , organised .
its the discipline of these articles , that i love .
Noah (May 24th, 2007, 1:58 am)
Great stuff and I love it but why are they posted as PDFs? Please make them regular articles in HTML format. Reading PDFs printed in landscape form without working links is just silly. It’s like a step backward in progress.
Mark (May 24th, 2007, 4:43 am)
@Noah: The answer to your question is found in the second paragraph. :P
These articles were already in HTML form, but people requested them be published as PDF’s for quick reference. There are links to the original HTML articles also found in the second paragraph as well.
Reinier Meenhorst (May 24th, 2007, 7:01 am)
Thanks a lot guys!
criticalerror (May 24th, 2007, 7:21 am)
Thanks you for more one good tutorial or 2!!!! Somebody talk about your ads, i know that you have lots of work to do all this good suggestions so i don’t worry with the ads… Keep going!!!
THANKS!!!
Jermayn Parker (May 24th, 2007, 9:18 am)
Cool, thanks so much for that
manboo (May 24th, 2007, 9:35 am)
so cool, thanks!
shery2102 (May 24th, 2007, 1:42 pm)
thanks for your effort, appreciate it
Matt (May 24th, 2007, 1:50 pm)
Thanks again, great stuff.
As for the guy going on about the ads, try having the time to run a website as useful as this one just on your spare time with no income.
complaining about the ads in a website like this is like calling your local radio stations or tv channel and asking them to stop putting commercials between their shows. think.
Shashi Arya (May 24th, 2007, 2:14 pm)
thanks a lot
i was eagerly waiting for this
jazzle (May 24th, 2007, 7:46 pm)
Printing off these articles is simply a waste of paper.
Not because the articles are bad, only because they’re all so damn long.
Mahdi (May 25th, 2007, 10:42 pm)
thanks a lot. this is very useful
Angela (May 26th, 2007, 10:49 am)
It’s really nice…I appreciate the PDFs but why must they be oriented landscape and with such huge type? I end up using twice as much paper as just printing from the original article!
Peter (May 26th, 2007, 6:50 pm)
These .pdf’s cannot be read by Preview in Mac OS X and I’m certainly not installing 100+ MB’s of Adobe Reader bloatware ….
While you’re correcting this major flaw, you might address some of the issues mentioned in earlier comments ….
Pimp My Source (May 28th, 2007, 4:07 pm)
very handy, thanks alot! :)
Miriam (June 12th, 2007, 3:40 pm)
These PDFs are excellent, but their value is reduced because the hyperlinks don’t work. Is it possible to create PDFs with workable hyperlinks? If you don’t have Adobe Acrobat, I don’t mind PDFing it for you with preserved links. I just think it will be much more useful if people can click on the items that are mentioned.
Thanks as always for your amazing, information-packed articles!
Dmitri (August 27th, 2007, 2:59 pm)
Thank you. I was just looking for info to complet my school project and found your site.
segfaultii (September 26th, 2007, 4:05 pm)
you’re better off printing the html article with background colors on, this pdf is quite useless to print.
Rawmassen (October 13th, 2007, 6:08 pm)
Why on earth? Just PRINT the original article(s) for a much better result.
This is a usability website. To offer PDF’s in landscape with enourmous type seriously dents credibility.
chuhe (November 8th, 2007, 12:37 pm)
thanks. i need it. :D
Mume Buhi (January 9th, 2008, 5:07 pm)
In the “70 Expert Ideas For Better CSS Coding”, there is a cool tip for defining min-width in IE on page 28. I tried it and unfortunately it crashed my IE6 (always!). Did anybody try this successfully?
The original post is at Link [www.webcredible.co.uk]
Designer (February 5th, 2008, 4:59 am)
Thanks a lot. I was looking for such article. How about PDF with links?
reezluv (April 3rd, 2008, 12:48 am)
thanks for the info..really appreciated it..:D
Dave (April 11th, 2008, 12:14 pm)
and can you pull out your wallet to make a donation to offset the costs associated with, in my opinion, the best damn webmaster/designers resource on the internet.
i thought not. deal with the ads. they’re there to keep you from having to dip into your beer fund (c;