Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1252 lines (732 sloc) 52.9 KB

Appendices

  1. Inspirational Sites :: Resources to help inspire design and UI patterns for desktop, mobile and responsive websites.

  2. Placeholder Services :: A roundup of Lorem Ipsum and image placeholder services.

  3. Feedback Services and Device Testing :: A roundup of UX feedback services, and articles on device testing.

  4. Font Stack Roundup :: Different Web safe fonts, font stack combinations and fallbacks, typeface pairings, mobile fonts and typography classifications and definitions.

  5. Font Services and Tools :: A jackpot listing of font services and tools to help you deliver a great typographic experience.

  6. Choosing Typefaces :: Choosing typeface articles and grear advice from Jason Santa Maria on choosing typefaces.

  7. A Brief History of Web Font Sizes :: Different articles from my archives over the last 12 years regarding web font sizes.

  8. Color Tools, Wheels, Generators, Palettes and Collections :: A roundup of different color tools, color wheels, image to color palette generators, community color palettes, and color collections.

  9. Browser and Mobile Testing :: A roundup of everything you need to test for cross browser issues and mobile rendering.

  10. Browser Info :: A roundup of browser market share, countdown, support and comparisons/compatibility websites.




Appendix 1

Inspirational Sites

In addition to reviewing competitor sites or similar services to help generate ideas, the following sites may also inspire or provide you with best practices/design patterns.

Of the sites, there is one site that stands above the rest and belongs to no single category:

Inspiration | Web Design Ledger

Desktop

  1. Awwwards

    Awwwards are the awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

  2. Design Meltdown

    In this reincarnation of DMD I seek two main goals. First, to get back to the roots of DMD and publish epic amounts of beautiful work. Second, to embrace the user via a user-centered design methodology that packs the most value as possible into the site.

  3. Favourite Website Awards (FWA)

    FWA stands for Favourite Website Awards, an industry recognised internet award program and inspirational portal, established in May 2000.

  4. Line25

    Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing.

  5. One Page Love

    One Page Love showcases the best one page website designs on the internet.

  6. One Page Mania

    One Page Mania is a review showcase of only the best One Page Websites from around the web.

  7. siteInspire

    siteInspire is showcase and CSS gallery featuring the best web design today.

  8. The Inspiration Stream

    A meticulously curated place of response, a wellspring of INSPIRATION

  9. Pattern Tap

    ...It's a living classroom, where designers learn what is working well on the Web and why.

  10. UI Patterns

    User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

  11. Codrops

    Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

    Here are a few Codrops examples:

Mobile

The following links deal specifically with mobile:

  1. Inspired UI

    Find your inspiration

  2. Pattern Tap Mobile

  3. AppSites

    App Sites is a showcase of beautiful iPhone, iPad & Mac app websites.

  4. Mobile Patterns

  5. Mobile Awesomeness

    Big-time awesome for the small screen.

  6. Mobile Design Pattern Gallery

    UI Patterns for iOS, Android and More

  7. FWA Mobile

    FWA is the most visited website award program in the history of the internet, with over 140 million site visits as of July 2011 (and multiple billion hits to our servers).

  8. WAPReview Directory

    Welcome to the WapReview Directory, a comprehensive catalog of the mobile web, featuring reviews and ratings of 2254 mobile web sites.

  9. Mobile in Higher Ed

    The following is a non-exhaustive listing of higher ed mobile web sites. Hopefully it’s useful to you as you evaluate features and ideas for your own mobile site.

  10. WTF Mobile Web

    We need better reasons. Real examples. Proof that what we are all doing is not working anymore. That’s what this website is about. Examples convince. Seeing trends makes us smarter. The problem isn’t insurmountable if it’s known. So let’s get to know the problem.

Responsive

Because responsive will play a big part in your design the following two links may help you think through your navigation:

  1. 70 Stunning Responsive Sites for Your Inspiration

  2. Responsive Navigation Patterns

  3. Complex Navigation Patterns for Responsive Design

Some response a web design examples:

  1. Media Queries

    A collection of inspirational websites using media queries and responsive web design.




Appendix 2

Placeholder Services

Here are some Rails Gems for creating Lorem Ipsum placeholders:

There are a lot of Lorem Ipsum generator services out there (some of them are kind of funny):

  1. html-ipsum
  2. lipsum
  3. Fillerama
  4. Samuel L. Ipsum
  5. Hipster Ipsum
  6. Gangsta Lorem Ipsum
  7. Cupcake Ipsum
  8. Bacon Ipsum
  9. T'lipsum 10 Picksum Ipsum

