Archive for category useful

50 New CSS Techniques For Your Next Web Design

  CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Plus, CSS has allowed designers to achieve a number of different styles that used to only be possible with images. One of the best parts of CSS is that it’s so simple once you know the basics. Where tables used to make incredibly complex and sometimes impossible-to-decipher code, CSS keeps things clean and simple. Add a few comments to keep everything organized and it becomes an absolute dream to work with. Below are 50 fresh CSS tricks, techniques and tutorials that will help you to improve the quality of your next web design. Be sure to check out our previous article: 53 CSS-Techniques You Couldn’t Live Without . 1. Security and Performance While CSS is often thought of as merely a styling language, there are ways you can use it to add security to your site. There are also ways you can optimize your CSS to improve page load times. Both are discussed below. Make your pages load faster by combining and compressing javascript and css files This tutorial shows you how to create a PHP script to compress and combine multiple CSS and/or JavaScript files with gzip when they’re called for by a browser. It speeds up the page load times while making it possible to still edit the individual CSS or JavaScript files without having to combine and re-compress everything each times. Informal testing showed that a group of JavaScript files were reduced from 168Kb (and 1905 ms to transfer) to 37Kb (and 400 ms). There wasn’t any data available for the effect it had on CSS files, but I’d guess it’s probably pretty similar. The Definitive Post on Gzipping Your CSS This post covers the best and most recent methods for using GZIP to compress your CSS. It currently covers two different methods, both equally effective. One involves adding a bit of PHP to your CSS file (and renaming the file with a PHP extension instead of CSS) while the other method involves using the same PHP code with some additions but in a separate file. Clickjane.css: A CSS User Style Sheet to Help Detect and Avoid Clickjacking Attacks This post covers how to use clickjane.css to prevent clickjacking, a class of security vulnerabilities kind of like phishing scams and more formally referred to as user interface redressing . It’s cross-browser compatible but, admittedly, probably only covers a small range of potential clickjacking vulnerabilities. It’s still a good place to start, though. 5 Step Style Sheet Weight Loss Program This post shows five different ways to trim the size of your style sheets. Techniques range from learning how to group selectors to using CSS shorthand. Each technique is thoroughly explained and includes related resources. 2. Page Layout This is what CSS was built for. The options are almost endless, especially as CSS3 becomes the new standard. Aligning Inline Images with the Vertical-Align Property The default vertical alignment for inline images in text sometimes looks not-so-great. This tutorial shows you how to better align inline images with your site’s type. It goes over the different types of vertical alignment and what they mean in relation to type. CSS Centering This post includes instructions for centering liquid layouts with CSS. It’s very simple and straight-forward and works in virtually all browsers. Basically, it just uses left and right margins combined with some additional code to make it cross-browser compatible

45 Incredibly Useful Web Design Checklists and Questionnaires

  Designing websites can be a long and complicated process. Dealing with clients, designing prototypes, coding, programming, and testing – there’s a lot to keep track of and a lot to make sure gets done . That’s where checklists can make your life a whole lot easier. With lists of points covering multiple areas from content to usability to accessibility to standards, you’re a lot less likely to overlook important parts of a site. Below are 45 checklists to make your design process easier and more organized . Consider using these checklists as a jumping off point for creating your own customized list, based on your own needs. Also consider our previous articles: 15 Essential Checks Before Launching Your Website lists some important things to check before you make your sites public. 10 Designer’s Checkpoints To Be Aware Of offers a list of things every designers should know about their sites. 1. Client-Focused Checklists and Questionnaires These questionnaires and checklists are focused on making your relationships with your clients better. Use these to gather information from your clients or prospects at the beginning of each project so that everyone is on the same page. How to Extract the Facts with a Web Design Client Questionnaire This questionnaire from Freelance Switch is meant to send out to prospective clients to get a good idea of what they’re looking for from a website. It can save you valuable time and allow you to create more accurate proposals. Design checklist: What clients should provide their designer 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. Comprehensive Web Design Checklist This is another client-focused questionnaire. It’s aimed at getting clients to really think about what they need and want from a website. How I Approach Logo Design – A Checklist Learn how to figure out what the client wants to have in a new logo, what his objectives are and where the logo will be used. Also check 4 Critical Logo Design Details You May Be Forgetting About . Client Questionnaire for Web Developers This questionnaire is very short and basic but covers the important points: audience, content, and communication. Step-By-Step Website Development – Check List To help you make your plan, here is a simplified checklist for the development and design of a website ($ indicates potential additional fees that may be incurred).

