Everything You Need to Know About the Color Blue

Check out the Coolness of Blue in Web Design infographic to find out what types of websites use the color blue, which brands use blue, how different cultures perceive the color blue, and more!

Free Stock Image Resources

As a web design student builds a portfolio of website projects, it can be quite time-consuming to create images. TNW provides a curated list of the best free offers a list of the best free stock image resources on the Web.

New 7th Edition for Web Development and Design Foundations with HTML5

It's exciting to announce that my new book, the 7th edition of Web Development and Design Foundations with HTML5, is available at Amazon. 

Building on the textbook's successful 6th edition, the 7th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards.

 Updates for the 7th edition include:

• Expanded coverage of new HTML5 elements and attributes 
• Expanded coverage of designing for the mobile web with new sections on responsive web design, mobile web design best practices, viewport meta tag, CSS media queries, flexible images, and testing mobile display 
• Expanded coverage of CSS3 properties, including CSS3 flexible box layout 
• New sections providing an introduction to jQuery 
• Updated code samples, case studies, and web resources

The textbook companion website has a page for each chapter in the text containing the links for URLs listed in the book, information on emerging trends, additional examples, corrections, and review activities.

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

New generic Top Level Domain (gTLD) Names

It often seems like all the best .com domain names are already taken, but that won't be a problem much longer with ICANN's release of new generic Top Level Domain (gTLD) extensions. New gTLDs that were announced late 2013 and early 2014 include a wide variety of options such as .photography, .technology, .voting, .tips, and .guru. A complete list is available at http://newgtlds.icann.org/en/program-status/delegated-strings. Major domain registrars, such as GoDaddy, are offering preregistration for many new gTLDs.

Wondering about UTF-8? Check out this video....

Computerphile presents a video of Tom Scott explaining what you always wanted to know about character encoding in ASCII and UTF-8.

Handy Infographic About Responsive Web Design

This handy infographic by Dot Com Infoway highlights the shift towards mobile devices. Responsive Web Design (RWD) techniques provide web designers a way to develop a single website that displays well and is usable on multiple devices, platforms, and screen sizes.



Source: Dot Com Infoway – Software and Mobile Application Development Company

Four New gTLDs Announced

The Internet Corporation for Assigned Names and Numbers (ICANN)  announced that the first four of potentially 1,400 new generic Top-Level Domains (gTLDs) have been delegated for use.

The new four gTLDs and their registries are listed below.

• شبكة  –  "web/network" in Arabic
  Registry: International Domain Registry Pty. Ltd.
• онлайн  –  "online" in Cyrillic
  Registry: CORE Association
• сайт  –  "site" in Cyrillic
  Registry: CORE Association
• 游戏 –  "game(s)" in Chinese
  Registry: Spring Fields, LLC

Expect additional new gTLDs to be made available for use over the next few years. Visit https://gtldresult.icann.org/application-result/applicationstatus for a list of gTLD applications and their status.

HTML5 Popularity Among Fortune 500 Companies

Interesting infographic — note the increased trend in use of HTML5!


HTML5 Popularity Among Fortune 500 Companies - An infographic by the team at INCORE Web Design

"Ultimate Guide" to Selecting Color Schemes

Check out the handy introduction to the use of color on web pages (including examples) at http://www.motocms.com/blog/project-news/color-combination-ultimate-guide/

Browser Tools for Testing Responsive Web Design

While the best way to test your responsive web designs is to use a variety of browsers and devices (including desktop, tablet, and smartphone), web developers often begin testing RWD by resizing the desktop browser. Browser resizing is handy but can sometimes be a little awkward. Check out the following online tools that will provide instant views of your web page in a variety of screen sizes and devices:

• Am I Responsive 
• DevicePonsive
• Responsive Test
• Screenfly 

It's fun to view your responsive website on these browser tools.  The true test, however, is to view your web pages on a variety of physical mobile devices.

New main element in HTML5.1

The HTML5 structural elements (header, nav, footer, section, article, and aside) have a long-awaited new friend: the main element. Use the main element to contain the main content of a web page. For more details about the main element, check out the following resources:

• Main element added to HTML 5.1
• W3C HTML5.1 Spec

Responsive Design Beyond the Pixel

With so many mobile devices displaying such a variety of screen resolutions the days of choosing breakpoints for responsive display based solely on pixel value are behind us.

 Ben Callahan at Sparkbox draws an analogy between the Matrix's concept of "there is no spoon" to "there is no breakpoint" — it all depends the content. Callahan also suggests using ems instead of pixels in media queries.

