1stwebdesigner

Posted by | Posted on 17:20

1stwebdesigner


20 Snippets You should be using from Html5 Boilerplate

Posted: 02 Sep 2010 02:00 PM PDT

I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”

It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.

Html

We will start off by checking out some of the html snippets used in the resource. All of these are snippets of code that may not necessarily be only html, but will definitely be placed in your html files if used.

Favicon and Apple icons

The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Interestingly enough, android also supports its usage. As far as I can tell, the apple-touch-icon size is 60px by 60px. As the comment says, if your icons are in the root of your domain, these links aren’t required.

 <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

Faster page load hack

This empty conditional comment hack is used to basically increase performance of your site. When conditional comments are used on your site, for example, for an ie6 conditional stylesheet, it will block further downloads until the css files are fully downloaded, hence increasing load time. To solve this issue, an empty conditional comment, like below, is used before any css is loaded in the document, and the problem will be solved! For further reading, check out this article.

 <!--[if IE]><![endif]--> 

X-UA-Compatible

Internet Explorer has many rendering engines ready for use. What this line of code basically does is force IE to use the most up to date rendering engine that it has available, so that your pages will render as well as possible. It then goes on to talk about Chrome Frame. Chrome Frame is a plugin for IE6, 7, and 8 which brings all the rendering, and js power of Google Chrome to IE. If the user has it installed, we render our site using it. For more information on Chrome Frame, and how you can even prompt users without it to install it, check here.

 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

Conditional body tag

This snippet is a Paul Irish original, and allows you to target IE browsers specifically without having to add in an extra http request with another separate stylesheet. Basically, depending on the IE browser that the user is using, a class is added to the body tag. If the user is not using IE, then a classless body tag is used. This allows you to target specific browsers in your css without having to use css hacks, or further stylesheets. For further reading, check out the original article on this.

 <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]>    <body class="ie7"> <![endif]--> <!--[if IE 8 ]>    <body class="ie8"> <![endif]--> <!--[if IE 9 ]>    <body class="ie9"> <![endif<]--> <!--[if (gt IE 9)|!(IE)]><!-->  <!--<![endif]--> 

jQuery loading fallback

A vast majority of sites these days make use of the jQuery JavaScript library. A vast majority also make use of Google’s hosted version of the library for faster loading speed’s, and better cross site caching. However, what if there is ever a problem and jQuery is not loaded from Google? Well here is your backup. What it basically does is check if jQuery is loaded from Google. If not, then we load it locally from our own version of jQuery.

 <!-- Grab Google CDN's jQuery. fall back to local if necessary --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script> 

Optimised Google Analytics

Google Analytics is a very popular tool for tracking your website’s user behaviour, and visits. This is simply an optimised version of Google’s asynchronous tracking snippet. To learn what has been optimised, and why it is faster than Google’s own version, read the article here.

 <!-- asynchronous google analytics change the UA-XXXXX-X to be your site's ID --> <script>  var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];  (function(d, t) {   var g = d.createElement(t),       s = d.getElementsByTagName(t)[0];   g.async = true;   g.src = '//www.google-analytics.com/ga.js';   s.parentNode.insertBefore(g, s);  })(document, 'script'); </script> 

Css

Moving on into Css, this is where the vast majority of awesome snippets care to be found. Don’t be put off by some of the one-liners; they are just as useful and awesome as some of the larger snippets to be found.

Html5 ready reset

Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.

 /*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }  article, aside, figure, footer, header, hgroup, nav, section { display:block; }  nav ul { list-style:none; }  blockquote, q { quotes:none; }  blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }  a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }  ins { background-color:#ff9; color:#000; text-decoration:none; }  mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }  del { text-decoration: line-through; }  abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }  /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; }  hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }  input, select { vertical-align:middle; } /* END RESET CSS */ 

Font normalisation

To get rid of rendering inconsistencies that can occur between browsers and OS’s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found here.

 /* fonts.css from the YUI Library: developer.yahoo.com/yui/ Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages */ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } table { font-size:inherit; font:100%; } select, input, textarea { font:99% sans-serif; } 

Webkit font smoothing

This is anti-aliasing for webkit browsers, sadly only in Mac OSX. It basically makes your text render better, and make it more readable, without all the text thinning hacks that we have seen in the past. For further reading check out Tim Van Damme’s article on this.

 /* maxvoltar.com/archive/-webkit-font-smoothing */ html { -webkit-font-smoothing: antialiased; } 

Force scrollbar

Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.

 html { overflow-y: scroll; } 

Formatting quoted code

