Wednesday, October 30, 2013

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.

Responsive Web Design Infographic

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

Thursday, October 24, 2013

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.

Friday, August 30, 2013

Thursday, August 08, 2013

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:


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.

Friday, June 28, 2013

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:

Monday, March 04, 2013

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!

Monday, January 07, 2013

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