Useful references, tutorials, services, tools, techniques and articles by smashingmagazine

Colors, Color Schemes, Textures, Images

Tools, Web-Services

  • test everything: 100+ tools
    This service lets you use 100 tools, such as CSS and HTML validators, SEO tools, Social services
    Web proxies, Network tools, Text tools and Image tools, immediately. Once the URL is typed in, you can just click on the service you like and use it directly.
  • Particls
    Particls helps you track your favorite sites and apps by displaying desktop alerts for important changes. It works out how important the new information is to you and displays a proportional alert. For example, general information can be displayed on a news ticker, important stuff might appear on a popup alert and urgent information could be SMS’d to your phone.
    Particls
  • TechSmith UserVue
    UserVue is an online service that lets you remotely observe and record users’ desktops as they navigate applications and sites.
  • Live Keyword Analysis
    Using the live keyword analysis tool, you can simply type in your keywords and then paste in your text and your keyword density analysis will be done on the fly.
  • IE NetRenderer – Browser Compatibility Check
    IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5. No queue and live results.
  • Grid Calculator
    Grid Calculator helps to calculate the values of columns in grid-based designs.
  • Marketcircle: iPhoney
    iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development. And it’s free.
  • WYMeditor – web-based XHTML editor
    WYMeditor is a web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.
    WYM Editor
  • Internet Explorer Developer Toolbar 1.0
    Microsoft has released the first Version of IE Developer Toolbar. The IE-plugin provides a variety of tools for quickly creating, understanding, and troubleshooting web-pages.
  • Top 14 Free Web Statistics Tools
    14 most used web statistics tools in a brief overview.
  • Helperoo – Email support ticket system
    Helperoo is your email support system with small in mind. There’s no bloat and no complication. That’s perfect for small teams who don’t live inside a giant call center.
    Helperoo
  • .htaccess IP, Referrer, and Hotlink Banning Generator
    This tool generates the appropriate .htaccess code to ban visitor(s) from your site based on their IP address, to ban visits originating from certain domains and
    to disable hot linking of common file types from other sites, so only your own domain(s) are allowed to reference/ access them.
  • Best Free Project/Time Management Tools
    An overview of best free project/time-management tools.