This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser. To read up on this, have a look at this article.

 pre { padding: 15px; white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } 

Aligning Labels

Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!

 /* align checkboxes, radios, text inputs with their label */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } 

Clickable inputs

For some reason, most browsers don’t apply a pointer cursor to some clickable input’s by default to let the user now that this item is clickable, so we solve this by doing it ourselves.

 /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } 

Screenreader access

This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users. To learn more, read this article.

 a:hover, a:active { outline: none; }  a, a:active, a:visited { color:#607890; } a:hover { color:#036; } 

IE7 image resizing

Ie7 by default uses an image resizing algorithm that means that scaled down images can look far from awesome. To solve this, we simply enable a much better resizing algorithm that is available in Ie7 that produces results similar to what you’d expect from most image editing software. To read more about this, and similar solutions for Ie6, read this insightful article by the Flickr developers.

 /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } 

Print styles

Any decent site should be print ready, as even though we live in a technology driven time, people still like to have  a hard copy of some information. This snippet firstly uses a css media declaration, allowing you to include this in your main stylesheet, and not having to place another link in the head of your document. This benefits load time, as even when the page inst being printed, a browser will always download that extra css file, generating an extra http request. The snippet then goes on to include some useful print styles such as printing our link urls, and so on.

 /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none; }   a, a:visited { color: #444 !important; text-decoration: underline; }   a:after { content: " (" attr(href) ")"; }   abbr:after { content: " (" attr(title) ")"; }    .ir a:after { content: ""; }  /* Don't show links for images */    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    img { page-break-inside: avoid; }   @page { margin: 0.5cm; }   p, h2, h3 { orphans: 3; widows: 3; }   h2, h3{ page-break-after: avoid; } } 

Device orientation

These are just two css media queries you may want to use for your website development. With lots of smart-phones, and tablets being able to orientate their screens from landscape to portrait, you may want to include different styles for each. This is how you would go about achieving this.

 @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ }  @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } 

.htaccess

One thing that html5 boilerplate does come with that other starting point templates generally don’t is server sided files. Check out these awesome .htaccess snippets that can easily improve your site.

X-UA-Compatible Server sided

This is the same as the html version mentioned above, forcing the latest rendering engine in IE, and Chrome Frame if it exists. The benefit of including this in your .htaccess file is that it saves you having to declare this in the head of each and every html document you produce.

   <IfModule mod_headers.c>     BrowserMatch MSIE ie     Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie   IfModule> IfModule> 

Gzip compression

Gzip compression allows us to drastically reduce out file sizes. This .htaccess snippet does the gzipping for us.

 # gzip compression. <IfModule mod_deflate.c>   # html, xml, css, and js:   AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json   # webfonts and svg:   <FilesMatch "\.(ttf|otf|eot|svg)$" >     SetOutputFilter DEFLATE   </FilesMatch> </IfModule> 

Expiry date for cache filetypes

When we cache our files on the user’s machine, we may want to specify how long they remain there, depending on how often we change them ourselves. This snippet provides basic times for common file types, some of which you may wish to change for your own site.

 # these are pretty far-future expires headers # they assume you control versioning with cachebusting query params like #   <script src="application.js?20100608"> # additionally, consider that outdated proxies may miscache #   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ # if you don't use filenames to version, lower the css and js to something like #   "access plus 1 week" or so <IfModule mod_expires.c>   Header set cache-control: public   ExpiresActive on    # Perhaps better to whitelist expires rules? Perhaps.   ExpiresDefault                          "access plus 1 month"   # cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5)   ExpiresByType text/cache-manifest       "access plus 0 seconds"   # your document html   ExpiresByType text/html                  "access"   # rss feed   ExpiresByType application/rss+xml       "access plus 1 hour"   # favicon (cannot be renamed)   ExpiresByType image/vnd.microsoft.icon  "access plus 1 week"   # media: images, video, audio   ExpiresByType image/png                 "access plus 1 month"   ExpiresByType image/jpg                 "access plus 1 month"   ExpiresByType image/jpeg                "access plus 1 month"   ExpiresByType video/ogg                 "access plus 1 month"   ExpiresByType audio/ogg                 "access plus 1 month"   ExpiresByType video/mp4                 "access plus 1 month"   # webfonts   ExpiresByType font/ttf                  "access plus 1 month"   ExpiresByType font/woff                 "access plus 1 month"   ExpiresByType image/svg+xml             "access plus 1 month"   # css and javascript   ExpiresByType text/css                  "access plus 1 month"   ExpiresByType application/javascript    "access plus 1 month"   ExpiresByType text/javascript           "access plus 1 month" </IfModule>  # Since we're sending far-future expires, we don't need ETags for # static content. #   developer.yahoo.com/performance/rules.html #etags FileETag None 

