Design ideas for the developer

Perhaps even more so than app UI, web development often highlights design alongside usability. And that’s not always a strong area for developers. To give you some inspiration, Codrops offers More Examples of Fresh Effects in Web Design. And of course, the nice thing about web design is the ability to view page source and see how they did it.

Speaking of how they did it, Joel Besada created a nifty jQuery Scroll Path plug-in that enables all sorts of vertical, 

horizontal and even crazier page scrolling. He discusses the background of the plug-in on his blog, a Hint of Creative.

A simpler – and maybe more useful – patter is the jQuery-enabled infinite scroll. To learn more about it, check out Paul Irish’s explanation of the Infinite Scroll interaction design pattern, along with some implementations for Wordpress and general jQuery use. JS Plugins also offers a jQuery Infinite Scrollerwith demonstrations, documentation and source code.

Read More

HTML Definition Lists

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee

- black hot drink

Milk

- white cold drink

Read More

HTML Unordered Lists and Ordered Lists

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:

• Coffee
• Milk

---

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

Read More

What Is HTML5

As the bedrock to the web, HTML has evolved in many ways from its birth in 1991. While the markup language has had its share of ups and downs, the advent of what’s being called “HTML5” is a welcome and much anticipated addition of new semantic capabilities and valuable APIs. " While the HTML has had its share of ups and downs, the advent of “HTML5” is a welcome and much anticipated addition of new semantic capabilities and valuable APIs. " What Is HTML5? HTML5 is a series of new elements, updates to existing elements and new JavaScript APIs available through contemporary web browsers. In order to best describe what HTML5 is, perhaps starting with a few attributes of what HTML5 is not will help draw the most clear picture. HTML5 is not the next iteration of XHTML. In fact many of the rules that you are accustomed to from your familiarity with XHTML are now changed in HTML5. The promise of XHTML’s standards compliance and strict validation may be music to the ears of all of us as software developers, but the pragmatic outcome of broken layouts and validation errors bubbling up to users created an unforeseen outcome - programmatic perfection does not translate into a usable web. XHTML simply isn’t a long-term standard. The real world of the web contains scores of ill-formed HTML largely created by tools and people with less exacting standards than the conscientious web developer. While this may sound bad, the non-code enthusiasts are often tasked with creating content for the web and have no inclination to worry about whether or not every HTML attribute has a value in their markup, for instance. HTML5 moves beyond the utopian dream of strict compliance to a schema and places the highest value on the user of the website over the HTML craftsman. " HTML5 places the highest value on the user of the website over the HTML craftsman. " “HTML5” no longer exists. In a strict sense, the term “HTML5” is a misnomer as there are no longer standalone versions of HTML. In the earliest incarnation of HTML5, there existed a notion of the next version of HTML being termed HTML5. The label of “HTML5” took hold in the market and started being used almost as an umbrella term for “the latest thing” in web development. Recently, Ian Hickson announced in his blog post, HTML is the New HTML5 (http://blog.whatwg.org/html-is-the-new-html5), the standards document once known as “HTML5” is now being maintained under the auspices of the plain name “HTML” as a fluid specification. The reasoning behind this is because HTML5 became a blanket term for many different technologies and browser vendors are implementing different parts of the standard. Therefore, the notion of “detecting HTML5” or “supporting HTML5” represents faulty thinking. Rather than looking for HTML5 in its totality, developers are better served by detecting the individual functionality required from HTML for an application. So if HTML5 isn’t XHTML plus some new dazzling features, what is it? Simply put, HTML5 is the new HTML standard that includes most of the features and capabilities of HTML4 along with new semantic markup plus a number of new JavaScript APIs. For clarity’s sake, this article still refers to the combination of markup enhancements and new JavaScript APIs as HTML5 in order to easily identify new technologies. Semantic Markup The value of Semantic markup on the web cannot be understated. When you consider many of the changes related to semantic markup you may realize that seemingly very little is different. While changing a DIV to a SECTION may not seem revolutionary, the underlying value is found in the page’s ability to more clearly describe the intent of the containing content with new tags over the old ones. Pages that contain inherent meaning will ultimately perform better in search engines, are easier to parse on the client and easier for external machines on the web to interpret and understand. The semantic changes are a product of established design patterns. The contributors to the HTML5 specification include companies like Google, Microsoft, Apple, all the top browser vendors and literally hundreds of other organizations. These contributors analyzed the vast array of markup on the web and looked to create new HTML elements that reflect the intent of current makeup on the web. So while new elements may not seem earth-shattering, the value is to give more intrinsic meaning to your HTML documents which creates a more open and usable web. Table 1 lists many of the HTML elements introduced in HTML5. JavaScript APIs If the first part of the equation of HTML5 is the markup, then the second half is represented by the new JavaScript APIs. In fact, the more you begin to develop applications in HTML5, the more you realize that most of the new functionality is in the updated scripting abilities of the browser. While browser support for each script API is diverse among the browser landscape, Table 2 describes the promise of each API once fully supported. Browser Support and the New Age of “Browser Wars” In the early days of the web the browser landscape was akin to the Wild West. Each browser vendor, in an attempt to gain the most market share, began quickly implementing new features often using proprietary APIs. This fragmentation in the market created a situation where websites might only work correctly in a single browser or development teams were forced to replicate programming efforts in order to provide the same functionality for different browsers. In short, the situation was a lose/lose proposition for both web developers and website users. The end of the browser wars emerged with the rising influence of the Web Standards Project which worked hard to get browser makers to agree to work within the established standards. So the distinction today about the push and pull toward complete support for HTML5 is that each browser maker is implementing against the same standard. Long gone are the days where in order to implement the same functionality on a page you had to code for the Netscape API as well as the Internet Explorer API. Now the APIs are known and standardized, the dance now is just compensating for the time when a user’s browser may not have the capabilities of the standard. To best aid you in reliably developing applications in HTML5 there are two resources that are invaluable: Modernizr: Modernizr is a JavaScript library that implements detection features for different areas of the HTML5 specification. Rather than asking a browser whether or not it supports HTML5, you use Modernizr to find out if the particular feature you are expecting in the browser is supported. http://www.modernizr.com/ CanIUse.com: The website http://caniuse.com/ attempts to match different capabilities with different web browsers. If you need to know if an area of HTML5 will work for your target users, this website will help you make that decision.	&		To Use or Not To Use: SECTION or DIV? Determining the difference between when to use the SECTION element over a DIV may seem a little confusing at first. A valuable rule of thumb to help you decide which element is appropriate is to ask whether or not the element you need to add to the page is intended to establish a logical group around content or if it’s merely being added to support styling of the page. In the case of logical grouping, use the SECTION. To support styling needs, use a DIV.
Table 1: Listing of new HTML elements found in HTML5. Element Description article The article wraps the primary content of a web page. Often there is only one article per page, but there is no formal restriction to the number of occurrences on a page. aside As the article content represents the primary content on the page, an aside is meant to contain information peripherally related to the main content of the page. audio The audio element renders a media player specifically tailored for presenting audio files to the user. canvas The canvas element is a pixel-based drawing surface manipulated through a JavaScript API. command Used to add responsiveness to the user interface, the command element acts as a container for common functionality on the page and returns state information indicating whether or not the command is enabled or disabled. datalist The datalist element enumerates a set of predefined options available in input fields. details Used in conjunction with the summary element, the details element contains information that is alternatively displayed and hidden from the user when the summary element is clicked. embed The embed element is a new tag that defines a plugin or other external content to the page. figcaption Used along with the figure element, the figcaption serves as a container for a short description for the related figure. figure The figure element contains content like screenshots or code listings within a page. footer The footer element is a logical container for content that concludes a logical section. Common content found at the bottom of a page, like navigation and copyright information, are often associated with the footer element at the page root. header The header element is a logical group that introduces another logical section. The header at the root of the document wraps common navigation, logo and other elements often found at the top of a web page. hgroup The hgroup element acts as a container for H1 - H6 HTML heading elements creating a semantic link between the headings. keygen Used for cryptography, the keygen element generates a private key stored on the user’s machine and a public key which is sent to the server. mark The mark element is intended to facilitate highlighting text from a search. meter The meter element is created to represent values in between a known minimum and maximum range. nav Providing semantic meaning to a site’s navigation, the nav element wraps navigation elements in context of the site. output The output element is used to represent the output of script calculation on the page. progress The purpose of the progress element is to display the ongoing advancement of a task as the result of a script on the page. rp The rp element is used to display parenthesis around ruby text that is not supported by a browser. (If ruby and rt elements are supported then rp should be hidden via the style sheet.) rt The rt element identifies the actual ruby text section of a ruby annotation. ruby The ruby element contains text with ruby annotations to support character-based languages like Chinese or Japanese. section The section element is used to delineate logical segments in a page. source The source element is used in conjunction with the audio and video elements to define the source media for the players. summary Used in combination with the details element, the summary element wraps content that is alternately displayed and hidden to the viewer based on whether or not content in the details element is clicked. time The time element is used to mark up a single point in date and time. video The video element renders a media player specifically tailored for presenting audio files to the user. wbr Used to provide hyphenation guides for long words, the wbr element (or “word break”) helps the page decide where to break long words if necessary. Table 2: New JavaScript APIs found in HTML5. Element Description Canvas 2D Context Providing a 2D drawing context native to the browser, the Canvas API is the interface to the new Canvas element. Contacts The Contacts API is an interface to a unified address book on the client. File APIs The collection of new File APIs grants read/write access to sandboxed files and folders on the client’s machine. Forms The Forms API extends the input type to recognize custom data types, enforces validation and adds new additional features to improve the user experience of web forms. Geolocation Geolocation is an API that manages scripted and verified access to the user’s physical location. ~Indexed Database Providing the interface for a client-side database, the Index Database API exposes both index and key-based access to data in the database. Media Capture The Media Capture API creates a channel to the device’s audio, image and media capabilities. Messaging The Messaging API exposes an interface to the devices messaging capabilities including SMS, MMS and email. Microdata The Microdata API enables web pages to easily be both human and machine-readable. Offline Web Applications Taking browser cache to the next level, Offline Web Applications create useable pages when the client is disconnected from the web. Selectors Level 1 & 2 Updates to the Selectors engine bring CSS3 selectors to first-class DOM selection in JavaScript. Server-Sent Events The Server-Sent Events API allows push notifications from the server to be consumed on the client in the form of DOM elements. Web Notifications Web Notifications define a structured way to display messages to the user and provide the appropriate events for the page to respond. Web Sockets The Web Sockets API allows for two-way communication between the client and server. Web Storage Implemented as local or session storage, Web Storage provides a key/pair persistence location for a web page. Web Workers Web Workers brings threading capabilities to the UI layer. XMLHttpRequest Level 2 The HTMLHttpRequest Level 2 API enhances ‘Ajax’ to support cross-origin requests, progress events, and handling byte streams for sending and receiving data to and from the server.

Read More

Five UI tips for Web apps

Here are five things you can do to make your Web apps have UIs that work better for your users.

1: JavaScript/AJAX should not override basic browser controls

Recently, I was using one of my bank’s websites, and I noticed some peculiar behavior. There was a date field, and when you clicked it, a calendar popped up; at the same time, the cursor in the date box was active. I tried to use the “Backspace” key to clear out the existing data, but instead of working as if I was in the input box, my browser behaved like I wasn’t and sent me to the previous page.

This is bad behavior, and I see it all too often. Using these JavaScript and AJAX controls can bring a lot of the desktop-like UI experience to the Web app sphere, but you should make sure that the expected browser behavior is not broken in the process.

2: Proper form behavior

If there is one thing that annoys visitors, it is being presented with a large number of input fields but the TAB button does not go from one field to another in the expected order. Along the same lines, it is also annoying when the Enter button does not submit the form at all, or it acts as if a button other than “Submit” was clicked for the current form.

Always test your forms (especially ones with many input controls) to ensure that the TAB order is correct and that the Enter button submits the form as expected.

3: Don’t use images for text

When the Web was young, people went nuts trying to get the “perfect” Web layout. The “solution” was often to make the site one big image and slice it up. After a while, reality set in, especially bandwidth, and

Read More

How To Link to a Specific Spot on a Page

How To Link to a Specific Spot on a Page

Want to give your website visitors a shortcut to a specific spot on a page? Or maybe add a link back to the top so they can get back to your navigation menu or any other area within the page? Targeting within a page is really easy and there's 2 ways to do this, here's how.

The XHTML Compliant Way to Link Within a Page

If you don't know what XHTML compliant means, don't worry it just means that it will help your pages validate as XHTML Strict, the old way won't pass. This method is just as easy as the older link jump and when you continue getting better at designing you will probably be glad you did it this way in the first place (no messy editing later).

1) Name the Target
Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever as long as it's in the right spot), add id="something", you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).