Image placeholders in different sizes and styles are also plentiful. The second link will give you a pretty comprehensive list to choose from, followed by two that are not included in the list that I list separately for thoroughness:

  1. The Ruby Toolbox - Image Placeholders
  2. List of Dummy Image Generators
  3. Functional Placeholder Images
  4. Holder.js
  5. placehold.it




Appendix 3

Feedback Services and Device Testing

A roundup of feedback services and device testing articles.

Feedback Services

  1. Verify

    Verify is the fastest way to collect and analyze user feedback on screens or mockups.

  2. Concept Feedback

    Get Website Feedback and Increase Conversion Rates Expert analysis, detailed recommendations and solutions you can implement today.

  3. IntuitHQ

    Get useful, actionable results, improve usability in no time, and create a site your users will love.

  4. Loop11

    Loop11 is a remote usability testing tool that enables you to test the user-experience of any website and identify navigational and usability issues. Get the hard facts about your website quickly and cost effectively!

  5. Optimizely

    A/B testing you'll actually use. Website optimization made easy.

  6. Silverback

    Guerrilla usability testing software for designers and developers

  7. UserTesting.com

    Usability Testing Has Never Been Easier The fastest, cheapest way to find out why users leave your website.

  8. Steve Krug wrote a second book on usability testing, and gives a basic demo of it on YouTube:

Device Testing

  1. 112/14/10 - Smartphone Browser Landscape

    In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at how to set up a mobile test bed.

  2. 01/04/12 - Test on Real Mobile Devices without Breaking the Bank

    Mobile is the future of the web, so it’s time to start investing in some mobile devices. Testing on actual devices is now an absolutely essential part of web design.

  3. 02/07/12 - Strategies for choosing test devices

    It’s been great to see a conversation developing around how to acquire test devices and how to do so on a budget. But once you have a budget in place, how should you spend it?

  4. 03/28/12 - Testing for Dummies

    We thought we’d share some information on our testing process.

  5. 06/26/12 - How to Build a Device Lab [Part 1]

    Recently, we were lucky enough to be given the opportunity to build a device lab for our department. Stephanie Rieger (@stephanierieger) covers the many reasons why organizations need to get their hands on real devices for testing.

  6. 09/11/12 - Testing Websites in Game Console Browsers

    More than one in eight internet users in the UK, US, and France—and nearly one in four American teens—uses a game console to get online, according to studies from 2010 and 2011.

  7. 09/24/12 - Establishing An Open Device Lab

    Managing a personal device lab can be quite hard with an ever expanding number of devices. It’s not only expensive, but also bad for our environment.

  8. 11/01/12 - Building the Happy Cog Test Lab

    hen first planning our test lab, I surveyed my own collection of devices and then asked around our Austin office for people who had some older phones sitting at home in a closet or junk drawer.

  9. LabUp!

    LabUp! is here to help people around the world in establishing nonprofit Open Device Labs which helps others access a large number of mobile devices for testing, leading to an ultimate improvement of the mobile web & app experience both for developers and consumers.




Appendix 4

Here you will find recommendations for:

  1. Font stacks that you can copy and use in your project.

  2. Web safe fonts, i.e. fonts that are most common on most versions of Windows, Mac, and Linux.

    You can copy these and feel confident using them as your overall default font stack, or as a fallback font stack for a more interesting typeface.

  3. Typefaces that go well together, say one font for your headers and another contrasting font for your body.

  4. Mobile fonts.

  5. Font classifications and definitions.