Further thoughts

I strongly suggest you go check out Html5 Boilerplate. It is a fantastic resource that houses all of these snippets and more, that I am sure you will find useful.

Ultimate List Of Web Design Checklists: Get Work Done!

Posted: 02 Sep 2010 03:00 AM PDT

Preview-useful-web-design-checklistsWhen building a website, there are so many things and aspects to keep in mind. It often happens that in that mess we forget about some basic things like favicon or maybe about dummy content removal from test site. It's much easier to go trough all those things when you have all of them written down.

In this article you are going to find bunch of different checklists, questionnaires and tips covering almost everything for an upcoming website. You probably will need just one of these tools, so choose carefully. Read some tips and decide which tool fits the best for your project planning and development process.

Client Checklists

1. How to Extract the Facts with a Web Design Client Questionnaire

This article will help you create a prospect qualification questionnaire that can be used via telephone or Internet or in face-to-face meetings.

Extract-facts-client-questionnaire-useful-web-design-checklists

2. Questions to Ask Clients Before Designing a Website

Reading some of these questions and following some guidelines will also save you and your client plenty of headaches throughout the process and pave the way to a lasting and trusting relationship.

Questions-ask-client-before-designing-website-useful-web-design-checklists

3. 22 Questions to Ask Before Developing a Website

Detailed questionnaire that you can stick to to ease your work.

Questions-ask-before-developing-website-useful-web-design-checklists

4. 72 Questions to Ask New Web Design Clients with PDF Chart

Huge list of the best 72 questions to ask prospective web design clients, along with a PDF chart.

Questions-ask-new-clients-chart-useful-web-design-checklists

5. Design Checklist: What Clients Should Provide Their Designer

This is a checklist of things that clients should provide their designer at the outset. To follow this list will ensure the client and designer are dealing professionally as well as creating an efficient workflow.

What-clients-should-provide-designer-useful-web-design-checklists

6. Comprehensive Web Design Checklist

The following checklist and the associated answers will facilitate the analysis process of designing and building the website that allows you to relate with the client better and understand what he needs.

Comphrehensive-useful-web-design-checklists

7. 42 Questions Every Freelancer Should Ask Their Clients

This is a helpful list of 42 questions for freelancers to ask prospective clients during the interview/briefing process.

Questions-every-freelancers-should-ask-clients-useful-web-design-checklists

8. How To Create The Perfect Client Questionnaire

You won't find a list of premade questions in this article, but instead you are going to learn how to write your own queastions, formule and refine them.

Create-perfect-client-questionnaire-useful-web-design-checklists

9. How to Create an Effective Web Design Questionnaire

This article is primarily about developing a one-way questionnaire where you aren't there to explain or expound on the questions you've asked the respondent, though the same concepts apply whether you're communicating via email or during a face-to-face meet.

Create-effective-questionnaire-useful-web-design-checklists

10. Creative Latitude Client questionnaire

Find out what your client wants by asking the right questions. Download this helpful PDF questionnaire.

Prelaunch Chechklists

1. 15 Essential Checks Before Launching Your Website

This article reviews some important and necessary checks that web-sites should be checked against before the official launch  — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

Essential-checks-before-launching-website-useful-web-design-checklists

2. 10 Things a Web Developer Should Do for The Client

Not exactly wrote as a checklist, but still useful list of things you should do before launching the website.

Things-should-do-client-useful-web-design-checklists

3. The Ultimate Website Prelaunch Checklist

Large and comprehensive list with checklists you should check before launching website.

Ultimate-prelaunch-web-design-checklists

4. Using a Pre-Launch Checklist for your Website

This pre-launch checklist entails a systematic approach to ensuring that important details are addressed before launching or relaunching a website.

Using-pre-launch-website-useful-web-design-checklists

5. W3C Unicorn – W3C’s Unified Validator

Ultimate W3C validator, which will check your markup, CSS validity, mobile-friendliness and syntax of Atom or RSS feeds.

Unicorn-validator-w3c-useful-web-design-checklists

Usability Checklists

1. Quick Usability Checklist

This post highlights some of the more common problems designers should address on their own sites in a usability checklist of sorts.

Quick-usability-useful-web-design-checklists

2. Some Typography Rules to Remember

PDF checklist of some typography do’s & don'ts which can be applied in web design.

3. 247 Web Usability Guidelines

Ultimate list of usability guidelines splitted into 9 sections.

Usability-guidelines-web-design-checklists

