Awesome This Weeks Twitter Design News Roundup N.07

In this weeks Twitter design news round-up, we have a couple of useful Internet Explorer CSS fixes, cheatsheets and a great indepth article, from Smashing Magazine, about the many differences between each version of IE 6, 7 and 8. Keeping with web design, there are also great resources for Lightboxes and a few inspirational showcases. Graphic design is covered in the shape of logo tutorials, and a nice text effect from Psdtuts+. In total there are 23 great resources, useful reading and some random design related findings.
If you have any cool links that you would like to share, do not hesitate to send them to us here: Submit News.
You can follow us (if you like) via Twitter here: twitter.com/speckyboy.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. You've spent hours on it, but you just can't seem to get your layout right.
This cheatsheet/reference manual is a resource for anyone who has to deal with Internet Explorer 6. Essential bookmarking!

30 Impressive vCard Web Designs

A vCard is an electronic business card that uses a standard format. Some people have taken to creating simple, typically one-page, sites that center around their vCard. These sites contain minimal content, usually just basic information about the individual (i.e. job title) and contact information (i.e. mailing addresses and links to social media profiles). In this collection, you’ll find some impressive vCard sites for inspiration.

8 ways to make WordPress easier to use for your clients

If you use WordPress as a CMS for your clients’ websites, you’ve probably faced that issue: regular people find WordPress hard to use. Yes, it is quite user-friendly, but apparently not enough for people who double-click on links when browsing or worst, enter their website’s url in Google to get there. To make it easier for these people to maintain their own website, the author of this article, has suggested a few great tips.

CSS Differences in Internet Explorer 6, 7 and 8

It is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.
This article provides an exhaustive, easy-to-use reference for developers to know the differences in CSS support for IE6, IE7 and IE8.

7 Things Web Designers Hate Hearing from Clients

One of the most difficult aspects of being a web designer is dealing with clients that "just don’t get it". In this article, there are seven things that often make the job of web designers difficult when dealing with unreasonable demands from clients. The goal in this article is not only to identify these common situations, but also to share with you some ways to avoid them and explain to your clients why their demands can’t or won’t be met.

Logo Design: 40+ Must Have Tutorials

50 Brilliant Bird’s-Eye Photos

In this showcase, you’ll find a variety of highly creative, beautiful, unique and inspirational photographs taken with a bird’s-eye view.

The A.T. Kearney Global Champions 2009

Monsieur Cabinet

Monsieur Cabinet is an excellent illustartion portfolio, well worth the ten minutes having a browse.

How to Create an Ice Text Effect with Photoshop – Psdtuts+

In this tutorial, you'll learn how to create an ice effect completely from scratch using special Photoshop Brushes. This effect can be applied to any shape you want and can add some great style.

One by Four

Great web design, I simply love the simplicity and coloring in this design.

Bidsketch – Design Proposal Software

Bidsketch is an application that lets you create, track, customize, and design beautiful proposals. Multiple ways to present your proposals ensure clients get what they want. You can export to PDF or share online. Every client gets a portal that lets them view and comment on their proposals.

35 Mac Apps to Improve Your Web Browsing Experience

Out of the box, your Mac is a powerful machine for making the most of everything the Internet has to offer, but there are a few tweaks, plugins and applications that can make it go a little bit further.

35 Smart Logos With Second Thought To Make You look Twice

Programmers are tiny Gods?

Reviewing Some Bad Google Search Results With Sergey Brin

Please be patient – This Page is Under Construction!

Scary!!!!!!

Free Slideshow, Gallery And Lightboxes Scripts

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. This post will do the trick and provide you with all the resources you might need.

Top 20 Ways for Web Developers to Reduce Their Carbon Footprint

Climate change is greatly affected by our carbon footprint. As web developers, it may not seem that we make huge "footprints." We read our mail and news online (no paper), communicate with instant messenger and Skype (no stamps or letters), and many of us relax by watching video or TV shows online (no renting/buying physical DVDs). As a whole, web developers do a pretty good job reducing their carbon footprint.
Yet there are plenty of ways that we can reduce our carbon footprints even further and treat Mother Nature a bit better. After all, every little bit helps when it comes to becoming more environmentally responsible.
So here are twenty ways that web developers can reduce their carbon footprint each day. They're simple changes, but in the end they make a huge difference.