An example would look like this:
<div id="whatever-you-want-to-call-it">
The content of your div here.
</div>

2) Link To Your Anchor Target
To link to your anchor simply use:
<a href="#whatever-you-want-to-call-it">Link Text Here</a>

or if it's on another page:
<a href="pagename.html#whatever-you-want-to-call-it">Link Text Here</a>

The Old Way

This way of jumping to a spot within a page is not as good an idea for a few reasons. The "name" attribute has been depreciated for XHTML, and using tags you already have on your page like <h1>, <p> or any other places you can add id's will leave you less clutter on your page. (ie, you can use them for css styles, javascript and a lot more. And yup, if you happen to already have a something styled on your page using ID, linking to it works just fine.)

With that said, just in case for some reason you want to try the other way, here it is. As with the linking method above, you can call it anything you'd like, try not to use spaces though (they look rather messy in an address bar).

1) Naming the Target
Choose a spot on the page you want to link to and make an anchor by making a link mostly as usual but instead of "href" add "name" inside it.

Here's an example:
<a name="whatever-you-want-to-call-it">something here so you don't have an empty tag</a>

2) Linking to your new jump spot
This step is the same as above:
<a href="#whatever-you-want-to-call-it">Link Text Here</a>

See, either way you choose to link within the page it's fast, easy and can be very helpful to your visitors.

