FUTURE–FOCUSED
WEB DESIGN &
DEVELOPMENT

CSS3 is bringing more power to Front End Developers than aver and making strong communication between designers and FEDs even more important. CSS3 is allowing for such rapid iteration that it's important to take advantage of but allows for such a variety in experiences across browsers that it's important that designers and FEDs both understand its impact.

Say a designer mocks up an element that is a flexible height and width with rounded corners, a gradient, drop shadows, inner shadows, borders containing multicolumn text. In the days of slicing and dicing images multiple requests like this can blow a small budget. Using CSS3 we can create effects like these with a few lines of code much faster than we ever could before.

1. html5please.com
2. caniuse.com
3. css3pie.com
4. www.colorzilla.com/gradient-editor
5. sass-lang.com

1. Have a discussion with the designer to see what parts of the layout are critical to the brand and which can take advantage of CSS3.
2. Check to see if you need "Vendor Prefixes" (-o-, -webkit-, -moz-, -ms-) for each css3 property.
3. Have a fallback if needed. If IE7 doesn't support your background gradient make sure the page doesn't display white text on a white background.
4. Weigh the pros and cons of a polyfill

Webfonts have come a long way in only five years. Evolving from flattened images or Flash to canvas replacements, and finally embedded fonts that render on the web but can be obfuscated to prevent local installation. There are many third-party options available to host and serve the font files on your site, but the approach we stand behind cuts out all of the work-arounds and puts you in control of your web typography

@font-face {
  font-family: 'MyFontFamily';
      src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
       url('myfont-webfont.woff') format('woff'),
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
  }

A designer mocks up a new web design using a library of open-source or web licensed fonts. Using the stylesheets that often accopany these packages, you can sample the recommended font declarations, or directly include the styleshseets in your head. For the ambitious, these fonts can then be mapped to certain font-weights and styles for the text on your page.

Caveats:

This technique is only an option when you aren't locked into a given font. Due to licensing restrictions you may find yourself limited to third-party options, or going a more traditional route.

Links:

• Font Squirrel Generator
• Fontspring syntax explination
• The League of Movable Type
• Google web fonts

View Lesson

All browsers support webfonts in one way, shape, or form although the file format varies by browser. The common font-face syntax supports all formats and all browsers back to Internet Explorer 6.

New HTML tags and attributes are building on what HTML is able to communicate. HTML5 lessens the browser's dependance on 3rd party plugins. It also adds more context to document structure and text-level semantic markup giving search engines more context. Some o the most commonly referred to updates are for embedded content like video and audio.

Right now you can update the doctype in your website and browsers should make the transition pretty easy but using the new tags is were you really start to see a benefit. If you had a client request a blog that posts video content you can use HTML5 to define the header, footer and navigation elements of your content, breakout posts as individual articles and display video and audio without flash to modern browsers including mobile.

1. joshduck.com/periodic-table.html
2. html5please.com/#video
3. videojs.com
4. mediaelementjs.com
5. handbrake.fr
6. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

1. IE8 and older needs a small amount of javascript to be able to style html5 elements. This means uses without javascript enabled on IE8 and older will not see your site as you intended, jQuery 1.7+ has this included automatically.
2. Video has extremely strict encoding parameters for mobile. Consider using youTube to deliver video. You cannot embed private videos but you can make them unlisted
3. iPhones have restrictions on video dimensions, bitrate, frames/sec and number of key frames based on the connection (3g or WiFi).

Responsive websites are becoming increasingly popular, and rightfully so. With the incredible growth of mobile and tablet market it is safe to say that designing for a specific resolution will put you at quite a disadvantage and a responsive solution makes it easier to manage content. It is important to note that there are several factors to consider when approaching a responsive implementation such as:

1. Analytics - How are users currently viewing your content?
2. Speed - Will your beautiful design be ignored because it takes too long to load?
3. Logistics - Does it make sense to have a responsive layout or a separate mobile site?

Responsive layouts rely on media queries to adjust a websites layout according to view port dimensions. This lesson shows an example of how to target these ranges using media queries.

Links:

