Best of August 2007

Advertisement

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days – an overview of web-sites you shouldn’t have missed in August 2007.

All images can be clicked and lead to the sites from which the screenshots have been taken. We’ve missed something? Let us know in the comments!

Tools, Web-Services

  • RegexPal: JavaScript Regex Tester1
    RegexPal helps you to test regular expressions; you can insert any text you like and check which parts of the text will be matched by the expression you’ve built. Matched parts of the texts are highlighted. You might want to check the Regular Expressions Library2 and Wikipedia: Regular Expression3 as well: everything you’d like to know about regular expressions. With numerous examples and tutorials.

    RegexPal4

  • BuiltWith.com – Web Technology Profiler5
    BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves. Profiles includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian).

    BuiltWith6

  • Google Gears (beta)7
    From now on web-applications can also be used offline. On this year’s Developer’s Convention Google released a browser extension that enables web applications to provide offline functionality. Among other things users of such applications can download the data from the Web (e.g. files stored in Gmail), access and change them locally via asynchronous JavaScript-queries and sync them once you’re online. Users can not only modify their data, but also perform “usual” activities such as sharing and tagging. The extension (700 Kb) is now available for Firefox 1.5+ and Internet Explorer 6.0+.

    Google Gears8

  • Google Web Toolkit 1.49
    Google released the first Release-Version of its open source Java software development framework GWT. It is supposed to make writing AJAX applications like Google Maps and Gmail easy for developers without keeping an eye on subtle browser incompatibilities between web browsers and platforms.

    Google Web Toolkit10

  • YAML Builder11
    An elegant tool by Dirk Jesse for visual layout development of YAML1312-based CSS-layouts. You can choose a Doctype, choose the basic layout elements (#header, #footer, …), choose the number of content columns as well as preferred column order, set the layout and column widths, drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout. YAML1312 (“Yet Another Multicolumn Layout”) is an (X)HTML/CSS framework for creating modern and flexible floated layouts.

    YAML Builder14

  • Deliverables That Work: Design Description Documents (DDD)15
    You know those things you’re supposed to deliver to a client during a big project — use cases, wireframes, etc.? Robert Hoekman Jr. does and he shares the tool he uses to package them all — the DDD. Wireframes, the schematic presentation of interaction, can be used to display the model behind the sketch in a more effective way. As a sidebar or infobox, they can give your clients a precise idea of the site functionality and its structure. This article presents some of such Wireframes for free download (for Apple iWork). A PowerPoint-template is also included.

    DDD16

  • Stripemania – Striped background generator17
    A simple and free tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can also add color gradient effect for all of your stripes.

    Stripemania18

CSS-Techniques, (X)HTML, PHP

  • CSS: The right sprite19
    There are many ways of using a image sprite20. Most ways use a background-image-property that can be moved using CSS. The problem is that this method results in many CSS definitions that are hard to manage. Other approach: bypassing the background-image in CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. Foreground Sprites21: the same idea, more detailed explanation.
  • purple-include
    A client-side JavaScript library that allows you to do client-side transclusions (transcluding content not hosted on your web server) which means that you can include and display fragments of one HTML page in another without copying and pasting any content. XPath22, JavaScript and PHP in use.
  • How to create VISTA style toolbar with CSS23
    Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.

    Vista CSS Toolbar24

  • Creating a table with dynamically highlighted columns25
    CrazyEgg Price Section deconstructed. “When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.” Example26 (select one of the option to see the effect).

    CSS Table27

  • A Stripe of List Style Inspiration28
    A different type of list and navbar styling. As stripes.

    CSS List Style29

  • A CSS styled table version 230
    Veerle Pieters explains how to create an accessible and user-friendly table with CSS-styling. Follow-up of the first part31. The result32.

    CSS Styled Table33

  • Fade Out Bottom34
    This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.

    Fade Out Bottom35

  • Javascript Progress / Percentage Bar with CSS36
    Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. A simple Javascript+CSS based Percentage Bar / Progress Bar.

    ProgressBar37

  • Professional horizontal menus38
    A new set of CSS-based navigation menus by Stu Nicholls.

CSS Tools and Services

  • XRAY39
    XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model, selector hierarchy in DOM and properties for any element on any web page. The new version support also Internet Explorer 7.

    Xray40

  • pzImageCombine
    Combining multiple images in a single image and navigate in the image matrix with the background-position-property isn’t a new CSS-technique. This Desktop-Tool, however, automates the generation of the images; just select a folder and all images included in this folder will be combined “on the fly” in a new image. An alternative tool41 generates the master-image online — additionally it also delivers the background-position of images-”parts”.
  • Designing Your CSS with A Grid Overlay
    This tutorial explains how you can create grid overlay with Adobe Fireworks and/or Adobe Photoshop.
  • CSS Sculptor42
    Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$.
  • Tripoli – a CSS standard for HTML rendering43
    “Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.” A set of Default-CSS-files is supposed to give you a profound foundation for cross-browser compatible CSS-based designs. All default-values – including dozens of elements – tables, lists, typography, but also headers (h1 – h6), abbreviations, citations, quotes and forms are selected to enable an optimal legibility and well-structured text presentation.

    Tripoli44

  • Blueprint Grid CSS Generator45
    This tool will help you generate more flexible versions of Blueprint46‘s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework – a new “to-become-standard” in grid-based design approach.
  • Blueprint CSS47

    Blueprint CSS Generator48

References, Tutorials, Tips

Ajax, Javascript

  • Best Practices in Javascript Library Design67
    A Talk by John Resig, the developer of jQuery JavaScript-Library, about the best practices and techniques for development of robust, reusable and cross-browser JavaScript-Libraries.
  • Accessible News Slider68
    Accessible News Slider as JavaScript-Plugin for jQuery.

    Accessible News Slider69

  • JavaScript Tips for Novices, Acolytes, and Gurus70
    With roll-overs, pop-ups, and menus either solved or relegated to CSS behaviors, XMLHttpRequests have made JavaScript once again a language of innovation. This article is meant to offer a tidbit of idiomatic advice for people who know JavaScript or want to know JavaScript coming from Java, C, Python, Perl, or PHP. JavaScript for beginners: an overview of basic rules and syntax.
  • AjaxView71
    The goal of the Ajax View project is to improve developer’s visibility into and control over their web applications’ behaviors on end-user’s desktops. The Ajax View approach is to insert a server-side proxy (or web server plugin) in-between the web server machines and the end-user’s browser. This proxy captures the web application’s JavaScript code as it is being sent to a browser and rewrites the code to insert extra instrumentation code. The injected instrumentation code runs with the rest of the web application inside the end-user’s browser and can capture user interaction in a more precise and effective way.
  • DatePicker using Prototype and Scriptaculous
    An unobtrusive and flexible date picker widget which uses Prototype and Scriptaculous libraries. 52 More Calendars and Date Picker Designs72.

    Date Picker

    Date Picker73

  • ModalBox74
    ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional pop-ups and page reloads.

    Modalbox75

  • LiveValidation – Validation as you type76
    A small open source javascript library built for giving users real-time validation information as they fill out forms. It also can serve as a sophisticated validation library for any validations you need to make elsewhere in your JavaScript.

    Live Validation77

Web-Typography

  • Web typography: bottom margins of paragraphs and lists78
    A perfect vertical alignment of site elements is the key to the quality of web-typography. Creating the perfect vertical space on the screen is easy. With a few lines of CSS, you’ll have a great typography foundation for your web site. Marko Drugonic shows how it can be done.

Articles and Publications

  • 6 Keys to Understanding Modern CSS-based Layouts79
    Jonathan Snook about 6 important aspects of CSS-designs, among them – Box Model80, Floats81, Sizing Using EMs82, Image Replacement83 and CSS Sprites84.
  • How to use Photoshop to create Product Box85
    A simple Step-by-step-Tutorial shows how to create 3D-product boxes in Adobe Photoshop.

    Product Boxes86

  • New Minimalism in web interface design87
    “We chose 24 moments of minimalism web interface design in the last decade, selected several quotes to easily define the minimalism and represent some of the best new minimalism websites.” An extensive article about simplicity and minimalism in modern Web- and Interface Design with numerous examples, typical design schemes and further references.

    Minimalism88

  • Better Writing Through Design89
    It’s one thing to write copy that fits on a website. It’s quite another to write copy that fits in with a website. You wouldn’t try to force an incongruous visual element into a carefully considered design. Same goes for written content. Tips, suggestions and ideas for better writing through design.
  • Designing the “Future Of” Sites 90
    An insigth in the workflow of experts is always usefuls and offers professional Know-How. In this article Ryan Nichols documents his decisions in design process of the “Future Of”-sites (conferences “The Future of Web Apps91“, “The Future of Web Design92” and “The Future of Online Advertising93“).

    Future Of Web Sites94

    Future Of Web Sites95

    Future Of Web Sites96

  • Design by Metaphor97
    If a client says he wants his new auction site to be “like eBay,” what does that mean? An artist hears “It has a tacky color scheme.” A developer hears “It’s scalable to 20 million users.” A user hears “It has feedback ratings on all sellers.” An article about the way to come behind the ideas your clients have, the power of metaphors and its effective using in practice.
  • Put Your Content in My Pocket98
    Mobile Web is here, particularly since iPhone is here. Many of the ideas in this article can be useful and effective with other mobile devices. The processing power of these devices will continue to increase, bringing an end to a “dumbed down” mobile web. The iPhone may be just the beginning of an exciting new chapter in the storied life of HTML. The second part99.
  • Ten: The Next Big Thing100
    CSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. Håkon Wium Lie, the CSS-Evangelist who has proposed the idea of Cascading Stylesheets to W3C, motivates online-community for further changes. His proposal: instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images. This can be done via media queries101.
  • The Ultimate Design Brief102
    Your design can only be as good as the brief you worked from. The best projects are borne from briefs that are open enough to inspire ideas, while being specific enough to feel workable. Shaun Crowley shows how you can elicit these kinds of briefs by providing clients with briefing templates.
  • This Way to the Web, Print Designers!103
    The transition from print design to web design isn’t a simple task and has many challenges. Khoi Vahn provides print designers with some useful starting points and references. In Web absolute precision of positioning is replaced with the absolute flexibility of content presentation. “The fact that I’m repeating that the Web is not like the printed page, that online information consumption is fundamentally different from print, is certainly adding nothing new to the conversation. The point I want to emphasize is not just that print designers need to be aware of this, but rather that they should approach it with genuine alacrity.”
  • Fixing the Web104
    “The Web is about 17 years old. For its first 10 years, Web technology evolved at breakneck speed. But for the last 7 years, Web technology hasn’t changed much at all. Is this a problem? There are clear benefits to having a stable development environment, but is Web technology stable or stale? Without innovation, will the Web suffer the same fate as any technology that becomes outdated because it fails to keep pace with users’ needs?”
  • CSS Layouts: The Fixed. The Fluid. The Elastic.105
    Mike Cherim explains the difference between the three layout types as well as their advantages and disadvantages. A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size.

    CSS Layouts106

  • Home Sweet Home107
    There’s no place like home…page. Paul Boag gives us 4 ways he works with clients to understand the value — and kill off the misconceptions — of this century’s homepages. From the mythical fold to the killer app, this article proves you can go home again.
  • Primary & Secondary Actions in Web Forms108
    Luke Wroblewski discusses an optimal approach to designing usable online-forms. Result: different visual weight of primary (Submit) and secondary (Cancel) actions (e.g. font size) helps the visitor to avoid mistakes and get things done faster. Besides: the alignment of actions with a form’s input elements provides a clear path to completion that helps people complete forms faster.

    Web Forms109

  • iconeye manifestos
    Iconeye asked 50 of the most influential architects, designers and thinkers to share what they believe in — in a Manifesto issue. The result: 50 manifestations of the prominent designers all around the globe.

    Iconeye

  • Banner Blindness: Old and New Findings (Jakob Nielsen)110
    A new research by Jakob Nielsen proves: users rarely look at display advertisements on websites. Of the four design elements that do attract a few ad fixations, one is unethical and reduces the value of advertising networks.

    Banner Blindness111

  • 15 Design Decisions That Annoy Readers112
    An overview of 15 annoying practices in modern Web Design which should be avoided if possible.
  • Give Me Some Zzzzz’s113
    An extensive article about the z-index-property in CSS for stacking div-layers upon each other. Important: only absolutely or relatively positioned elements can have z-index.
  • Semantics in HTML114
    Many Web-Evangelists see the future of the Web in the concept of Semantic Web115. But what exactly is it? And what is the current state of developments? John Allsopp about the Semantics in HTML.
  • The Elements of Design Applied to the Web116
    In a similar vein as the The Elements of Typographic Style Applied to the Web, the various principles of general design have their place in web based design. An overview of principles which are typical in modern site architecture: Balance, Proportion, Rhythm, Emphasis, Unity.

    The Elements of Design Applied to the Web117

  • The 10 Biggest Mistakes Freelancers Make, and How to Avoid Them118
    Let’s take a look at some of the most essential mistakes that freelancers, new and old, often make, and how to avoid them. Typical mistakes: missing deadlines, charging too little, lack of preliminary research, getting to personal, not proposing a follow-up idea.
  • Getting A Form’s Structure Right
    A comprehensive article about the effective design of web-forms – with many examples and explanations.

Design-Showcases, Inspiration

The Last Click

  • Content Aware Image Resizing139 (YouTube, Quicktime, hi-res video140))
    Over the last decade visitors had to put up with the static presentation of images, while web-writers had to get used to the limited possibilities for optimizing and preparing images for Web. Now might be the right time to rethink the concept — finally. With this new technology, developed by Ariel Shamir and Shai Avidan, images can be scaled and formed dynamically: apart from dimensions also the content of the images itself changes. Since Shai Avidan was hired by Adobe141, the technique might be used already in the next versions of Adobe Photoshop. Absolutely fascinating technique.

    Scaling142

  • A Brief Message143
    The project gives designers a podium to deliver their messages, criticism and standpoints to the design community. The only requirement: designers have to be brief and have max. 200 words for their messages. It applies to comments too.
  • HistoryShots Information Graphics – Prints144
    12 impressive data visualization approaches. Further approaches145.

    Data Visualization146

  • Stop Motion Commercial147
    1 million Post-it’s, 96 314 digital photographs using 2.5 terabytes of storage, 4.9 kilometers of 35mm film, 3 weeks of editing, and 83 hours in Flame to produce this 60 second commercial for MTN.
  • Blog Action Day148
    What would happen if every blog published posts discussing the same issue, on the same day?
    One issue. One day. Thousands of voices. On October 15th, bloggers around the web will unite to put a single important issue on everyone’s mind – the environment. Every blogger will post about the environment in their own way and relating to their own topic. Our aim is to get everyone talking towards a better future. Everybody can participate.

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Pretty cool! Thank you!

    0
  2. 2

    Wonderful List. I want all this for christmas! When do you guys ever sleep?

    0
  3. 3

    Excellent list! This will keep me busy for a while. ^_^

    0
  4. 4

    Michael @ herogasm.de

    September 18, 2007 9:19 pm

    Very usefull as usual.

    I’m going to use the news slider and the live validation in the redesign of my own site.

    Thanks!

    0
  5. 5

    Thanks for the link to my article. :)

    0
  6. 6

    Nice bro’s! Always nice to check these tips out before starting a new project :P

    0
  7. 7

    Wow, huge list. August was a busy month.

    0
  8. 8

    As usual, great list.

    Thanks :)

    0
  9. 9

    This list, is awesome!! How can i find the time i need to scan all this information? Great stuff like everytime!

    0
  10. 10

    I’m starting to think you guys sold your souls to a design-devil in exchange for tips about interesting sites :D As usually, great collection.

    0
  11. 11

    nice!! as usual..

    0
  12. 12

    My monthly feed… litteraly :)

    0
  13. 13

    Holy moly! This is going to take me an ewntire month just to get through. I’m not a fan of RegEx Pal, I much prefer Design215′s RegEx Tester -> http://design215.com/toolbox/regexp.php It is simple and straightforward for the not-so-much programmers out there. More about it here -> http://www.russellheimlich.com/blog/the-best-regular-expression-tool-on-the-net/

    I also wanted to mention my little handy dandy web tool DummyImage.com which creates dummy images at any size right from the URL like dummyimage.com/300×240

    Thanks for keeping a look out at the best in the web form e while I’m busy working.

    0
  14. 14

    I was obsessively checking the site yesterday for new posts. I think I’m addicted!!!
    Thanks for keeping me hooked!!

    0
  15. 15

    Amazing!!! thank u guys

    0
  16. 16

    Thanks!
    Great as usual.

    0
  17. 17

    Great collection. Recently came across this site and love it. This is a great site!

    0
  18. 18

    three words: W O W! Thanks Vitaly & Co!

    0
  19. 19

    Great post guys. Thank you

    0
  20. 20

    awesome list. there goes any work tomorrow :)

    0
  21. 21

    Thank you for the link to the Accessible News Slider. It has really raised some awareness in the AJAX community.

    As an aside, it is John Resig, not John Resign :)

    0
  22. 22

    Vitaly Friedman & Sven Lennartz

    September 19, 2007 1:34 am

    @Brian Reindel: thank you! Fixed ;)

    0
  23. 23

    A++++ content! Keep up the good job! 10x

    0
  24. 24

    Hi, nice list :)
    If it’s not too cheeky I’d like to add htmlbuzz – a web design aggregator I’m currently developing – check it out, I hope it provides a useful resource for web designers.
    Thanks.

    0
  25. 25

    These lists are always so freakin’ huge I can hardly stand it!

    0
  26. 26

    Awesome list!.. Thanks guys, Keep up the good work. =)

    0
  27. 27

    i’m confused… where im go reading start. lol

    -1
  28. 28

    GOOD GOD !

    Just when I think “surely, they can’t find that much awesome stuff day in day out” I click the RSS feed icon and sit back in awe.

    I need an extra 24hrs a day just to try half of the cool stuff i find on here.
    Good work guys.

    0
  29. 29

    Wow! I didn’t think anyone put together such long lists of cool web stuff!

    Man, I guess I need to start over at the top again – I forgot what I read!

    0
  30. 30

    Great collection, SM does it again. For those reading this , the following post on CSS may also be of interest

    Only Best 28 CSS resources – Tutorials, Layouts, Optimizers, Editors and lots more.

    0
  31. 31

    Excelent post. You guys rock!
    Thanks.

    0
  32. 32

    A great place to find out the hottest topics and tools related to web development.

    0
  33. 33

    These posts are always my favorite.

    0
  34. 34

    Simply marvelous collection I must say. While I have seen quite a few of the links included in the article, it’s always nice to see something new and unique. Cheers.

    0
  35. 35

    Wow amazing list of information..

    0
  36. 36

    I love these Best of articles. Keep them coming!

    0
  37. 37

    Great list. finally manged to complete read it.
    In the past i needed so search every place of the web to find something. But thanks to you guys we god a great list every time!

    Good job!!

    0
  38. 38

    As always, an awesome listing of awesome stuff :)
    Thanks so much!

    0
  39. 39

    Thanks,
    a really interesting article with awesome tools!

    0
  40. 40

    JEEZ!! I love YAML Builder thingie :) Great help, when staring to bulid a site…I was never been good into pure CSS website design. YOU SAVED ME, LITERALLY

    THANK YOU!!!!

    0
  41. 41

    I think I’m becoming dependent on on Smashing’s ‘Best of’ articles, as evidenced by my sub-conscious mutterings of “Don’t stop…”

    0
  42. 42

    Great post, here’s another good resource:

    Top 7 typography sites

    ~ Razvan

    0
  43. 43

    I like them, They are helpful to me. As a webmaster, i ‘d like to share an online service with you. a web site monitoring service http://youmonitor.us which enables me to get instant notice once web site is down or slow. And another site ThinkFree, a online file sharing service, something like Microsoft SharePoint. Useful for webmasters

    0
  44. 44

    Great stuff! Thanks for all!

    jaSz Designs

    0
  45. 45

    Awesome list dude, I’ve seen a couple of these but a lot i have not. Thanks for putting this together.

    0
  46. 46

    cool~i love it~

    0

↑ Back to top