25 New & Useful PHP Techniques & Tutorials

PHP is the most popular server side scripting language among developers, its reasonably easy to learn, its free and it has a large and ever increasing helpful community. In this post there are 25 useful PHP techniques and tutorials, most of which have been published only this year.

404 Error Pages for Your Viewing Pleasure

No one likes seeing the dreaded error page on a website. It usually occurs when a link is bad. Error pages, also known by their street name as 404 pages, are depressing. As a way to defuse any ill feelings, many web designers came up with a simple yet smart solution– customizing a 404 error page. As simple as it may seem, a customized error page will make a visitor feel like you care about their user experience on your website.

HTC HD2

I am loving this soon to be released mobile, shame its Windows Mobile!

Previous Twitter News…

Twitter Design News Roundup N.06 »
Twitter Design News Roundup N.05 »
Twitter Design News Roundup N.04 »
Twitter Design News Roundup N.03 »
Twitter Design News Roundup N.02 »
Twitter Design News Roundup N.01 »

Read More

Awesome 25 Graph and Chart Solutions for Web Developers

Creating an accessible data chart or graph in HTML is very tricky to achieve, especially with some elements, such as images, that allow only the most basic features that give textual information to non-visual users. What are the solutions?
PHP, Flash, Javscript (jQuery, MooTools, Prototype) and CSS can all be utilized successfully to implement interactive visualizations, and there are many techniques and solutions from each that will allow you to display them on web pages and apps.
Below we have compiled 25 solutions for displaying charts and graphs using various languages, if you prefer you may like to view our earlier article on CSS graph solutions: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques.

PlotKit – Javascript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for Javascript that has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. It is based on top of the HTML CANVAS tag which is supported in Firefox, Safari and Opera, and is available under emulation on IE6 and IE7 via the ExplorerCanvas.

Downloads & Examples

jQuery Visualize Plugin – Accessible Charts & Graphs

The jQuery Visualize Plugin makes use of the Canvas element of HTML5 to give you a simple and accessible method for generating bar, line, area, and pie charts from data contained within an HTML table and allows you to configure them in a variety of ways.

Downloads & Examples

jqPlot Charts and Graphs for jQuery

The feature rich jqPlot is a plotting and charting plugin for the jQuery Javascript framework. There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types and adding canvases to the plot.

Downloads & Examples

Protovis – A graphical approach to visualization

Unlike low-level graphics libraries, Protovis, defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to create data with simple marks such as bars and dots to simplify construction.
It uses JavaScript and SVG for web-native visualizations; no plugin is required (though you will need a modern web browser) and programming experience is helpful but not essential. It does have extensive documentation and a wide array of examples on its homepage to help you get started.

Downloads & Examples

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript all with a single line of code.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

Downloads & Examples

MilkChart – Graph/Chart library for MooTools

MilkChart is a simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 <canvas> tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

Downloads & Examples

mooCSSChart

With mooCSSChart you can easily create animated bar charts.

Downloads & Examples

Highcharts – Interactive JavaScript charts for your webpage

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.

Downloads & Examples

JS Charts – Free JavaScript charts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.
With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required, just include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Downloads & Examples

flot – Attractive Javascript plotting for jQuery

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. It has been developed with focus on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (Internet Explorer where the excanvas Javascript emulation helper is used).

Downloads & Examples

Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework and has been inspired by Flot (above).
Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.

Downloads & Examples

Libchart – Simple PHP Chart Drawing Library

Libchart is an easy to use, free chart creation PHP library. The new version features multiple datasets for horizontal, vertical bar charts and line charts.

Downloads & Examples

pChart – a PHP Charting library

pChart is a PHP class oriented framework designed to create aliased charts with its data easily retrieved from SQL queries, CSV files, or manually provided. In this version rendering speeds have been greatly improved and run pChart on your web server, you'll need to use PHP compiled with the GD library support.

Downloads & Examples

YUI 2: SWF Charts

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies. Notable features include support for the DataSource Utility, customizable series and axes, a customizable mouse-over datatip, combination charts, and skinning.