Font Stack Roundup

  1. 06/26/08 - Better CSS Font Stacks

    One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use.

  2. 08/15/08 - Web fonts can be nice (honest)

    ...but it strikes me that we are still not using the few fonts we can play with to their full potential. So today Ladies and Gents, I present the case for these, somewhat under-used gems...

  3. 01/08/09 - 8 Definitive Web Font Stacks Article

    The font stacks listed here are grouped together by the universal font that forms the base of that stack. A designer can therefore decide on a typographical look for their site, grab the appropriate font stack, and tweak it to suit their needs.

  4. 09/22/09 - Guide to CSS Font Stacks: Techniques and Resources

    CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

  5. 03/19/12 - Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows

    Web fonts are gaining in popularity now, but they can still be a bit of a challenge to use. Copyright issues often require the use of a third-party font service, which can be risky and expensive.The good news is that all major operating systems come with a variety of fonts that you can use to create your font stacks.

  6. 04/21/12 - Font Stacks

  7. 06/18/12 - The 10 Best Script and Handwritten Google Web Fonts

    A good script is hard to find. I’m extremely picky when it comes to this particular area of typefaces and tend to hate most of what I see. With this post, you can skip the work of sorting through the crap and cut straight to the awesome scripts that are readable, attractive and perfect for your site.

  8. CSS Font Stack

    Web Safe and Web Font Family with HTML and CSS code.

  9. Revised Font Stack

    Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Web Safe

  1. 2010? - 16 Gorgeous Web Safe Fonts To Use With CSS

    I have gathered together a nice resource list of stunning web safe fonts that you can use with CSS stylesheets.

  2. 12/12/10 - Web Safe Fonts Cheat Sheet v.3

    This is the third major overhaul of the Web Safe Fonts Cheat Sheet, which now includes examples of fonts suitable for the CSS @font-face property, along with revised CSS font stacks, font installation breakdowns by operating system, and some of the new Google Font API fonts.

  3. Common fonts to all versions of Windows & Mac equivalents

    Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts".

  4. CSS Font Stack

    A complete collection of web safe CSS font stacks

  5. Combined font survey results

    Is that font Web safe? Code Style font survey results show the most common fonts on Windows, Mac and Linux computers to help you build a Web safe font stack.

  6. CSS Web Safe Font Combinations

    The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Combinations

  1. 09/18/09 - 19 top fonts in 19 top combinations

    I recently compiled a list of the 19 most popular fonts according to usage by graphic designers from all over the web. I could have had 100, but I got it down to under 50, and from there whittled it down to just the 19 best fonts.

  2. 03/10 - Four Techniques for Combining Fonts

    Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting.

  3. 10/23/11 - 10 Great Google Font Combinations You Can Copy

    Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. You’ll be able to skim through and instantly grab out selections that you think are appropriate for your projects.

  4. 11/12/11 - 25 Fresh Examples of Beautiful Typeface Combinations in Web Design

    From print to web layouts, typography is the center piece of a good design and today we gathered a few examples of beautiful typeface combinations in web design to inspire you.

  5. 03/20/12 - 10 More Great Google Font Combinations You Can Copy

    ...it’s becomingly increasingly difficult to sift through the library to find the best selections. We’ve got your back though and are serving up another great collection of Google Web Font combinations ripe for the stealing.

  6. 11/26/12 - A Beginner’s Guide to Pairing Fonts

    Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

  7. Pairing Fonts is Like Feeding Children..

    When starting a web design project there are a lot of difficult decisions to make, including the classic: selecting fonts. Well executed typography can engage visitors, when they’d otherwise perhaps skim over the main body of content.

  8. Combining Typefaces

    Combining typefaces is challenging and fun, but it takes practice. Successful combinations are partly a matter of good taste, which can be tough to develop.

  9. Typeface Combinations

    Although the idea of typeface combining revolves around contrast, the best serif and sans serif combinations have similar characteristics.

  10. Type Genius

    Find the perfect font combo for your next project.

Mobile

  1. 5 Tips for Excellent Mobile Typography

    Mobile typefaces have a lot in common with Goldilocks and the Three Bears. Everything needs to be just right. To look best on a small screen and be readable at a smaller size, the best font has the following 5 qualities...

  2. Mobile Design Typography is Vitally Important ... and Challenging

    One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.

  3. iOS Fonts

    A Place for Happy Typography (includes links to Android and Windows Phone 7 default typography.)

Font Classifications and Definitions

  1. 03/02/11 - The Next Big Thing in Online Type

    Beginning in 2006, Microsoft says it will ship with its operating system and other software products six brand new typefaces created especially for extended on-screen reading.

  2. Typefaces, like most things, are made up of constituent parts.

    Typefaces, like most things, are made up of constituent parts. It is the characteristics of these parts that gives typefaces their character.

  3. Font Factory

    Fonts fall into logical categories, e.g. Serif or Script etc. But within a category, there are many subtitles, so we have assigned each font a specific sub-category that best describes the unique elements of a font. Each of the primary categories below have further categories to explore.

  4. Type Classifications

    Adobe typefaces are organized in the Type Classification pop-up menu according to a simplified version of the internationally recognized system adopted by the Association Typographique Internationale (ATypI).

  5. Typeface Classifications

    Serif and Sans Serif. A serif is a small projection that finishes the end of a stroke of a letter. Sans is an early French term based on a Latin word that means without.

  6. What are the different categories for fonts?

    You can browse fonts in the following categories...