CSS-Techniques, (X)HTML, PHP

  • Creative Use of PNG Transparency in Web Design
    The PNG image has been widely overlooked by the web design community—and mostly for good reason. Until recently, it hasn’t been possible to take full advantage of the format and have it work reliably in all browsers. But, with proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.PNG Transparency EffectPNG Transparency Effect
  • The Standards Way to Do Dynamic Data
    Sean Madden cooks up an example of presenting dynamic data graphically using XHTML, CSS and a dash of JavaScript – no Flash required.
  • How to make sexy buttons with CSS
    Alex Griffioen teaches you how to create pretty looking textual buttons (with alternate pressed state) using CSS.Screenshot
  • CSS: Using Percentages in Background-Image
    How exactly are percentage values used with background-position-property? Alex Walker explains the basics of an extremely useful concept in CSS, which is being
    used in CSS Sprites.
  • DOM JavaScript Cheat Sheet
    A small DOM cheatsheet with the most common DOM methods at a glance.
  • CSS Step Menu
    A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.
    Stepmenu
  • Focus Clouds
    “It’s my believe that Tag Clouds suffer a fundamental flaw. By blowing up the most common tags, they provide a great way to represent a sites content that’s already in favour, but in effect demote the less popular content. Simply because a category is not very commonly written about doesn’t mean it should be less desirable than bloated categories. This is where the concept of a focus cloud comes in.”
  • Creating bulletproof graphic link buttons with CSS
    Roger Johansson describes a technique for creating an image-based button that will expand and contract to fit the amount of text it contains. Another solution by David Hellsing, based upon PNG-images and background colors.
  • Rediscovering the Button Element
    “As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. My friends, let me introduce you to my little friend : the <button> element.” Simple and user-friendly.
  • CSS hover effect
    Veerle Pieters describes the design of the block-hover effect on the 4 tabbed boxes.
    Blockhover
  • Fancy Form Design Using CSS
    This article explains the development of a user-friendly, accessible and functional web form.
  • Lightweight Image Gallery with Thumbnails
    This solution offers no server-side scripting, lightweight, unobtrusive javascript to create thumbnails and cross-browser consistency. The script is
    degradable if javascript or images are disabled. Nice, user-friendly and simple.Screenshot
  • Validation Hints for your form
    As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field’s validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.
    Hints with CSS
  • Styling disabled text inputs
    Apparently, you can also style disabled input fields.
  • Create Resizable Images With CSS
    Christian Watson presents a technique you can use to scale the whole page, including images.
  • Scripts- Drop Down Tabs (5 styles)
    Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs.
    You can set which tab should be selected by default when the page loads (ie: 1st tab, 2nd tab etc), or have the script automatically select a tab when the page loads based on a match between the current page’s URL and one of the menu tabs’.
  • CSS The Star Matrix Pre-loaded
    This tutorial describes the design and programming of a star rating system, a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something.
    StarRater
  • CSS Current Page Indicator
    This article will show you how to highlight the current page’s link in a navigation menu using only CSS, no scripting. For example, if you have a navigation menu made up of Home, About, Contact and Products links and our viewer is currently viewing the About page then the link will be highlighted or in some way indicate that they are viewing that page.
  • Align List Items Horizontally with CSS
    If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem.
  • CSS Sticky Footer
    A CSS Sticky Footer that simply works. It’s been tested in IE 5 and up, Firefox, Safari and Opera.
  • Styling the Button Element with Sliding Doors
    “We needed a button that used Sliding Doors, actual html text, and did not require javascript for rollovers or form submission. Meeting these conditions meant
    that the input and anchor elements were ruled out, and it was clear that the button element was our only chance. The following technique demonstrates a cross-browser technique for button elements with sliding doors.”
  • How-to create a “Table of Contents” Navigation
    In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.
    Table of Contents
  • Unobtrusive connected select boxes – yet another solution approach – Wait till I come!
    A DOM-Script-based solution of presenting select-menus semantically and logically correct. [via Praegnanz.de]
  • PHP Masthead Rotator
    It doesn’t really rotate the mastheads but rather randomizes them. And, in fact, it doesn’t randomize the mastheads, but rather just a numeric value. If used cleverly, though, it’s a great way to offer your site’s visitors masthead images that belong to a specific collection.

Ajax, Javascript

  • Glossy JavaScript Library
    Glossy.js allows you to add corners and shading and shadow to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing.
  • Flash Tooltips Using jQuery
    This technique presents tooltips with Flash and JavaScript.
  • SlickSpeed Selectors Test
    Speed/validity selectors test for frameworks Prototype, jQuery, MooTools, ext, cssQuery and Dojo Query. Every framework runs in his own iFrame, thus no conflicts can happen. Tests are run selector by selector, with an interval to prevent the browser from freeezing. Tests are run in a neutral environment, no library or framework is included in the main javascript test, to avoid favoritism.Screenshot
  • Animated Collapsible DIV
    This javascript creates the slide-effect for div-containers.
  • Asynchronous upload – Like AJAX – 1 function
    Asynchronous upload of files with JavaScript and DOM Scripting using IFrame. Works like Gmail upload and Google pages upload. Tested in Firefox 2.0, Internet Explorer 6.0 e Opera 9.1.
  • lightWindow
    Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame)

Web-Typography