Downloads & Examples

Open Flash Chart

Open Flash Chart works by requesting data from the server when a user loads a web page. The server will knows who the particular user is and it will generate a custom chart showing up to the minute data.
You will need to include the Open Flash Chart in your HTML, and you also need to provide the data file on the server. The data file is either a text file, or a .php, Perl, Python, Java (or another flavour of dynamic) page.

Downloads & Examples

XML/SWF Charts

XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data. Create an XML source to describe a chart, then pass it to this tool's flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.).

Downloads & Examples

FusionCharts

This version is the free and open-source Flash charting component from FusionCharts . It empowers you to create animated and interactive Flash charts for your web applications, desktop applications and presentations. It provides an impressive 22 popular charts like Column, Line, Pie, Bar, Area, Stacked, Candlestick and Funnel Chart, that will look the same across all browsers.

Downloads & Examples

Flare – Data Visualization for the Web

Flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques with ease.

Downloads & Examples

Visifire – Silverlight and WPF Chart Controls

Visifire is a set of open source data visualization controls – powered by Microsoft Silverlight. it is a multi-targeting control which can be used in both WPF and Silverlight applications, that can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.

Downloads & Examples

Axiis : Data Visualization Framework

Axiis is an open source data visualization framework that has been built upon the Degrafa graphics framework and Adobe Flex 3. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.

Downloads & Examples

ChartGo – Create Charts Online Fast, Easy and Free

ChartGo is an online generator that allow users to create charts online quickly. You can create bar charts, line charts or pie charts and you simply paste your data in the chart data area and hit the create chart button.

Downloads & Examples

iCharts – Create, Share and Embed Interactive Charts

iCharts allows everyone to upload Excel sheets or manually add data from which they can easily create, share and embed interactive charts within minutes. iCharts can be published on the iCharts Portal at iCharts and they can be embedded anywhere on the Internet in blogs, forums or corporate websites.

Downloads & Examples

Chartle.net – Interactive Charts Online

Chartle is a very easy to use and completely free online chart generator that allows you to embed and share your plots, maps, charts, diagrams and business reports online.
Chartlet is non-binding towards its users, there is no forced registration and all generated charts are your own, The only thing they ask is that you link back to them.

Downloads & Examples

Google Chart API

The Google Chart API returns a PNG-format image in response to a URL. Several types of images can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colors, and labels.

chartpart.com – Chart Generator

This generator uses the Google Charts API to produce crisp and clear graphs that can be inserted into web based documents via a hyperlink or saved as a flat image file.

Read More

Awesome Useful Tools To Check Cross-Browser Compatibility Issues

With today’s modern web it’s not uncommon for many visitors to be using a different browser. The options seem almost unlimited with Mozilla Firefox, Google Chrome, Opera, Safari, and of course Internet Explorer. There are also many lesser-known browsers and 3rd party software for Mac and Linux Operating Systems.

When it comes to designing websites you must take these specs into consideration. The best developers from around the world hold their websites to the highest standards. Even the professionals are utilizing software and hacks for cross-browser compatibility.

I’ve included a few examples and links below. These are very helpful tools to analyze and critique your websites in many browsing environments. Modern web designers actually have more convenient tools than ever before related to manipulating and testing browser support.

Identify Your Audience

It’s not wise to dive into this issue head-first without doing any research beforehand. If you’ve installed tracking software such as Google Analytics it’s very simple to acquire browsing data from your visitors. Google is possibly the best corporation to utilize as their software is profoundly capable of so many tasks.

Within Analytics you can see the percentages of browsing software and how they stack up amongst your overall traffic numbers. Once you are able to identify the most popular browsers accessing your website, it’s now a matter of critiquing your layout and code to fit each one.

Although if you are not running any tracking software (which I highly recommend you investigate) it’s still possible to apply site optimizations. For the most part Chrome, Firefox, and Internet Explorer command the largest market size. Safari is also very popular amongst Mac users, and this statistic will increase based on the niche of your website.

Checking Screenshots

There is a lot of fuss about rendering websites in different natural browsers. The environment provided to your end users will often entice or dissuade visitors from digging further into your content.

