250 Quick Web Design Tips (Part 2): "
As web professionals, we’re always looking for ways to improve our knowledge and skills. Continuing on with our list of quick web design tips (see Part 1), these tips will cover the website development process as well as positive marketing and promotional tips for web designers.
This is the second part of a 2-part series. In this second part, we will cover development and marketing tips.
Development
Something every web professional should get themselves swimming in on a regular basis is code. Code is the backbone of our entire industry and turns pretty graphics and content into a formal structure that everyone can enjoy.
While there are far too many languages out there to be able to learn them all, some languages like HTML, CSS and JavaScript seem to be centrally focused in whatever we do online.
The tips you’ll find in this section all relate to coding for the web, and while some of them should be common sense, it doesn’t hurt to reiterate some valuable things which may improve your code.
Applying markup in the correct proportions will give your website some inner beauty.151. Web standards are important. If you can provide semantic code that accurately describes the content, then you may score a better search position or contextually richer value.
152. Semantics should not stop at using the right element for the right job. For example, giving your classes and IDs effective names (like with microformats) can improve the site’s contextual value.
153. Specifications exist for every web language you’ll encounter (even the more obscure ones). While they can be quite technical, if you have the patience, it’s well worth reading them.
154. Validate your syntax using the W3C’s validation tools. While you should use them to help find and fix bugs in code, remember that you shouldn’t sacrifice evolution for compliance.
155. I recommend learning these technologies in this order: HTML, CSS and then JavaScript (if you’re a beginner) as this order allows you to understand the underlying layers that the sequential languages attach themselves to.
Debugging and Testing
156. When debugging code, it makes sense to eliminate the causes by removing chunks of code temporarily to see if the issue resolves itself (you can narrow down the culprit this way).
157. Tools like Firebug can be exceptionally useful for looking through how your code is being applied (live on the web). It’s worth having a copy of Firefox with it installed for testing.
158. Services that test your designs for cross-browser support like BrowserShots are not perfect, but they do have a benefit of giving you quick glances of how your site might render on different browsers.
159. If you want to test your website in IE6, there are lots of options such as a virtual environment or tools like IETester or the Spoon installers. Don’t just leave the elderly product to chance!
160. Internet Explorer 6 may be the bane of our lives, but I highly recommend testing in any web browser that holds more than 1% of all traffic to your site, as it’s a significant proportion.
161. I recommend separate folders for style (CSS), feeds (RSS/Atom), scripts (JavaScript) and images (GIF/JPEG /PNG). It can be helpful when you organize, test, and debug your site’s content.
162. Relying on pseudo protocols like
mailto isn’t a good idea without a fallback mechanism. If the end-user doesn’t have a supporting product, they will effectively become a dead link.Browsers and User Agents
163. Be consistent with the browsers you test your site in. If you go with the big five ones — Internet Explorer, Firefox, Chrome, Safari, Opera — then remain loyal to those as a bare minimum.
164. Using browser hacks is generally a bad idea as there’s no future support guaranteed. If you do need to make IE behave properly, conditional comments are a friendlier solution.
165. Remember that mobile devices may render your website differently. Checking on various platforms like the iPhone can be extremely important to encouraging mobile device traffic.
166. Jscript (within IE) has its own set of conditional comments called conditional compilation which means you can target JavaScript with IE-specific code just like with stylesheets.
167. Google Chrome surprisingly doesn’t natively support RSS and Atom without a plug-in, therefore — like many things (i.e. Flash) — have it as a supplement rather than a requirement.
168. Device detection on mobile devices is a sticky subject. There are far too many devices for PHP header checks to be effective and handheld media types aren’t strictly and uniformly implemented.
169. WML is a dead language. If you’re producing a mobile-friendly website, it doesn’t pay to cater to such a limited audience unless you know you have people using old mobile phones.
170. Apart from fixed CSS units (px, cm, mm, etc.) you can use elastic (em), liquid (%) fluid (min/max-width) or even a hybrid of various measurements to size your design to flex to the end-user’s demands.
Behaviour
171. JavaScript frameworks like jQuery and MooTools can be helpful if you want a quick plug-in method of displaying your code, but be wary of the amount of bloat or unnecessary complexity they may have.
172. Intrusive scripting like preventing right-clicking and forcing pop-ups is damaging to the end-user. You might think it will aid your design but it more likely causes users to hit the back button.
173. Don’t use HTML frames or elements like
<marquee> and <blink>. It has become an unwritten rule not to use such user-experience-damaging markup at the cost is greater than the reward.174. Replicating browser functionality is a pointless endeavour. The user’s browser has print, font resizing, and bookmarking functions for a reason. Having these things is redundant.
175. Code protection is impossible. If you want to make sure people can’t take what you’ve created, don’t put it on the web! Protection scripts only harm genuine users of your site.
Markup
176. Remember to include a DOCTYPE declaration at the top of your (x)HTML documents. You would be surprised how many browser inconsistencies occur as a result of omitting the DOCTYPE.
177. One thing that bugs many web developers is the use of the term, "Alt tag." The alternative content item which is being referred to is an attribute, not a tag.
178. Don’t include natively block-level elements within inline elements.
<div> elements were not intended to be used generically within paragraphs or lists. You’ll break the semantics if you do things poorly.179. Deprecated elements should not be used unless you have a seriously good reason to make use of them. If there’s a replacement intended for the same role, use that in its place.
180. HTML5 may be a useful addition to the languages we can use for the web, but always keep in mind that browser compatibility may be a major issue for elders with scripting disabled!
Styles
181. CSS3 offers several useful, gracefully degrading properties that can benefit your visitors. If you take the time to learn how things are evolving, you’ll be ready for the next generation.
182. Optimizing your CSS can be achieved by making use of inheritance, using selectors carefully, avoiding repeat declarations and grouping your style based on what it does for your design.
183. Remember not to forget about printers. Having a print-specific stylesheet will help eliminate ink and paper wastage and will make your content look professional when printed.
Various Web Technologies
184. If you need to display large documents, rather than have a Word document, consider using a PDF or an XPS file, which are formats oriented for the web.
185. While Canvas, SVG and VML (and their relations) have a lot of potential for vector graphics on the web, it’s worth recognizing the serious cross-browser compatibility issues they have.
186. Flash shouldn’t be avoided altogether — it has a higher penetration of compatibility at this time than HTML5 and it can offer several things that, without scripting, would be impossible.
187. The key to successful Flash implementation is alternative content for when it’s unavailable. I certainly wouldn’t rule out the use of Flash in the future, but dependence is a serious flaw.
188. Flash is a great platform for providing dynamic content like video and audio, but don’t use it in place of mission-critical components like navigation or the whole website itself!
189. Silverlight and Java are options worthy of recognition if you’re not a Flash junkie, though it’s worth recognising that they have less market share and will therefore be less compatible.
JavaScript
190. JavaScript can be useful for validating web forms and aiding the end-user’s experience, but remember to use server-side scripting to verify things in case scripting is unavailable.
191. Unobtrusive scripting is the key to any website. Don’t allow scripts to infest anchor links using the JavaScript: pseudo and avoid scripting JS-dependent functionality without a fallback.
Miscellaneous
192. There are some great bookmarklets that can aid your development cycle using any web browser. Quix, Spry Toolkit, Firebug Lite and Aardvark are perfect examples of these.
193. The best way to improve a site’s speed is to take advantage of caching. Separate your site’s structure from the style (CSS) and from the behaviour (JS), using individual files to achieve this.
194. Table-based designs aren’t a good idea unless you’re forced to use them for the likes of HTML email. It’s poor semantics and affects screen-reader accessibility.
195. Picking the right server-side language is important. Options include PHP, classic ASP, ASP.NET, JSP, Ruby, Perl, ColdFusion and Python. Research your options before deciding.
196. Your server environment will generally dictate what languages you can code in. Depending on the setup, you may find that certain server-side languages (like ColdFusion) have limited support.
197. If you find yourself wanting to get involved with specific packages like WordPress, you may find yourself needing to know a specific language. Account for this in choices you make concerning what server-side language to learn.
198. If you want to remember certain user data only temporarily, perhaps consider saving the information as a browser-specific cookie in preference to storing it in a server-side database.
199. Database formats are pretty varied, though most of them make use of the SQL format. Popular options include mySQL and MS SQL Server.
200. Have you ever considered taking a web application offline? There are solutions such as Adobe Air, Titanium and Mozilla Prism that allow you to create quick, packaged solutions.
Marketing
Finally, we’re going to look at some useful pieces of advice for when you have the finished website but want to ensure search engines and visitors see it.
Using a mixture of general marketing advice, search engine optimization tips (of the ethical variety) and social media usage, you may find these tips useful in taking your web project to the visitors you seek.
Getting your website an audience — and keeping the interest in your website alive — is probably one of the hardest and most time-intensive aspects of owning a site. Hopefully these tips may inspire both you and your clients.
Advertisements are a core component of getting your brand around the web.201. Branding yourself or using your own name to represent you online can present risks of its own. You may encounter confusion with people who share the same name as yourself!
Search Engines and Rank
202. Give your website a creative name. It should be short, snappy and easy to remember (and spell). Visitors need to be able to recall who you are when they find a need for your goods.
203. Don’t try to trick search engines. Keyword-stuffing into hidden sections and using deceptive techniques aimed to gain bonus PageRank may result in you being booted by Google.
204. Keep things organic without targeting search engines whenever possible. High quality content, for example, will seek better long-term rewards than a poor quality link-farm.
205. Spending time reducing errors in your code and using elements (like headings) appropriately will ensure that search engines not only find your content, but also index it accurately.
206. Remember that marked-up text will hold a higher placement in search engines than non-indexible content such as Flash or PDF files that tend to have more limited semantic value embedded within.
207. Your Alexa rank is not important. Alexa ranks are highly biased and provided by a select few who install the toolbar. It’s honestly not worth the value many people seem to place on it.
208. Search engines do ignore keyword
<meta> tags. I know plenty of people still claim that this isn’t the case, but its downright wrong information. They do, however, follow descriptions.209. The DCMI (Dublin Core Metadata Initiative) is a great way of giving your site added value and meaning. If you’re into metadata, I recommend you check the specification out.
210. Adding a Robots.txt file to your website can help you better assist search engines in knowing what not to index. Robots.txt files are very easy to produce and are widely recognized.
211. Remember that a robots.txt file will not prevent people from stealing your content. Search engines unfortunately don’t have to follow them, so they could just ignore them if they wish.
212. OpenSearch is an XML specification with little recognition and a powerful function. It lets you add a custom search entry to the web browser! You could produce a cross-browser search function, for example.
Best Practices
213. Every website should have an XML Sitemap. It’s generally an XML list (though HTML or text ones are supported) of every page on your website, indicating how often content is updated.
214.
<title> elements should be unique on every page in your website. I also recommend having the unique name before any static content (like the site name) for the sake of bookmarks.Advertising
215. Advertising in the right areas may find you some great traffic but it pays to research the keywords you wish to target carefully, otherwise, you could be pouring money down a drain.
216. If you find the likes of Google AdWords isn’t turning the amount of results you want to gain, consider getting your services listed directly with useful related sites by buying ad-space.
217. Sponsorship is a great way to get involved with a community whose audience your site may appeal to. Most Industry-related events (like web design conferences) allow advertising, for example.
218. There are many different ways you can monetize a site. Ones you might consider include advertisements, premium access or support, donations, subscriptions or even exclusive features!
219. Monetizing a website isn’t an easy task. Beware of get "rich quick schemes" that claim guaranteed earnings that sound too good to be true (because they almost always are).
Branding, Reputation, Networking
220. If you’re planning to make money through your venture, ensure you have all the relevant paperwork filled out (and notify the tax people). You will need to report all of your earnings.
221. Don’t just think of your project as a digital venture, consider having some business cards, fliers or printed resumes created for when you’re out looking for clients in your local area.
222. The domain extension you choose will not impact your search engine ranking, Google, and Bing do not account for the TLD used (unless you require a local regional position).
223. Trust is a mission-critical brand element. Only put your name to project ideas you believe are in the user’s best interests — you don’t want to end up like the privacy ridiculed AOL.
224. When you drop a link to your own website, do it only in places where it’s deemed suitable. Spam will reflect poorly on your reputation and may get you kicked out of communities.
225. Joining chat rooms, forums or likeminded individuals in online spaces can be a great place to network, learn additional skills and perhaps even find some extra paying customers.
226. Getting your sites featured on other websites can boost your ranking in search engines (if the link is dofollow) and reputation online, however, you shouldn’t bother with "free for all" directories as the quality return will be low.
227. If you want to get your name out to other professionals, taking some business cards along to a web design conference can be a great place to meet others on a face-to-face basis!
228. Don’t underestimate the value of marketing yourself through fliers or adverts in a local paper or magazine (or even the Yellow Pages). Local businesses want websites too!
229. If you’re looking to apply for some existing jobs to showcase your skills to clients, check job boards on reputable, well known niche development sites rather than the likes of monster.
230. Social Media is one of the simplest ways you can build up a reputation for yourself on the web. Using services that allow you to build a community of followers can turn into job leads.
Selling
231. If you’re offering physical goods, consider getting them featured on well-known merchants like Amazon where existing customers may find what you’re offering as service on the side.
232. Want to showcase your skills to the active community? Consider expanding your portfolio by writing an e-book or contributing to an open source project that will get your name out.
233. Digital Rights Management and product activation is something I recommend avoiding. The bad people will still crack the item and it’s the legitimate customers who eventually suffer.
234. Selling goods online is quite a simple process thanks to "middle man" merchants like PayPal, Google Checkout and Amazon Flexible Payments, so consider your options wisely!
235. Occasionally, giving something away for free can drive a lot of interest and potential clients to your website. Whether it’s coding for a charity or handing out a free e-book, it all helps.
236. If you’re offering a desktop, device or web-based piece of software, submitting them to download portals such as CNET Download.com can get your product featured, win you more customers and even awards.
Social Media, Social Networking and Blogging
237. Twitter is a great method of getting into blogging if you find your time is stretched. You have a limited amount of space to be interesting. This service is basically a crash course on writing.
238. Setting up a blog can be a great way to gain some extra traffic. If you think you can write about your chosen subject on a regular basis, you could turn a profit on it and gain clients.
239. If you have the voice or face for it, having a podcast with a few work colleagues or friends (or even on your own) can give your sites a unique additional layer of marketing exposure.
240. Join communities who promote best practices in your particular industry. Being associated with these groups gives you a hint of professionalism and allows you to help good causes.
241. Facebook is used by a good proportion of the world population, therefore, it may be worth setting up a base camp for your project. You can share stuff with fans of the service too!
242. StumbleUpon is not only a great resource of inspiration (and a place to find awesome learning materials), it’s also a good place to give your services some non-spammy exposure.
243. Getting your professional profile (or a copy of your resume) uploaded on sites like LinkedIn and Google profile can give people a place to find you professionally (so free exposure).
244. Whichever social networks you decide to use, don’t overdo the self-promotion, use the services for their intended purpose and spend time building up some high quality content.
245. Social networks provide you with a place to allow customers to get in touch with you, gain useful feedback on your site and testimonials. Don’t think of them as just a linking service!
Miscellaneous
246. Always take the time to review any marketing plans you have for your website or services, mistakes can be costly and you want to ensure your reputation is as positive as possible.
247. Having a large number of visitors or a high PageRank does not mean your site is successful. It’s the conversion from visitor to regular user that ultimately decides the fate of your service.
248. Try to be unique with the way you market yourself. Look outside of the web for inspiration and you may find a unique method to advertise your services with few active competitors.
249. Having side projects either for fun or to expand your business can give you client-crossovers where users from one service may discover what you provide elsewhere (and join up).
250. Enjoy what you do and don’t be too critical. If you find yourself struggling to meet your expectations, your clients will notice and you could lose potential visitors or fail as a result.
It’s worth re-iterating that what’s listed here only scratches the surface of the many facets within our industry.
Perhaps it’s fair to say that beginners may find some of the tips more useful than a seasoned expert, but I’ve always been of the opinion that it doesn’t hurt the most established web architects to keep learning, reinforce their skills and perhaps remember what they previously may have forgotten.
I hope some of the tips will prove useful in your everyday process, and perhaps to those who it may benefit: like Chinese whispers, you can pass the tips to the next generation.
If you have any tips of your own which you think are worth noting, feel free to add them to the comments; perhaps we’ll end up with an encyclopaedia of useful nuggets of gold for future visitors!
See Part 1
Related Content
- What is The Future of Web Development?
- Five Simple but Essential Web Usability Tips
- Inspirational Tips and Tools from a Designer
- Related categories: Web Design and Web Development
About the Author
Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.
Posted in: 