In a recent Smashing Magazine article, "Logical Breakpoints for Your Responsive Design", Vasilis van Gemert emphasizes that "common" screen sizes no longer exist and suggests configuring breakpoints using readabilty theory.

Here are two heuristics cited by van Gemert that can be helpful as we move from pixel-perfect breakpoints to content-influenced breakpoints:

•  “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” — Robert Bringhurst  The Elements of Typographic Style
• “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” — Josef Müller-Brockmann  Grid System in Graphic Design

Author van Gemert suggests that web designers start with a small screen layout and configure a break each time the "width of the main content grows wider than either 75 characters or 10 words".

Responsive design has moved beyond the pixel — it's all about the content!

New 2nd Edition for Basics of Web Design: HTML5 & CSS3

It's exciting to announce that my new book, the 2nd edition of Basics of Web Design: HTML5 & CSS3, is available at Amazon. 

Building on the textbook's successful first edition, we kept what you like — topics introduced in two pages, color illustrations and screen captures, lots of hands-on practice exercises, and a case study website that students build as they work through the book. We heard your suggestions to remove XHTML topics and to add another case study.  There are now two running case study websites for students to practice with. 

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

HTML5 is One Step Closer to a Standard

The W3C announced recently that HTML5 has progressed to Candidate Recommendation status. This means HTML5 is relatively stable and that web designers should feel confident using HTML5 syntax on web pages. The W3C indicated that new work and future changes will be part of the HTML5.1 specification. See http://news.cnet.com/8301-17939_109-57559512-2/w3c-buttons-down-html5-opens-up-html5.1/ for more information.

Graphic Designers: Making the Transition from Print to Web

Many experienced graphic designers are retooling and studying web design to enhance their skillsets to meet the changing expectations of potential employers in the ever-evolving field of graphic design. As I've taught web design courses for over a decade, I've noticed that students who have a background in graphic design often need to shift their expectations when designing for the Web.

I came across an interesting description of this paradigm shift while reading an article about the Evolution of CSS. Here is a summary of the article's description of the difference between print design and web design:

Designing for Print

When designing for print, the designer is in control of:

• page size
• content amount
• fonts and font size
• pixel-perfect layout
  
  

Designing for the Web

When designing for the Web, the designer must configure pages that display on many different types of devices, such as typical desktop monitors, large monitors, small netbook monitors, tablets, smartphones, etc. Also, the designer must allow for varied display conditions, including:

• screen resolutions
• aspect ratios
• font support
• viewport reszing
  
  

Expect the Unexpected

A key point in the article: "Web layout has to be flexible, adaptable, automatic, and robust. It can't fail because it's loaded in an environment that wasn't quite what the designer had in mind... because that happens all the time."

Responsive Web Design to the Rescue

Responsive web design techniques including CSS media queries, flexible images, and relative font sizing (ems and percentages) are essential tools to designing websites that display well on the multitude of varied devices that people use to access web pages. It's a complex, but exciting, time to be a web designer.

Split in Groups Developing the HTML5 Standard

The W3C is  planning to create a single, definitive standard (the snapshot) while the WHATWG’s living standard will continue to add new features and receive refinements. See more at HTML5 Splits – Snapshot or Living Standard? - 'Net Features - Website Magazine

First Impressions Matter

Your mom always told you that first impressions are important and she was right! Check out the Five Second Test (http://fivesecondtest.com) to find out more about how visitors form instant perceptions of your website design. This could also be a useful tool to help decide between multiple potential layouts or redesigns.

Summer Reading List from A List Apart

Here's the annual Summer Reading List from A List Apart:

Wondering about the IPV4 to IPV6 switchover?

For a brief introduction to the switch from IPV4 to IPV6, read Virginia DeBolt's post In Case You Didn’t Notice – the Internet is All New

The HTML5 Edition Is Here!

The new HTML5 edition of my popular textbook, Web Development and Design Foundations with HTML5 (6th edition), is available at Amazon.com. This edition focuses on how to use HTML5 and CSS3 today and while introducing new elements and techniques that will be utilized in the future.

The release of the 6th edition also marks the 10 year anniversary of the textbook — the 1st edition was published back in 2002 — with new editions about every 18 months to keep current with industry trends.

Visit the textbook's companion website at http://webdevfoundations.net for more information about the book.