Browser Shots is a fantastic piece of software which caters to literally tens of hundreds of different packages. You may choose between the major three operating systems, along with any subset of browsing software. The gallery is very extensive and even includes previous versions of the software updates.

Another fantastic piece of software comes from Adobe, the digital art empire. Adobe Browser Labs works similarly as Browser Shots, however isn’t able to render under as many different versions. Unlike Browser Shots the Adobe Labs will build each image almost instantly. It’s possible to work between some of the major releases such as Mozilla Firefox and Internet Explorer. However there is almost no support for such lesser-known browsers or occult operating systems such as BSD.

Browser Labs is fantastic as a base tool for web designers. If you’re familiar with the Adobe design suites their online interface behaves in a very similar manner. You’re able to change the display style into 1-up, 2-up, and Onion Skin. The former options display one or two different renders while the latter will overlap two page displays in an onion-layered style.

Working in the Cloud

Looking past the brief pun Cloud Testing is another fantastic tool for cross-browser checks. It behaves in a similar manner as the previous examples. However here you’re able to record and archive much of the experimentation you perform and catalog this into your very own account.

Even better, Cloud Testing doesn’t require you to store each archive within their servers. It can become a hassle accessing everything online, not to mention storage space isn’t as cheap when you’re rendering websites online. The admin panel allows you to export the data in PDF format and share this within your team, or just save each file on your own record.

One great inclusion here which isn’t seen elsewhere is the ability to automate testing. You can tell Cloud Testing to render your site in regular intervals and store the results for you digitally. This will save you hours of time in the long run, especially if you’re working on many projects at once. Technical information such as headers or HTTP requests can also be examined in a similar manner to Firebug.

Choosy Browser Compatibility

If you’re curious about a select segment of your website being compatible I recommend Cross Browser Testing. By the website name along it’s possible to get an idea of what they’re offering. But within their demo page you can get a much clearer picture of what’s going on.

CBT will check for many ailments which you can’t catch simply in screenshots. These mostly include UI components such as jQuery effects or glitchy navigation menus. The jQuery library has been created specifically to extend into most modern-day browsers. Unfortunately you cannot trust the Internet community to always be up-to-date, and thus it’s important to at least offer fallback solutions.

With many browsers and alternate release versions it’s possible to test almost anything you’d need. Internet Explorer 6-9 is one of the biggest selections followed closely by Firefox 3.x and Opera 11. You can also check mobile screens from Android, iPhone, and iPad users. This is a great tool for applying unique CSS techniques to differentiate your mobile audience.

While on the topic of mobile another very neat tool offers repeat checking and rendering of any website on a mobile phone. Mobi emulator is a simple yet efficient online form where you may choose between a handful of mobile browsers and phones which can access the Internet. Keep in mind you shouldn’t spend time optimizing your website for a mobile platform which isn’t within your visiting audience.

Desktop Testing

As a web developer myself I have found Internet Explorer to be the most rambunctious browser I’ve attempted to tame. Often it’s almost impossible even with CSS hacks and conditional comments. But one tool making it all the more simpler is IETester.

Released just a few years back, this software can run multiple browser windows of any version of Internet Explorer 5.5+. It’s almost like installing all versions from IE5-9 and 10 beta within a single application! Tabbed browsing makes checking for inconsistencies a whole lot quicker than ever before.

Although the software is by no means perfect, it is the closest you’ll get to full IE testing. From Windows XP to 7 Microsoft has made it impossible to run all versions of Internet Explorer without hacking. This has been a nightmare for web designers since it’s been almost impossible to test rendering issues! DebugBar has created a wonderful bit of software which I recommend anybody developing over Windows to download and install.

Conclusion

Hopefully these links will get you looking towards the right path of cross-browser compatibility. As long as there’s Internet connection we’ll more than likely be waging war against multiple browsers. This is a good thing however, as it promotes individuality and choice amongst a wide target audience.

In the past we’ve also sponsored collections of remarkable browser testing services and related tools. Web developers both experienced and novice should check out a few and see if any catch their eye. The vast amount of tools in recent years have become overwhelming and difficult to wade through. If you know any great cross-browser tools or software please offer links in the discussion section below!

Read More