Firefox DevTools!

There are some new developer tools in Firefox. New tools include a Flexbox Inspector, Grid Inspector, Shape Path Editor, Fonts, Editor, Changes Panel, Inactive CSS, and Accessibility Panel. Smashing Magazine has a great overview of the new tools. heckout https://developer.mozilla.org/en-US/docs/Tools for Mozilla's documentation. 

10th Edition of Web Development & Design Foundations with HTML5!

New 10th Edition!

The 10th edition of Web Development & Design Foundations is currently in press and should be available Spring 2020.

Building on this textbook’s successful ninth edition, new features for the tenth edition include the following:

• Chapter 7 has been renamed Responsive Page Layout, takes a mobile first approach, and has an expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout

• Form layout with the CSS Flexbox and Grid Layout Systems

• Updated coverage of HTML5 elements and attributes

• Updated code samples, case studies, and web resources

• Expanded treatment of page layout design and responsive web design techniques

• Updated reference sections for HTML5 and CSS

• Additional Hands-On Practice exercises

Visit http://webdevfoundations.net for more information about the new book.  

Lazy Loading Images and Iframes with the Google Chrome Browser

Lazy loading is a term that describes delaying the loading of  below-the-fold images until the web page visitor scrolls down the page to them. The major benefits are quicker load times, less bandwidth, and reduced memory usage. Until this announcement by Chrome, developers needed Javascript event handlers create this effect.

The latest version of Chrome browser (Chrome 76) will support native lazy loading, by implementing the new HTML loading attribute for img and iframe elements. 
Values for the loading attribute are:

• auto (default browser loading)
• lazy (defer loading the resource until it reaches a calculated distance from the viewport)
• eager  (load the resource immediately)

Here’s an HTML example of adding lazing loading to the img element:

HTML img element with the loading attribute

Although not yet part of an official W3C HTML5 Recommendation, the loading attribute is in the process of being added to the HTML5 standard and is documented at https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute. 

An Event Apart Presentation by Jen Simmons

Check out this excellent presentation by Jen Simmons at An Event Apart: "Everything You Know About Web Design Just Changed"
You will see an  an overview of how layout has changed in stages since the beginning of the Web, as folks got new ideas, implemented them, found issues, and then tried new ideas.... a process we are still going through today... Simmons calls today's era of Grid and Flexbox layout "Intrinsic Web Design" #webdesign #layout #intrinsicwebdesign

10 Skills You Need to Land a Job as a Front-End Developer

The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS textbooks get you started on the skills you need to become a front-end web developer....

Graphic courtesy of Skillcrush.com

New 5th Edition! Basics of Web Design: HTML5 & CSS

My new book, the 5th edition of Basics of Web Design: HTML 5 & CSS, is available for pre-order at Amazon! As an Amazon Associate I earn from qualifying purchases.

 The 5th Edition features a major change from previous edition. Although classic page layout methods using CSS float are still introduced, there is a new emphasis on Responsive Page Layout utilizing the new CSS Flexible Box Layout (Flexbox) and CSS Grid Layout techniques. The 5th Edition features new content, updated topics, hands-on practice exercises, and case studies.

More info at https://webdevbasics.net

Concise List of New WCAG 2.1 Guidelines

Check out a handy list of the new WCAG 2.1 guidelines along with why they are helpful to website visitors at https://objectpartners.com/2018/08/09/the-whats-and-whys-of-wcag-2-1/

What's New in WCAG 2.1?

WCAG 2.1 extends WCAG 2.0 -- so what's new? There are 17 new Success Criteria items in WCAG 2.1. Twelve of these 17 are level AA -- which is the level that most websites strive to meet. See http://intopia.digital/articles/whats-new-in-wcag-2-1/ for a For a quick overview of what's new  in WCAG 2.1.

WCAG 2.1 is an Official W3C Standard!

WCAG (Web Content Accessibility Guidelines) 2.1 recently reached Recommendation status. WCAG 2.1 extends and expands WCAG 2.0 success criteria.

Here are some helpful resources:

• Understanding WCAG 2.1 
• WCAG 2.1 At a Glance 
• Quick Reference: How to Meet WCAG 2.1

New 9th Edition of Web Development & Design Foundations with HTML5 is available!

Announcing that the new 9th edition of Web Development & Design Foundations with HTML5 is now available for sale at Amazon.com!

 Building on the textbook's successful 8th edition, the 9th 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 9th edition include: 