References, Tutorials, Tips

  • Mephisto
    Mephisto is a blog engine with some simple CMS-ish concepts (sections, pages), a very flexible templating system, and an aggressive caching scheme that takes advantage of your web server’s best traits. Based upon Ruby on Rails.
    Mephisto Weblog Engine
  • Wikkid Apps: Totally Legendary Web Application Reviews
    Mark Bloomfield selects the best Web 2.0-application and presents them in his posts. Users can rate applications. Definitely worth a regular visit.
  • SEO Myths Exposed
    In this series of vidcasts Matt Cutts, Google’s software-developer, answers the questions of his readers, related to SEO and Google.
  • Wakoopa
    Wakoopa tracks what kind of software or games you use, and lets you create your own software profile. Ready for you to share with the world.
    All programms are categorized and can be rated. Thus you can find out the best and/or most popular products in your niche.
    Screenshot
  • Adobe Labs – Adobe Flex Builder 3 Public Beta
    The Flex Builder 3 beta release provides you with an opportunity to explore new features, communicate early feedback, and test existing Flex applications with the new Flex 3 framework.
    Some of the new major features include support for the new Adobe Integrated Runtime (AIR), code refactoring,
    memory and performance profilers, SWF file size reduction through persistent framework caching and advanced datagrid.
  • Movable Type 4 Beta
    Six Apart has released the Beta of Movable Type 4. With more than 50 new features, MT4 offers a simple installation, intuivive user interface and WYSIWIG-Editor. Particularly interesting is MT4’s
    templating system, which lets you output content in any format, without requiring any programming or scripting. You can create standalone pages that automatically inherit the design and layout of your blog, and publish any content with the new posting interface, including rich media.
    Movable Type 4
  • WordPress 2.2 “Getz”
    This version includes a number of new features, most notably Widgets integration, and over two hundred bug fixes.
  • HTML elements index
    Jens Meiert lists all HTML-Elements, which are used in HTML 3.2, HTML 4.01, XHTML 1.0, XHTML 1.1, HTML 5 and XHTML 2.0, describes their meaning and language they exist in.
  • Textpattern 4.0.5
    Textdrive Textpattern presents a new version of Textpattern Content Management System. Among many new option are new tags, new callback events, bugfixes and more.
    Besides: Texplates 07, finished yesterday, presents 11 Textpattern-templates.
  • Safari 3 Public Beta
    Apple has released the 3rd version of Safari web-browser, now also available for Windows-users. After release serious bugs have been fixed (particularly for German users). A new Web Inspector for Safari is also available for both Win- and Mac-users.
  • cssNeustart
    On the 1st of August German designers relaunch their web-sites, following the CSS Reboot trend.
  • Mobile Web Developer’s Guide
    An extensive handbook presents detailed information about web-development for mobile devices and web-design for “mini-format”. Useful to know: in United State 19% of mobile users use Mobile Web, in UK – 17%.
  • The Freelancer’s Toolset: 100 Web Apps for Everything You Will Possibly Need
    100 Web-application a freelancer might ever need in a comprehensive overview. “Running a business for yourself means you have to be inventive and always on the lookout for a new and better way to get things done. Innovation junkies, take note: the Internet has a lot to offer. From invoicing to marketing, these are tools that freelancers need to know about.”
  • Browser Bugs
    A comprehensive overview of well-known Browser Bugs in Mozilla, Opera, IE 6 und IE 7. Apparently, IE 7 has more bugs than its predecessor. The site also includes related information and references.
  • Ultimate HTML Color HEX Code List
    “HTML 3.2 specifications identified sixteen colors that can be used by name to define color in HTML and CSS. But you can use more than sixteen colors in HTML… you’ll just need to know the six character HEX values and we’ve listed pretty much all of the ones you’ll need on one page.” Not new, but still useful.