<< More H

Read More

Tips To Speed up Your Website

While more and more people are getting access to high speed internet, there are many left on dial up. Be kind to those visitors and do a few, simple things to speed up your webpages. Not only will these tips give you a faster load time, most will also help keep your bandwidth fees low as well!

Use CSS For Faster Pages

Even if you decide to use tables, CSS can greatly improve your web sites load time! With your styles in an external .css file, the browser can cache all the formatting and stylizing for your pages instead of having to read each and every single tag all over again. Also it cuts down on long drawn out tags and replaces them with smaller class styles instead.

Use External Scripts

Use the same script on multiple pages? Switch to an external script. I'm not talking about remotely hosted, I mean loading javascript files from one source instead of adding all that code to each of your pages like this:

<script type="text/javascript" src="yourscript.js"></script>

That way the browser already has it in it's cache and won't have to read it each time another page loads. This one saves a ton of load time, specially for larger scripts!

Remove Anything You Don't Really Need

OK, while this might sound obvious sometimes the hardest thing about creating a website isnot using every fancy trick that you know. Images, flash and sometimes even sound files are very impressive.. but do you really need to showcase all your talents on one page?

Embedded sound files are something many people just find annoying anyway. You'd be surprised how many are surfing at work ;-). The last thing anyone wants is a loud music or sounds announcing to their boss that they're surfing. Also many people have their own music playing... hearing a song over top of what we're listening to is less than pleasant. As for Java applets, try to ditch them or if you want those effects, JavaScript unusually loads faster and can do just as much or more. Stand back and take a critical look at your website, you may see a few special effects that can be let go of for the sake of faster load time.