4. 25-point Website Usability Checklist

This 25 point website usability checklist is a great  way to create some method out of madness and make sure you don’t forget anything critical when working with a new client.

Point-website-usability-useful-web-design-checklists

5. The Ultimate Web design Usability Checklist

This checklist with 88 questions is a must read for every web designer who cares about usability.

Ultimate-usability-list-useful-web-design-checklists

6. Sensible Forms: A Form Usability Checklist

Follow these guidelines, and you'll be able to create beautiful, function able forms.

Sensible-forms-usability-useful-web-design-checklists

7. The Blog Usability Checklist

This is a 19 point checklist that should be useful to any blogger looking for a practical way to evaluate (and improve) the usability of their blog. Many of the principles here will apply to websites, as well.

Blog-usability-useful-web-design-checklists

8. The Essential Website Usability Checklist

This post is a simple 13-point usability checklist for webmasters. Ever good website must be able to answer 'yes' to each of these points.

Essential-website-usability-useful-web-design-checklists

9. Access Color

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments.

Access-color-useful-web-design-checklists

General Checklists

1. Web Design Best Practices Checklist

This is a sorted list that contains some of the most important aspects you should keep in mind when developing a website.

Best-practises-useful-web-design-checklists

2. 50 Questions to Evaluate the Quality of Your Website

This 50 questions long questionnaire might trigger something here and there for some of you or maybe brings some forgotten item from the long to-do list back into your mind.

Questions-evaluate-quality-seful-web-design-checklists

3. Essential Navigation Checklists for Web Design

These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format.

Essential-navigation-useful-web-design-checklists

4. Aaron Cannon's Web Accessibility Checklist

This checklist attempts to answer the question, 'What concise pieces of advice can be given to designers that will have the greatest impact on accessibility in the majority of cases?' Again, this list is not the perfect solution, nor is it the only solution, but it is a good first step, and it gives developers and designers a place to start from.

Aaron-cannon-accesability-useful-web-design-checklists

5. Beginner's Checklist Before Debugging CSS

Most beginners make a common pattern of mistakes quite frequently. So if you are a beginner, this checklist will be just in time.

Beginner-css-debugging-useful-web-design-checklists

6. 10 Things You Must Check When You Re-launch Your Website

The following is a list of 10 things that you should check prior to and immediately after you have launched a new site.

Things-must-check-re-launch-useful-web-design-checklists

7. Common Sense SEO Checklist

6 point beginner checklist that helps you to focus on what you do have control over and what improves your SEO rankings.

Common-sense-seo-useful-web-design-checklists

8. Web Design & Development Checklist

This questionnaire is for the front-end look and feel and does not address technical specifications. You may find that some of the questions are not applicable to a particular client or project.

Development-checklist-useful-web-design-checklists

9. SEO Checklist for Your New Website

The following 12 step optimization checklist will bring you one step closer to maximizing your revenues with smart web design.

Seo-new-website-useful-web-design-checklists

Ultimate Checklists

1. Web Standards Checklist

This is a large checklist to help you build websites that match the web standards. However, this list should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:

  • to show the breadth of web standards
  • as a handy tool for developers during the production phase of websites
  • as an aid for developers who are interested in moving towards web standards

Web-standarts-checklist-useful-web-design-checklists

2. The Ultimate Website Launch Checklist

Very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. It contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

Ultimate-launch-useful-web-design-checklists

3. 149 Mortal Sins That Will Send Your Site to Web Design Hell

Huge post with 2 checklists that will probably give you a preview of how a website should look.

Mortal-sins-send-useful-web-design-checklists

4. Design Checklist

The following checklist serves to summarize the major points and to help you ensure you've done all you should before finalizing any web site you are creating.

Ultimate-web-design-checklists

5. The Official 'Successful Website Checklist Challenge'

Complete guide from planning to SEo. Take this challenge and see what you're doing right, what you're doing wrong, and what you're forgetting to do. There are notes and resources included for nearly every item on the checklist.

Official-successful-challenge-useful-web-design-checklists

6. 101 Five-Minute Fixes to Incrementally Improve Your Web Site

Tackle these quick fixes over time, and you’ll be able to improve your website with minimal pain.

Five-minute-fixes-incrementally-improve-useful-web-design-checklists

7. Launchlist

Launchlist is intended to help and encourage web designers and developers to check their work before exposing it to the world at large. The process is simple – enter your name and email and the same for a recipient, your project details and website URL, and then proceed through our list of provided fields.

Launch-list-useful-web-design-checklists

Further Resources

Comments (0)

Post a Comment