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. Also consider our previous article: 15 Essential Checks Before Launching Your Website1 lists some important things to check before you make your sites public. 1. These questionnaires and checklists are focused on making your relationships with your clients better. How to Extract the Facts with a Web Design Client Questionnaire2 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. 2. 3. 4. Dr.
Tutorials for Web Designers and Developers So many design styles, coding tricks and sense of variations needed to create a well decorated website. Some time you have to take few tips and tricks to create and run an awesome website. This article is a beautiful and important collection of 15 Important Tutorials for Web Designers and Developers. About The Author Dibakar Jana Welcome friends, I am the Founder of Djdesignerlab.com, a well known designers blog that spread its popularity rapidly. View Authors Posts / Visit Authors Website Styleguide | Clearleft · User Experience Consultants The paragraph above has a class of leader. The main page header of this guide is an h1 element. Please reserve h1 for individual page titles only. Third-Level Header The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy. More than one may be used per page. Fourth-Level Header The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy. Paragraphs All paragraphs are wrapped in p tags. Many forms of Government have been tried and will be tried in this world of sin and woe. Additionally, you might wish to cite the source, as in the above example. Inline Text You might have noticed all the monospaced text in this guide. abbr Used for any abbreviated text, whether it be acronym, initialism, or otherwise. code Used for computer code samples. function getJelly() { echo $aDeliciousSnack; } With line numbers: cite del em ins kbd q strong Lists
Learning WebGL A year ago, at a biggest-ever, record-breaking HTML5 Meetup in San Francisco all about WebGL, I predicted we were a tipping point; I think I was right. Let’s take a look at 2014, a banner year for 3D on the web! A Year of Great Content John Cale and Liam Young’s City of Drones brought together experiments in music and architecture; Isaac Cohen continued to blow minds with visualizations like Weird Kids and Webby; Google’s A Spacecraft for All chronicled the 36-year journey of the ISEE-3 space probe; and SKAZKA showed us an alternate world created by The Mill and powered by Goo. A Year of Killer Apps In 2014, WebGL made its mark– an indelible impression– on advertising, e-commerce, music, news and engineering. A Year of Pro Tools Goo, Verold, Turbulenz and PlayCanvas all made great strides with their WebGL engines and development environments. A Year of Gaming WebGL is definitely up to the challenge of creating high-quality MMOs. A Year of Virtual Reality A Year of Ubiquity
How to Extract the Facts with a Web Design Client Questionnaire The phone calls usually go like this: Caller: “I want a website for my business.” You: “What kind of business do you have?” Caller states the nature of the business, launches into a list of pages that he or she wants on the site, and then asks you for a price quote. Not a very satisfying encounter, is it? The caller seems most interested in price, and you? It might not be possible to have a meaningful relationship with price shoppers, but it’s worth taking the time to learn what your potential clients want in a website. Editorial Note: A few times a month we revisit some of our reader’s favorite posts from throughout the history of FreelanceSwitch. Tip: I recommend using this questionnaire before you write a Web design proposal. The best Web design questionnaires focus on: What the site’s supposed to do for the client’s business.What the site will look like. I’ll take you through the questionnaire that I use, and explain the rationale behind each question. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Dreamweaver Primer So, you’ve read the article, “HTML Wireframes and Prototypes: All Gain and No Pain” and now want you want to make an HTML wireframe. I’m here to help make this an easy and pain-free process, using Macromedia Dreamweaver 4.0. By the end of this primer you will have: Become familiar with the basic functionality of DreamweaverMade a sample HTML wireframe that you can use as a template for future wireframes How to use this primer This primer assumes that you have never used Dreamweaver before. Also, this primer is designed to be used while you are running Dreamweaver. Finally, the techniques suggested in this primer are specifically for creating wireframe prototypes, not for creating launchable sites with working backends. Dreamweaver basics When you launch Dreamweaver, it will open a blank web page called “Untitled Document.” Figure 1: The default Dreamweaver document window and its key functionality. Now for a tour of the tools that are available for your wireframing work.
Design checklist: What clients should provide their designer - Tracey Grady Hello! I have updated this very popular post to include a free downloadable PDF of this checklist. Preparation is key to successful management of any project, and design projects are no different. I find checklists can be very useful, so I’ve prepared a checklist of details that clients should provide their designer at the outset. A budget Knowing the client’s budget allows the designer to establish what they will be able to realistically achieve for the money, and to perhaps suggest a range of options. A complete list of the client’s design requirements The client must make clear at the beginning just how much design work they will require, e.g. layout for a business card, letterhead and envelopes OR logo design plus web design plus email marketing template. I once had a prospective client say “We don’t know yet how many layouts we want, so can you just give us a rough quote estimate in the meantime?” An outline of who the target market or audience is for the design work A deadline
Treehouse - learn how to design and develop for the web and iOS 9 Most Common IE Bugs and How to Fix Them Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. 1. Centering an element is probably something every web developer has to do while creating a layout. Consider the Following Code: The output you'd expect: But what IE actually gives you: This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. The Fix The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly. 2. Almost every web developer uses lists to create his navigation. And the IE screen shot: Fix #1 Fix #2 3. 4. 5.
How to Enable IE 8 Compatibility View for your whole Web site or for specific Web site directories - Deviations With the release of Internet Explorer 8, many customer sites suddenly had rendering errors and problems displaying the site correctly. In order to avoid expensive and time consuming corrections Internet Explorer 8 has a new functionality called Compatibility View which enables the browser to emulate Internet Explorer 7. Internet Explorer 8 Compatibility View The question many customers asked is ”How can I force the client browser to use the Compatibility View when they visit our site? Web Developers and Site Administrators can configure IIS and their sites to tell Internet Explorer 8 to automatically Emulate Internet Explorer 7 when they visit their site or just specific WebPages. This is done by adding a custom HTTP Header to the IIS and the website web.config or to add a meta tag to specific pages. X-UA-Compatible: IE=EmulateIE7 Pedro M.
IE7 Recalculated Offset Bug | CSS Class IE7 now has support for dynamic pseudo classes :hover and is commonly used for the purpose of hiding elements from view and bringing them back into view when a ancestor element is hovered over, but the support is buggy depending on the property and values used for either hiding the elements or for bringing them back into view. Setup: Container Absolutely Positioned Element What we have above is a container element containing an absolutely positioned element. <div class="container">Container <div class="absolute">Absolutely Positioned Element</div></div> In the below examples, the absolutely positioned element is hidden from view by the normal position value and brought back into view by the hover position value. Example 1: a.p element: normal position left:-999em; - hover position left:auto; Example 2: a.p element: normal position left:-999em; - hover position left:0; Example 3: a.p element: normal position left:-999em; - hover position left:auto; margin-left:0%; Example 4: Example 5: Example 6:
IE CSS Bugs IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. The little bugs in it's CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn't work in IE 6. While I generally refuse to pander to IE 6's limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that'll get you every time: The Box Model This is perhaps the most common and frustrating bug of all in IE 6 and below. IE 6 will calculate the width of the box to be 100px. This kind of discrepancy can cause HUGE layout problems. I generally work around this issue by just not using padding on boxes I am using for layout. The Double Margin Bug Using our box example from above, let's say we need that floated to the right: IE 6 will double the 20px to 40px. I also like to side-step this bug whenever possible. No Min Widths / Min Height Stepdown No Hover States So... Share On
Javascript Full Screen API Posted at Paulund The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but this can be done at the developers choice. This is a great feature to use for things on slideshows, you can make the browser go into full screen on a click of an image. The best thing about this feature is that it doesn't have to be the entire page, you can make any HTML element go full screen. Full Screen API support Unfortunately not all browsers support this feature so you need to make sure that your visitors browser supports this feature before you try to use it. If the browser they are using supports this then you can use it, if the browser doesn't support this feature then you can make sure you do something else instead of using full screen. According to the website Can I Use the full screen API is currently supported on Firefox, Chrome/Safari and Opera. Check if the browser supports Full Screen API Exit the full screen