Avoid Nested Tables

OK, I'm not a big fan of using tables for layout anyway (I'm one of those people that believes content and presentation should be separate.. but thats another tip page). With that said, if in your templates tables seem necessary (or the easier way to do it), try to avoid nesting. Why? When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

Avoid Full Page Tables for Faster Rendering

If you use tables, try avoiding the whole page being one big table. The browser won't show anything until it's read the whole thing that way. For a faster loading webpage, either try multiple tables (not nested) or having stuff above the main table to make your content in the first table show up faster. That way your visitors will have something to read while the rest of your page loads. It may not really make you page faster, but it will feel like it to your visitors.

Split Up Long Pages - Multiple Short Pages Load Faster

By splitting up long pages into multiple pages you not only make the content show up faster but many people that see a very long scroll bar give up. Remember, people's attention spans are often shorter than a grasshoppers (OK, not literally, but you get my point) since so much information is available at our fingertips. Try breaking it up into more readable lengths.

Remove Excess "Whitespace"

Whitespace is the spaces between your coding, removing the unneeded tabs and spaces can help a lot! Doing this will take a lot of extra bytes off the total size of your page and will speed up load time quite a bit. (Careful using automatic squishers, I find they often squish too much and makes it rather hard to edit later.)

Keep Your Code Clean

If you do use a wysiwyg editor, most times the will add useless code to your pages for example, many will leave empty tags (ie. <font> </font>). Removing any of those excess tags will not only speed up your load time, but make you pages validate a lot cleaner.

Speed up Images Load Time

Don't Go Overboard On Images

While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

Height And Width Tags

When the page loads and the image size is already defined (ie. you've used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

Faster Images? Reduce Their File Size

There are many totally free, online image optimizers so you don't even have to install anything and it's extremely easy! Online Image Optimizer will greatly reduce the file size of your gif, jpg, or pngs and neither you or your visitors will be able to see the difference other than a page that loads a heck of a lot faster. They also keep the transparency and animations in gifs!

GIF vs JPG vs PNG

Personally on new sites I design I tend to go for optimized pngs. They have lossless compression (jpgs are lossy) and can be used without worry (gifs have the potential to have copyright issues) and load fast when optimized. Jpgs however are usually better for photos and sometimes highly detailed images. The best idea is really to try the image you want in different formats and compare file size to quality.

Here's a bit of fast info... If you don't need sharp resolution, choose PNGs or GIFs over JPEGs, as PNGs and GIFs generally load quicker. JPGs are generally best for photos, PNGs or GIFs for anything else.

Read More