Appendix 5

Font Services and Tools

The font services below are listed in alphabetical order, some are free and others subscription-based, but together they represent what I consider be the best font services out there.

The tools I've listed, if needed, will help you deliver a superior typographic experience for your end-users.

Services

  1. Font Squirrel

    Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.

  2. Fontdeck

    Maintain your distinct brand online without resorting to time-consuming hacks. Use real text with professional typefaces optimised for the web.

  3. Fontspring

    Font Licensing Doesn’t Have To Suck - Fontspring is a unique font license distributor. Our goal is to make buying fonts easy.

  4. Google Web Fonts

    Google Web Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. We believe that everyone should be able to bring quality typography to their web pages and applications.

  5. Typekit

    This will change the way you design websites. Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

  6. WebINK

    The WebINK service lets you put pro-quality fonts on your website. And we deliver these fonts to every visitor's browser in an instant.

Tools

  1. Lettering.JS

    A jQuery plugin for radical web typography - Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control.

  2. FitText.js

    A jQuery plugin for inflating web type - FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

  3. Ffffallback

    Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

  4. Font Stack Builder

    Use the Code Style font stack builder to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.

  5. Modular Scale

  6. Relative <font-size> calculator

  7. Soma FontFriend

    Font­Friend is a book­marklet for typo­graph­i­cally obsessed web design­ers. It enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages...

  8. Type Scale

    A Visual Calculator

  9. Typetester

    The Typetester is an online application for comparison of the fonts for the screen.

  10. Web Font Specimen

> Real web type in real web context. Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web.

Generator

  1. Font2Web

    This little tool converts any .ttf (TrueType Font) or .otf (OpenType Font) file to .ttf, .otf, .eot, .woff and .svg files. It also creates a CSS file and a demo HTML file to show you how to use webfonts on your website - using CSS @font-face.

  2. Web Font Generator

Em's

  1. Em Calculator

    Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

  2. Page width in ems

  3. PXtoEM.com

    PX to EM conversion made simple.




Appendix 6

Choosing Typefaces

The following is designed to help you choose your typefaces. Here are some articles, and an excellent transcript from a presentation by Jason Santa Maria.

Choosing Typeface Articles

  1. 12/14/10 - “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces

  2. 08/25/11 - A Brief Primer on Typeface Selection

  3. 12/01/11 - 6 Questions You Should Ask Yourself When Choosing Fonts

  4. 09/26/12 - Make a Statement with Type

Mobile

  1. 10/02/11 - 5 Tips for Excellent Mobile Typography

  2. 11/12/12 - Mobile Design Typography is Vitally Important ... and Challenging

Jason Santa Maria On Web Typography

Jason Santa Maria, in a presentation at Build 2011 called On Web Typography spoke about picking typefaces. I've transcribed it here in part and slightly paraphrased:

  1. Questions to ask yourself: What are you using it for? How will it be used? Under what conditions? From the slide "considerations":

    Dimensions Are there requirements for how much text must fit in a given region?

    Special Features - Do you require special features your typefaces What features do you require? Multiple weights, lining & old-style figures, small caps, etc?

    Prolonged Reading - Is this a book or a long format periodical?

    Internationalization - Does a given font support all the special characters of the language to be used?

  2. Readability and distinctness in characters matters. Will the typeface cause the reader to become confused, or tired of reading it?

  3. Avoid readymades. Fonts with design baked in.

  4. Develop your own personal palette. Find typefaces that you like, that you gravitate to, and keep using them. Get to know a typeface.

  5. Get to know the history of a typeface. When was it designed? Why was it designed? This should complement not contradict your text/subject.

  6. Find typefaces that embody a mental association: terms you want to associate with the design.

  7. Pair fonts that are designed together, they will work well together. The serif for the body text, the sans serif for the supplementary stuff like page numbers and captions.

  8. Use alternatives for commonly used typefaces get the same type of feel without being the same as everyone else. For example Helvetica. You can use an alternative rather than the frequently used Helvetica itself: FF Dagny, Proxima Nova, Museo Sans, Prehematica Slabserif.

  9. Try it out! Test out your ideas. See how it looks. See how it reads. See how it feels. In long-form text, in short-form text. Small columns, wide columns. Big text, small text. Doing this gives you a very real impression on how other people are going to see it.