45 Incredibly Useful Web Design Checklists and Questionnaires

  Designing websites can be a long and complicated process. Dealing with clients, designing prototypes, coding, programming, and testing – there’s a lot to keep track of and a lot to make sure gets done . That’s where checklists can make your life a whole lot easier. With lists of points covering multiple areas from content to usability to accessibility to standards, you’re a lot less likely to overlook important parts of a site. Below are 45 checklists to make your design process easier and more organized . Consider using these checklists as a jumping off point for creating your own customized list, based on your own needs. Also consider our previous articles: 15 Essential Checks Before Launching Your Website lists some important things to check before you make your sites public. 10 Designer’s Checkpoints To Be Aware Of offers a list of things every designers should know about their sites. 1. Client-Focused Checklists and Questionnaires These questionnaires and checklists are focused on making your relationships with your clients better. Use these to gather information from your clients or prospects at the beginning of each project so that everyone is on the same page. How to Extract the Facts with a Web Design Client Questionnaire This questionnaire from Freelance Switch is meant to send out to prospective clients to get a good idea of what they’re looking for from a website. It can save you valuable time and allow you to create more accurate proposals. Design checklist: What clients should provide their designer 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. Comprehensive Web Design Checklist This is another client-focused questionnaire. It’s aimed at getting clients to really think about what they need and want from a website. How I Approach Logo Design – A Checklist Learn how to figure out what the client wants to have in a new logo, what his objectives are and where the logo will be used. Also check 4 Critical Logo Design Details You May Be Forgetting About . Client Questionnaire for Web Developers This questionnaire is very short and basic but covers the important points: audience, content, and communication. Step-By-Step Website Development – Check List To help you make your plan, here is a simplified checklist for the development and design of a website ($ indicates potential additional fees that may be incurred). Project Planning Website Checklist This website check list is a high-level check list of activities to include in your project plan. A successful web development requires attention to several strands of activity, an in particular the organization of information and changes in origanization and business processes. 2. Pre-Launch Checklists This checklist deals less with the planning and initial stages of website design and focus on the things you need to make sure are complete prior to launching a new site. Every designer should have a pre-launch checklist to make sure they’ve completed everything on a site that they need to. The Ultimate Website Launch Checklist This is a comprehensive checklist of things to check pre-launch that includes things like content, style, validation, seo, and security points. Created by Dan Zambonini. The pdf-version is available as well and so is the French translation . The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released. Blogger’s Checklist Before Hitting The Publish Button How many times have we hit publish on a blog and then realized we forgot to do something crucial, whether it is changing post slugs or a crucial spell check. Here is a quick checklist of what you should do before you hit publish. 3. General Web Design Checklists The checklists in this category are general-purpose; they cover a wide variety of web design areas. This is a good place to start if you’re not sure what a checklist should include or what you need to remember when designing sites. But don’t mistake these for beginners’ resources; most of them are quite comprehensive. Web Standards Checklist This checklists covers pretty much every aspect of building a standards-compliant website, from accessibility to basic usability to site management. It’s very complete and well-organized. Typographic Rules Checklist (PDF) Another useful typographic checklist that contains not only some general typographic rules, heuristics and guidelines, but also reminders for typography in your projects. Typography Checklist (PDF) Compiled by Jason DewinetzIf, this list contains some useful typographic checks that you may want to consider for before launching your next project or printing your next brochure or book. Essential Navigation Checklist for Web Design These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format. If you are already familiar with those topics, the checklists serve as a handy reminder that is easy to refer to and apply when planning navigation. Checklist for usable forms This checklist is for HTML forms along with links to a few articles that are very helpful. Check also Brian Crescimanno’s article Sensible Forms: A Form Usability Checklist . GUI Screen Design Checklist This checklist covers various common problems, issues and errors that appear frequently in graphical user interfaces. Also check the legendary GUI Testing Checklist . Web Accessibility Checklist (also available as printable PDF and in German ) This checklist, compiled by Aaron Cannon, contains over 35 checks that will help you to improve the accessibility of your web-site. Another accessibility checklist . Checklist To Improve Your Site’s Speed and Performance Users have short attention spans and are generally not willing to wait for a bloated Web site to load. Take advantage of these tips, tools and resources, and you’ll have a much better time capturing visitors’ attention