Articles and Publications

  • When the designer/client relationship should begin
    Designer vs. Client: “I have looked at the role of the website owner. This has also started me thinking about the relationship between designer and client. In particular I have been considering the point at which this relationship starts and wondering whether the designer should actually be engaged earlier in the development cycle.” By Paul Boag.
  • Unfolding the Fold
    “Nowadays, scrolling has become a natural practice in surfing the web. Scrolling is also associated with web 2.0 design because big, clear text and “spacious”, “clean” content implies longer web pages. This post demonstrates with charts and real data several behavioral patterns related to scrolling.”
  • Stand and Deliver
    “One of the greatest challenges any designer faces is articulating the intuitive. The good news is that designers already have what it takes to deliver gracefully under fire. It’s baked right into the job. All that’s needed are a few best practices to keep your focus sharp and the meeting repartee humming.”
  • Make your site mobile friendly
    How do your web pages fare in today’s mobile browsers? Virginia DeBolt outlines some of the issues you’ll need to think about, and suggests some techniques for testing that you can try,
  • Left Nav vs. Right Nav
    Left-navigation bar is better than the right-navigation bar? Wrong. Current study of the web navigation.
  • Small Is Essential
    Simplicity and Minimalism are the keys to success. Elegant and simple applications are becoming more and more popular, e.g. Backspace by 37signals.
    Time reports on the success story of 37signals, a small online-company.
  • 20 Tips for More Efficient Google Searches
    Instead of just typing in a phrase and wading through page after page of results, there are a number of ways to make your searches more efficient.
  • Who Needs Headlines?
    A good headline will seduce site visitors. It should grab their attention and convince them the information on the page is worth investigating.
  • On Staying Creative
    “As a creative person matures and gains experience it’s often the case that they move into roles that are less and less creative at their core. Though it’s a natural progression, making the transition from doing creative work on a day-to-day basis to running a department or business can be hard. How do you stay responsible to your team, your business and your new less-creative responsibilities while at the same time keep a fresh creative mind?” By D. Keith Robinson.
  • Frameworks for Designers
    Learn to harness the power of tools, libraries, conventions, and best practices to focus on what is unique about the project at hand.
  • In Praise of WordPress Template Tags
    About template-tags in WordPress, their functionality, possibilities and advantages.
  • Do You Make These Mistakes When You Write?
    “It’s time once again to review those nasty errors that damage our credibility when we write. Not normally a fun task, but absolutely necessary.” Read, learn, print, never repeat them again. We have to learn some of them.
  • Pagination 101
    “One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. After all, I’d say that pagination is pretty easy to get right.”
  • CSS2.2
    There are many speculations about CSS 3, its implementation, its release and its use in pracitce. Andy Budd suggests that it’s time to release a preliminary version of CSS. “Maybe we should take all the CSS3 properties, value and selectors currently supported by the likes Safari, Opera and Firefox. Maybe we should take all of this information and build a simpler, interim specification we can start using now. Maybe, just maybe, it’s time for CSS2.2?”
  • Effective Project Management for Web Geeks [Work Smarter]
    “Project Management” has always been a term more likely to elicit a groan than a smile. Nevertheless, the use of project management skills is often what distinguishes an easy, successful project from a painful and unsatisfactory one.
  • 101 Essential Freelancing Resources
    “The web is such a big and wonderful place, packed with tools and resources which you all too often don’t know about. So to help all you freelancers out there we have compiled a gigantic list of resources, categorized up for your benefit.”
  • Spiekermann gives us the business
    Erik Spiekermann, one of the well-known German typographers, in an interview. Topic: how to manage the challenges found in running a design business?
  • Font smoothing, anti-aliasing, and sub-pixel rendering
    “Apple and Microsoft have always disagreed in how to display fonts on computer displays. Today, both companies are using sub-pixel rendering to coax sharper-looking fonts out of typical low resolution screens. Where they differ is in philosophy.”
  • 10 Lessons from My Speaking Coach
    “I thought I was a decent speaker, really, I did. That was until I spent 4 hours with a speaking coach who essentially made me realize all things that should work together to make a speaker and presentation great.” Important to know: you have 2-3 minutes to hook the audience, outline your talk, remember door points, use photos or graphics.
  • How To Think Like A Client
    Having trouble getting clients to see things your way? Maybe it’s time you spoke their language, argues Paul Boag. He points out that when it comes to commercial web design, it’s all about the business case.
  • Breaking Out of the Box [CSS Tutorials]
    “I hear from designers who don’t like web standards […] , “CSS designs are so boring. They’re too boxy.” I can’t help but find this statement to be a bit silly. To me, that’s like saying buildings built with wood are boxy. An architect can create a boring-looking building. But, using the same tools, an architect can create a stunning work of art. It all depends on creativity and experimentation.”
    Jina Bolton explains the essentials of grid-based designs and how to develop them with CSS and XHTML.
  • 25 Ways To Improve Your Site Today
    A list of 25 ways to improve your website in as little time as possible. All can be done in a matter of minutes.
  • Load time, the UX factor: Facts and measures
    The vision is real-time surfing, not keeping up with bandwidth, so here we go (again) with some things to consider when it comes to efficient websites with a certain ease of use.
  • Making the most of links
    Utilise CSS to make your website links look much more appealing, while simultaneously enhancing the usability of your site. Craig Grannell explains all. By Graig Grannell.
  • Web 2.0 in Germany: Copy/Paste Innovation or more?
    Web 2.0 in Germany. Where is innovation? Most Web 2.0-startups are copies of American originals.