NOTE: This work is copyrighted.




Appendix 7

A Brief History of Web Font Sizes

Over the years I've referred to different articles when determining font size for projects I'm working on. Here they are in chronological order. A few are not so relevant today and some of them are exceptional! I'll let you be the judge of that, and have included them here as a reference.

  1. 05/11/01 - CSS Design: Size Matters

  2. 12/31/02 - Text Sizing

  3. 04/04/09 - Power To The People: Relative Font Sizes

  4. 05/18/04 - How to size text using ems

  5. 12/08/05 - Don’t compose without a scale

  6. 04/09/07 - Setting Type on the Web to a Baseline Grid

  7. 11/20/07 - How to Size Text in CSS

  8. 09/30/08 - CSS Font-Size: em vs. px vs. pt vs. percent

  9. 05/01/11 - Font sizing with rem

  10. 05/03/11 - More Meaningful Typography

  11. 10/28/11 - R(a|ela)tional Design

  12. 12/09/11 - Composing the New Canon: Music, Harmony, Proportion

  13. 07/18/12 - How we learned to leave default font-size alone and embrace the em

  14. 07/19/12 - On ems and rems

  15. 11/08/12 - Why Ems?

  16. 11/00/13 - Which CSS Measurements To Use When




Appendix 8

Color Tools

  1. 0to255

    0to255 is a simple tool that helps web designers find variations of any color.

  2. Color Blender

    Pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you'd like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.

  3. ColorExplorer

    Simply put, ColorExplorer is an online toolbox for working with color palettes.

  4. Color Palette Creator

This tool was inspired directly by the excellent Creating Color Palettes article by Andy Clarke. It will create 10 shades of the base color, located top-left, at varying degrees of opacity.

  1. Color Thief

Grab the color palette from an image. Uses Javascript and the canvas tag to make it happen.

  1. color.hailpixel

  2. ColorBlender

    To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated.

  3. Colorblind Web Page Filter

  4. Color Schemer

Online Color Scheme Generator

  1. Colorspire

Create Color Schemes, Test Color Combinations

  1. ColorTo.me

    Create an image, share a pallet.

  2. colourco

    Find your colour scheme.

  3. Contrast Ratio

    Easily calculate color contrast ratios. Passing WCAG was never this easy!

  4. Contrast-A

    Contrast-A checks color combinations for sufficient contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as the results according to older accessibility guidelines, WCAG 1.0 (Difference in Brightness and Color).

  5. Grab Website Colors - Color Scheme Extraction Tool

    The website color extraction tool is used to grab colors from a website.

  6. Infohound Color Schemer

    This color schemer is a simple tool to help you experiment with various color schemes for your next web or print project.

  7. Material UI Colors

  8. Mother-effing hsl

Color Wheels

  1. Adobe Kuler

    Adobe Kuler is a web-hosted application for generating color themes that can inspire any project. No matter what you're creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

  2. Color Scheme Designer

  3. Color Calculator

    Use the free Color Calculator to explore creative color options for your design project. Simply pick your base color(s), choose a color harmony, tweak/explore as needed, and see results.

  4. Color Wizard

    The color wizard lets you submit your own base color, and it automatically returns matching colors for the one you selected.

  5. Sphere: Color Theory Visualizer

Image Based Color Generators

  1. Adobe Kuler

  2. color hunter

    create and find color palettes made from images

  3. Color Palette FX

    Color Palette FX is a color tool for print and web design that creates color palettes from photos.

  4. Color Palette Generator

    Generate a color palette based on an image.

  5. COLRD Image DNA

  6. Genopal

    Create harmonious colour schemes with Genopal

  7. Image to Colors Palette Generator

    Welcome to CSS Drive's Image to Colors Palette Generator! Upload an image to generate a color palette based on the image's primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

  8. Pictaculous

    Ever wonder what colors to use with an image? Upload your image – get a color palette!

Palettes

  1. COLRD

    ColRD: Create and share color inspiration with the world.

  2. ColoRotate

    Colors come to life in 3D! Browse color palettes, or create your own. Adjusts, mix and blend to your hearts content.

  3. COLOURlovers

    Share Your Color Ideas & Inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

  4. colr.org

    Play with colors and color schemes!

  5. Kuler

    Adobe Kuler is a web-hosted application for generating color themes that can inspire any project. No matter what you're creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Collections

  1. 216 Web Safe Colors

  2. BrandColors

    A collection of major brand color codes...

  3. Flat UI Colors

  4. Fifty Shades of Grey: A Review




