Useful references, tutorials, services, tools, techniques and articles by smashingmagazine
July 9th, 2007 5 Comments
Colors, Color Schemes, Textures, Images
- 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 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.
- 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.
- 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.
- .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 Standards Way to Do Dynamic Data
- How to make sexy buttons with CSS
Alex Griffioen teaches you how to create pretty looking textual buttons (with alternate pressed state) using CSS.
- 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.
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.
- 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.
- Fancy Form Design Using CSS
This article explains the development of a user-friendly, accessible and functional web form.
- Lightweight Image Gallery with Thumbnails
- Validation Hints for your form
- 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.
- 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
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.
- 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.
- Flash Tooltips Using jQuery
- SlickSpeed Selectors Test
- Animated Collapsible DIV
- Asynchronous upload – Like AJAX – 1 function
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)
References, Tutorials, Tips
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.
- 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 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.
- 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.
- 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.
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.â€
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.
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.
- 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.
- 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.
You can leave a response
, or trackback
from your own site.
Leave a Reply