Design-Galleries, Showcases, Inspiration

  • Web Design-isms: 7 Surefire Styles that Work
    Glossy buttons, ornamental backgrounds, futuristic interfaces. We’ve all been guilty at one time or another of committing the 7 design-isms in this article from Larissa Meek. But that’s okay, she tells us, they’re classics for a reason.
  • 34 Places to Get Design Inspiration – Online and Off
    A list of online and offline resource to serve up everything from logos to icons to art to fashion to just inventive ideas to get your mind ticking. So kick back and let your senses run wild as we bring you 15 websites packed full of inspiration, 10 must-have books and 9 things to do to get inspired.
  • Art of the Business Card
    Over 450 creative business cards. Even more cards.
  • Ubersuper
    An overview of beautiful or strange WordPress-based weblogs and design-related resources.

Icons, Fonts, WordPress Themes

The Last Click

  • How to Change the World: Art of Innovation
    The video of the famous “Art of Innovation” speech by Guy Kawasaki. With PowerPoint-Slides.
  • Microsoft Surface
    What looked live a future vision in Minority Report, is now possible with Microsoft Surface. Keyboard and mouse can become unnecessary in the next few years – Tabletops are coming.
    Screenshot
    Screenshot
  • Jaw-dropping Photosynth
    Thousands of Flickr-Shots. Notre Dame de Paris.
    And a little bit of creativity. Result: Photosynth, which creates breathtaking multidimensional spaces with zoom and navigation features that outstrip all expectation. Blaise Aguera y Arcas’s talk. More TED Talks.
    Screenshot
  • The Secret of Apple Design
    The main principle of Apple designs is based not upon the expanding of its functionality, but minimizing it. The inside (sort of) story of why Apple’s industrial-design machine has been so successful.
  • iPhone User Interface Gallery
    The iPhone is there. How it looks like and which options it offers in a iPhone User Interface Gallery (over 200 images) and in a iPhone Video Presentation. An iPhone-Guide for Web-Developers is also available.
Be Sociable, Share!

You can leave a response, or trackback from your own site.

5 Responses to “Useful references, tutorials, services, tools, techniques and articles by smashingmagazine”

  1. AmaliaMendos says:

    Hey. I’m sorry for offtopic. Where you download this theme for site? I realy love it.
    Amalia

  2. ubot studio says:

    I am really glad to see that you are putting so much of effort for encouraging the readers with valueable seo posts like this, I have sent this post to my myspaceaccounts.

  3. What is an internet friendship? How close can we go with an opposite sex having internet friendship?

  4. What are the best SEO Tools on the market today? i have some off page optimization checker in hand.;;*

  5. anitha says:

    Thank you for the information………….

Leave a Reply

Get Find Free and google.