• Updated coverage of HTML5 elements and attributes 
• Expanded coverage of responsive web design techniques and CSS media queries 
• Expanded coverage of responsive image techniques including the new HTML5 picture element
• Introduction to new layout techniques -- CSS Grid Layout and CSS Flexbox Layout 
• Updated reference sections for HTML5 and CSS 
• Additional Hands-On Practice exercises 
• Updated Case Studies 
• Updated code samples and web resources 

 For information about this new edition, visit http://webdevfoundations.net.

Newest version of Web Content Accessibility Guidelines (WCAG)!

WCAG 2.1 is now in Candidate Recommendation Status. WCAG 2.1 extends WCAG 2.0 by adding new success criteria and guidelines. Visit https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1 to read about the new features.

Basics of Web Design 4th Edition Available at VitalSource

The 4th edition of Basics of Web Design: HTML5 & CSS3 is available at VitalSource: https://www.vitalsource.com/products/basics-of-web-design-terry-felke-morris-v9780134444413

Basics of Web Design 4th Edition Available on Chegg!

Announcing that the 4th edition of Basics of Web Design: HTML5 & CSS3 is available for rental on Chegg.com.  

This edition is part of a Pearson Publishing pilot program intended to save students money by providing lower-cost book rentals. 

Adobe Announces End of Flash after 2020

Adobe recently announced that the Flash Player will no longer be developed and distributed after 2020. When Flash was developed in the early days of the Web, the application offered a method to provide interactive, animated, multimedia content that was not possible with HTML and JavaScript. Over the years, technologies including HTML5 Video, HTML5 Audio, HTML Canvas, SVG, and robust JavaScript interfaces have been developed and have elminated the need for Flash. There is a lot of legacy Flash content that could be lost forever when the Flash Player is no longer supported. There is a petition to open source the Flash Player to keep this legacy content available.

Thimble -- A Free Online Code Editor

Thimble is a free online code editor supported by the Mozilla Foundation. After you sign up you can create multi-file projects -- including HTML, CSS, JavaScript, and ming files. There is an instant preview feature. When you are ready, you can publish your work to the Web and Thimble provides you with the URL. Thimble is an extremely useful tool for educators and students.

WCAG 2.1 Working Draft Available

Mobile devices were in their infancy back when the WCAG 2.0 guidelines were developed. The W3C has just released a first draft of a long-awaited update: WCAG 2.1 for public comment. The purpose of WCAG 2.1 is to extend WCAG 2.0 and introduce additional success criteria including mobile device accessibility, low vision accessibility, and cognitive and learning disability accessibility. WCAG 2.1 supports all WCAG 2.0 accessibility success criteria. So, if a web page meets WCAG 2.1 success criteria, the page also meets WCAG 2.0 success criteria. The W3C invites you to read the working draft of WCAG 2.1 and submit feedback.

New 4th Edition of Basics of Web Design: HTML5 & CSS3!

The new 4th edition of Basics of Web Design: HTML5 & CSS3 is now available!

Building on the textbook's successful 3rd edition, the 4th 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 4th edition include:

• Updated coverage of HTML5 elements and attributes
• Expanded coverage of responsive web design techniques and CSS media queries
• Expanded coverage of responsive image techniques including the new HTML5 picture element
• CSS coding techniques for dynamic menus
• Updated reference sections for HTML5 and CSS
• Additional Hands-On Practice exercises
• A new Case Study
• Updated code samples and web resource
• New Appendix introducing CSS Flexbox Layout

Section 508 Refresh

The US Access Board has released a final rule that updates the Section 508 requirements to harmonize with WCAG 2.0 Level AA Success Criteria. The Information and Communication Technology (ICT) Standards and Guidelines were published on 1/18/2017. The standards apply to “electronic and information technology developed, procured, maintained, or used by Federal agencies covered by section 508 of the Rehabilitation Act of 1973.” The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS3 textbooks follow the WCAG 2.0 Level A & AA Success Criteria so students are prepared to create accessible websites. (post updated 2/1/17)

HTML5.1 is Now in Recommendation Status

The W3C has been busy this fall — HTML 5.1 has reached Recommendation status! https://www.w3.org/blog/2016/11/html-5-1-is-the-gold-standard/

Essential Guide to Digital Accessibility Infographic

When you provide for digital accessibility you design and configure mobile applications, digital documents, and web pages so that everyone, including those with disabilities, can have a similar user experience. Check out Deque's The Essential Guide to Digital Accessibility Infographic.