1stwebdesigner |
| 20 Snippets You should be using from Html5 Boilerplate Posted: 02 Sep 2010 02:00 PM PDT
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. HtmlWe 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> CssMoving 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 */ } .htaccessOne 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 thoughtsI 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
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 Checklists1. How to Extract the Facts with a Web Design Client QuestionnaireThis article will help you create a prospect qualification questionnaire that can be used via telephone or Internet or in face-to-face meetings. 2. Questions to Ask Clients Before Designing a WebsiteReading 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. 3. 22 Questions to Ask Before Developing a WebsiteDetailed questionnaire that you can stick to to ease your work. 4. 72 Questions to Ask New Web Design Clients with PDF ChartHuge list of the best 72 questions to ask prospective web design clients, along with a PDF chart. 5. Design Checklist: What Clients Should Provide Their DesignerThis 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. 6. Comprehensive Web Design ChecklistThe 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. 7. 42 Questions Every Freelancer Should Ask Their ClientsThis is a helpful list of 42 questions for freelancers to ask prospective clients during the interview/briefing process. 8. How To Create The Perfect Client QuestionnaireYou 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. 9. How to Create an Effective Web Design QuestionnaireThis 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. 10. Creative Latitude Client questionnaireFind out what your client wants by asking the right questions. Download this helpful PDF questionnaire. Prelaunch Chechklists1. 15 Essential Checks Before Launching Your WebsiteThis 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. 2. 10 Things a Web Developer Should Do for The ClientNot exactly wrote as a checklist, but still useful list of things you should do before launching the website. 3. The Ultimate Website Prelaunch ChecklistLarge and comprehensive list with checklists you should check before launching website. 4. Using a Pre-Launch Checklist for your WebsiteThis pre-launch checklist entails a systematic approach to ensuring that important details are addressed before launching or relaunching a website. 5. W3C Unicorn – W3C’s Unified ValidatorUltimate W3C validator, which will check your markup, CSS validity, mobile-friendliness and syntax of Atom or RSS feeds. Usability Checklists1. Quick Usability ChecklistThis post highlights some of the more common problems designers should address on their own sites in a usability checklist of sorts. 2. Some Typography Rules to RememberPDF checklist of some typography do’s & don'ts which can be applied in web design. 3. 247 Web Usability GuidelinesUltimate list of usability guidelines splitted into 9 sections. 4. 25-point Website Usability ChecklistThis 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. 5. The Ultimate Web design Usability ChecklistThis checklist with 88 questions is a must read for every web designer who cares about usability. 6. Sensible Forms: A Form Usability ChecklistFollow these guidelines, and you'll be able to create beautiful, function able forms. 7. The Blog Usability ChecklistThis 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. 8. The Essential Website Usability ChecklistThis post is a simple 13-point usability checklist for webmasters. Ever good website must be able to answer 'yes' to each of these points. 9. Access ColorAccessColor 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. General Checklists1. Web Design Best Practices ChecklistThis is a sorted list that contains some of the most important aspects you should keep in mind when developing a website. 2. 50 Questions to Evaluate the Quality of Your WebsiteThis 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. 3. Essential Navigation Checklists for Web DesignThese checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format. 4. Aaron Cannon's Web Accessibility ChecklistThis 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. 5. Beginner's Checklist Before Debugging CSSMost beginners make a common pattern of mistakes quite frequently. So if you are a beginner, this checklist will be just in time. 6. 10 Things You Must Check When You Re-launch Your WebsiteThe following is a list of 10 things that you should check prior to and immediately after you have launched a new site. 7. Common Sense SEO Checklist6 point beginner checklist that helps you to focus on what you do have control over and what improves your SEO rankings. 8. Web Design & Development ChecklistThis 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. 9. SEO Checklist for Your New WebsiteThe following 12 step optimization checklist will bring you one step closer to maximizing your revenues with smart web design. Ultimate Checklists1. Web Standards ChecklistThis 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:
2. The Ultimate Website Launch ChecklistVery 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. 3. 149 Mortal Sins That Will Send Your Site to Web Design HellHuge post with 2 checklists that will probably give you a preview of how a website should look. 4. Design ChecklistThe 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. 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. 6. 101 Five-Minute Fixes to Incrementally Improve Your Web SiteTackle these quick fixes over time, and you’ll be able to improve your website with minimal pain. 7. LaunchlistLaunchlist 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. Further Resources
  |
| You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Comments (0)
Post a Comment