• Multi-Device Layout Patterns
• Responsive.js
• Gridless Boilerplate
• Media Queries

View Lesson

1. Polyfills will be needed for IE 6-8 support.
2. Trade in pixels for percentages and ems in your CSS.
3. Explore different responsive design patterns maximize usability across devices.

Using new event listeners, site interactions can be enhanced using touchstart, touchmove, and touchend events. On any of these events, three lists are given: all touches detected, all touches on a given target, and any touches that have changed (for events such as touchend).

Generally speaking, any gestures should supliment existing on-screen controls. At this point, most gestures are considered nice-to-haves. Also remember to disable page zooming if you plan to utilize multitouch.

Important note: Existing hover events will actually fire on intial touch events, followed by any active or pressed event on a second tap. If your site relies on drop-down navigation, utilize

Modernizr.touch

Links:

• Drag Dealer
• Developing for Multitouch

When building out support for mobile browsers, the only target browser at this point is webkit since both the browser in Android and Mobile Safari in iOS come pre-packaged webkit.

Using CSS3 buttons with pseudo selectors and elements provides the ability to create great looking, scalable navigation without the need for sprites and with using minimal markup. This provides greater flexibility and improved accessibility.

A front-end developer needs to style a component but dose not have access to the markup. Using CSS3 with pseudo selectors and elements allows them to implement a modern design and target specific elements using CSS alone.

Links:

• CSS3 Pie
• CSS3 GENERATOR
• Selectivizr - CSS3 selectors for IE
• CSS3 Pseudo-classes
• Animated Buttons

View Lesson

1. Several features are not available in older browsers, especially IE. Analyze browser statistics to determine the cost/benefit ratio before implementing.
2. Test polyfills to help finesse cross browser implementation.
3. Provide a reasonable fallback style for unsupported styles.
4. “Button” elements will need a styling reset to share classes with “a” elements.

Forms have generally been right in the middle of the blurry line between back end developers and front end developers. HTML5 brings more than styling of forms to front end code but is no substitute for server side security. Browsers are beginning to natively support features that traditionally would take lots of javascript to accomplish.

When putting a form together there are needs for many types of data and validation beyond the standard XHTML input types. Suppose you would like mobile devices to automatically show a number keyboard for phone number entry, alert the user to required fields before sending fields with errors to your back end code and display inline error messages including changing the background on invalid fields. This lesson shows examples of some of the new input types, validation attributes for tags and default browser validation messages. The lesson also includes a bonus snippet to allow you to set custom messages using the new HTML5 data attributes and javascript setCustomValidity method.

1. HTML5 input types and new attributes
2. CSS3 selectors
3. New javascript methods

1. wufoo.com/html5
2. html5please.com
3. html5test.com/#head-form

1. Browser support is spotty for form support, check your project requirements and existing analytics for what is appropriate to include.
2. All front end validation is easy to bypass, it is not a substitute for secure server side code.
3. Polyfills are critical unless the fallback functionality is strongly considered.
4. Browsers that don't support the new input types fallback to normal text inputs
5. At this time it is difficult to change the styling and text in inline messages./li>

Moving beyond the basics can often mean making a decision on what browsers you will not support. Thankfully with the advent of Polyfills, this is no longer as much of a concern. Geolocation, local data-storage, gradients, these can all be implemented using polyfills. But there are still some features that go beyond what Polyfills can accomplish. These include:

1. Offline data / asset storage using HTML5’s manifest file.
2. Inner Shadows
3. Box Reflection
4. Masks

In addition, best practices are moving towards minification of your code, one of which solutions used to be bundled with the html5 boilerplate but has since branched off on its own.

These features really start to deliver when you decide to build web applications from the ground up. Allowing an offline version of your web application allows a graceful way of handling those moments where your user has lost connectivity. Since data and assets can be stored, you can still present a user with relevant data. Minification means that you are delivering the smallest possible package without making any sacrifices in quality. It also helps to protect your code from easy dissection, should you want to protect your codebase.

Minification and obfuscation benefit all browsers equally, however offline data storage is absolutely a modern-browser only feature at this point.