Appendix 9

Browser and Mobile Testing

Check Website on Multiple Browsers

These services offer screenshots of your website on different browsers.

Free

  1. modern.IE

    Introducing modern.IE A new set of tools to help you support modern and older versions of Internet Explorer

  2. Browser Shots

    Check Browser Compatibility, Cross Platform Browser Test

Free Trial

  1. Browser Stack

    Live, Web-Based Browser Testing Instant access to all desktop and mobile browsers. Say goodbye to your setup of virtual machines and devices.

  2. Cross Browser Testing

    Cross browser test your website in dozens of browsers with instant results

  3. mogo

    We help you ship higher quality web sites and apps, without all the high costs & monotony of manual testing. Our visual analysis will let you know when a site or app doesn't look the way it should. You don't even have to write any code — we'll figure out what your content should look like and tell you when it's broken.

  4. Multi-Browser Viewer

    Cross Browser Testing, incl Selenium Automation of Standalone Web Browsers!

  5. Spoon.net

    Run desktop applications with no installs

  6. Browshot

    Screenshots as a Service Powerful. Fast. Reliable.

Online Device Views

See what your customers see.

  1. iPad Peek

  2. iPhoney

    A free iPhone web simulator for designers.

  3. Opera Mini Simulator

    Below is a live demo of Opera Mini 7.1 that functions as it would when installed on a handset.

  4. Mobile Phone Emulator

  5. Test Your Site

    This tool shows you how your current site looks on a smartphone, and provides a report on what’s working and what you can do better. To get started, click below.

  6. The Responsinator

Online Responsive Views

  1. Responsive Web Design Testing Tool

    This tool has been built to help with testing your responsive websites while you design and build them.

  2. Screenfly

    Test Your Website at Different Screen Resolutions

Free Online Tests for Mobile

  1. Mobile Readiness Test

    Are you maximizing the mobile opportunity? The Gomez Mobile Readiness Test evaluates how well your website will perform on a mobile phone. Instantly get a score out of 100 based on an in-depth analysis of over 30 proven mobile web development best practices including detailed suggestions on how to fix the issues identified.

  2. mobiReady

    The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards. The free report provides both a score (from 1 to 5) and in-depth analysis of pages to determine how well your site performs on a mobile device.

  3. W3C mobileOK Checker

    This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests.

Mobile Application Testing Services

  1. DeviceAnywhere

    Mobile Application Testing on Real Devices

  2. Perfecto Mobile

    Mobile Application Testing on Real Devices

Mobile Simulators/Emulators

  1. Adobe Edge Inspect

    Edge Inspect allows you to easily pair multiple smartphones and tablets with your computer and enables you to work more efficiently by providing synchronous browsing, remote inspection and the ability to take screenshots of your mobile web content from connected devices.

  2. BlackBerry Simulators

    Use the BlackBerry 10 simulator to view, test and debug your application.

  3. Opera Mobile Emulator

    Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging.




Appendix 10

Browser Market Share and Countdowns

  1. Realtime Web Analytics With no Sampling

    NetMarketShare.com :: Market Share Statistics for Internet Technologies

    Methodology

  2. IE6 Countdown

    Over 10 years ago, a browser was born. Its name was Internet Explorer 6. Now that we're in 2014, in an era of modern web standards, it's time to say goodbye.

  3. Windows XP SP3 and Office 2003 Support Ends April 8th, 2014

  4. The Internet Explorer 8 Countdown

    This website is dedicated to watching Internet Explorer 8 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 8, saving hours of work for web developers.

Browser Support and Comparisons/Compatibility

  1. Comparison of layout engines (HTML)

    The following tables compare HTML compatibility and support for a number of layout engines.

  2. HTML5 Please

    Use the new and shiny responsibly. Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

  3. Internet Explorer Testing Center

    For developers, consumers, and enterprises successful W3C and Ecma International web standards are important for defining browser behavior. Comprehensive test suites help drive clear and complete standards, well-written specifications, and interoperable web browsers that render the same markup consistently.

  4. HTML5test

    how well does your browser support HTML5?

  5. FindMeByIP Browser Support Revealed

    A free tool from Bath & Bristol Web Design Agency

  6. “Send clients a url and get detailed reports”

    FindMeByIP enables you to easily find out information about your clients' web browser and operating environment.

  7. Can I use...

    Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.