Archive for the ‘Web Design’ Category
Posted by Thomson Chemmanoor
There are several ways to improve the performance of your website. There are several areas like server performance, scripting optimization and the front end design of the site. The front end design is the most commonly accessible part of your website by a visitor so keep it tuned to perform better. A common problem among most website owners is they incorporate so many things into a website that it doesn’t deliver the response they hoped for.
However, not all hope is lost. If you make some simple changes to the front end design, you can increase the visitors perception of your website.
Here are the 10 simple steps to increase your website performance.
1. Optimize your web page components.
Identify the components, such as images, css files, html pages and JS files, that take a long time to load. To identify the problematic components, use tools like firebug for a quick and easy method. Make sure you have a fast loading website and limit the page to 19-25kb.
2 Avoid inline styling and inline JavaScript code.
Don’t use inline CSS and javascript in your HTML document instead use external css and javascript files, because your HTML code will weigh more, i.e. a web page riddled with similar code will have a KB size that is a lot larger than necessary.
3. Avoid CSS Expressions
One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression.
4. Simplify tables and avoid nested tables (tables within tables).
In general, the best way to design tables for visual and non visual users is to simplify the layout as much as possible. Avoid placing one or more tables inside on another – hence, “nesting.” …for those who don’t know 
… The more tables that are nested, the longer it will take for the Web browser to render the Web page.
5. Specify image WIDTH and HEIGHT attributes for faster loading in the browser.
If you want to increase the size of the images in your web pages don’t use the Width and Height attribute instead use a image editor to shrink it.
6. Reduce DNS Look ups
The Domain Name System (DNS) maps hostnames to IP addresses just like phonebook maps people’s name and their address. When you type in your domain name into your browser, a DNS resolver contacts the browser to return with the servers IP. Usually the browser takes some time to complete this process. Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times.
7. Reduce 301 and other kinds of redirects
Redirects of a web page can be done in server ways like 301 and 302. Meta refresh tag and JavaScript are other ways to direct users to a different URL. The whole purpose of a Redirect is to connect the old web page to a new URL. But reducing this to a minimum is the best practise to increase the performance of a web page.
Redirects slow down the users experience because inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.
8. Remove Duplicate scripts
It is not a good practise to include multiple versions of the same JavaScript in a single page. Duplicate scripts increase unnecessary HTTP requests during page loading. Even if the script is cacheable, extra HTTP request will occur when the user reload the page.
9. Minimize the Number of iframes
Inline Frames (IFrames) are windows that cut into your web page that allow your visitor to view another page on your site or off your site.
10. Reduce Cookie Size
HTTP cookies are used for several reasons – information about cookies is exchanged in http headers between a web sever and browser. Making the cookie size as small as possible to reduce the impact on the users response time.
As I said, there are several ways to improve the performance of your website. If you’ve got more additional inputs and thoughts which you’d like to disucss, please share that with us in the comments.
It’s that time of year when we reflect on what we are thankful for in our lives. The power of the internet continues to grow and mature in ways that help web designers do more with less money and less time. So lets break up why Web designers are thankful for the web into bite size chunks with very little “stuffing.”
Inspiration
The following sites showcase the latest in above average design using CSS and/or Flash on their homepage. Many different styles and influences here.
2. CSS Drive
3. Deviant Art – This site is for art and design in general, which is great if you are looking for ispiration from various mediums.
4. CSS Beauty – Gallery Page
5. The FWA – The Favorite Web Awards feature some of the best web designs I’ve seen… and some I’m not so crazy about. Lots of Flash sites here.
Information
These sites are great for staying current on the latest useful info for designers.
8. Abduzeedo – Great for inspiration as well.
9. Killer Sites – Great for tutorials too.
10. Alvit – Awesome master list of resources!
Social
Social media has really helped designers quickly share useful information with each other and consume large amounts of it in a very short amount of time; and time for a designer, is money. Here are some sites that help them do it.
11. Twitter – Microblogging is here to stay.
12. Delicious – Used for Social Bookmarking.
13. Design Float – Like Digg, but for design niche.
14. StumbleUpon – Used for web discovery and social bookmarking.
15. Design Bump – Another site like Digg for designers.
Education
Every designer started somewhere. Here are some sites to help a new designer get a good start or a seasoned designer add to the arsenal of skills.
16. W3 Schools – A must for beginners.
17. Video-Tutes – Video tutorials.
18. PSDTuts – Great Photoshop tutorials.
19. Good-Tutorials
20. Tutorialized – Huge amount of tutorials here.
Tools
There is no shortage of tools on the web and no shortage of lists of tools. Many of them are beyond the scope of this list. But for those who want just one site, check out this one:
22. Tlbox
Forums
Nothing beats digital belly to belly conversation and forums were one of the pillars of the early web. Here are some forums for web designers.
23. Webmaster-Talk
24. Sitepoint – Forums page.
25. Daniweb – Technically, this may not be concidered a forum, but it has all the ingrediants and is really useful!
This list is by no means an exhaustive list. So designers, please, leave comments and share with us what you are thankful for on the web. Happy holidays.
Posted by Jeremy Schooley
There are many practices that web developers follow. The best Web Designers & web developers though, set themselves apart by staying on top of the latest trends, maintaining a high level of credibility, and establishing a diverse and robust web presence. Following the 18 rules listed below will surely get you closer to being one of the web’s best web developers, if you are already not one.
1. Don’t push information on your visitors. Let your visitors choose and decide what they want to read. Giving them the control over their viewing experience. Ask yourself: what would be my reaction to a dozen of pop-ups and tons of ad blocks?
2. Poor advertising is evil. Don’t focus on the ad revenue side of your site. Visitors start forming opinions about your site within seconds of visiting your page. If it is loaded with ads, it may actually have a negative impact on your visitors, which can hurt your ad revenues in the long run. Try to balance your ad placement and quantity with the flow of the content and page layout.
3. Be a source of information. Virtually everyone on the web is looking for specific information. Whether it is for a product, service, or just educational, sharing your expertise and experiences sets your website apart from the others and adds value to the content.
4. Develop your own style. Never ever “copy” someone else’s efforts. Try to be as original as possible. This will make your site and its content unique and fresh. A fresh spin on something that has been done before is acceptable because having a new take on existing material creates unique content. So, surf the web and let it inspire you.
5. Obey the standards. Standards may seem like a pain, but sticking to them will save you headache in the future. Code that is written in compliance with web standards has a much better chance of being rendered properly in the various browsers people use on the web these days. It also has a better chance of being rendered properly for the various versions of these browsers; older and newer.
6. Be clear. Your website needs to communicate as clearly as possible to its visitors. You only have a few seconds to make that initial impact on the visitor. Telling them exactly where to find things and exactly what product or services you offer help the visitor feel comfortable in using your site to gather information and/or make their decision. If it is something that is complex, break it up into digestible chunks.
7. Use Internet Explorer as a baseline. Don’t design your code for special browsers or special resolutions. Regardless of how you feel about Internet Explorer, it still used by more than 85% of web users; and that demands a web developer’s respect. In most cases, getting your code to render properly in IE6 means it will probably render properly in most browsers. There are, of course, exceptions. One day IE6 will be ancient and there will be a new baseline, which is determined by the most popular browser used.
8. Content is king. Some of the most successful websites bring something new and useful to the web. There are millions of cookie cutter websites out there and users get bored with them. Fresh, useful, and entertaining content is in high demand and you will find visitors to your site thirsty for more once you give them a taste.
9. Web-crawlers and SEO should be an afterthought. Don’t think in keywords; unless you want your website to seem artificial. Time spent on SEO would be much better spent on creating more useful content. Creating great content and sharing it through the web will naturally help your search engine rankings improve.
10. Share content naturally, don’t spam. Sharing your content naturally means, you are sharing with people who would actually be interested in it. Think about the sites they are likely to visit. Keep in mind that you are writing to a human being, who can effectively spread your content across the web by sharing it or using social media to bookmark it, etc. Don’t spam or advertise, offer useful content for the potential readers of the content.
11. Answer your e-mails immediately. Quick personalized responses are a must with communicating through email on the web. Make the person you are communicating to feel important by giving a personalized response and show them that you think their time is valuable by responding quickly. Automated emails feel cookie cutter and can leave a negative impression of you.
12. Engage in Social Media. Gain visibility for your site by using Digg, Reddit, Mixx, del.icio.us, Ma.gnolia, StumbleUpon and hundreds of other social media websites. The great thing about social media, is that it is word of mouth advertising for the web. Once social media users find useful content, they often share it across the web using other social media sites, linking to your content from their blog, and more.
13. Make connections, and nurture relationships. The best web developers often write guest posts on other blogs. They are active in developer forums. They are administrators for comments on blogs and more. Doing these thing helps build key connections that will increase your credibility as well as build on your list of relationships with other developers who have strong credibility. This can open many doors. Make sure, when forming strategic relationships on the web, balance the give and take to make sure there is something in it for both parties.
14. Take advantage of the “worldwide” web. The world is a big place and more and more people are coming to the web. Don’t be afraid to expand your web presence beyond your local niche or country. As long as the information you are providing is useful, the visitors will come to learn more, regardless of where they are. Ideas transcend borders.
15. Build sites for “users”, not the site “owner”. This can always be tricky when dealing with clients. Most developers have had the experience of clients who envision a site that is really meant for them and not for users. It is our job as developers to educate our clients to ensure that the websites we create are built around the user’s experience. Most clients are grateful when you share this information.
16. Always keep learning. The landscape of the web changes fast and developers have to change with it or else their skills run the risk of being outdated. The best way to do this is to subscribe to blogs using RSS. Social media is now playing a big role in the way informational pages are tagged and shared. Check out our List of 100 Web Designers to Follow on Twitter.
17. Find inspirational resources for creativity. Sometimes all you need to do is browse through other people’s work to get ideas. Sometimes you just need some coffee. If you still can’t shake the creativity block, take a break to clear your mind or get some exercise to get the blood flowing in your brain.
18. Beautify the Web. Most web developers realize CSS designs are beautiful; not to mention more efficient on the coding side of things. Even if you don’t know CSS very well, you can still get ideas from CSS Table Gallery, CSS Zen Garden, Comment Design Showcase, Typography, and Form Assembly Garden.
Some of these rules may seem very basic, but remember that it is the combined implementation of these rules that make the web’s best developers stand out. Please feel free to provide with any feedback or any suggestions of what should be added to this list.
Posted By Thomson Chemmanoor
Cheat sheats, or reference sheets, are a helpful and quick way to remember things. Web designers, by nature of their work, are forced to cram their heads with TONS of information ranging in many different areas. In this particular post, we have created a dynamite list of 70+ helpful cheat sheets we found on the web to help web designer’s manage all this information. If you are a web designer/web developer looking for reference sheets on HTML, XHTML, CSS, PHP, JAVASCRIPT, PHOTOSHOP, COLORS & HTACCESS, this list is for you! Also comment on your favorite cheat sheets and any other which we have missed. Enjoy.
HTML Cheat Sheets
1.HTML Cheatsheet from Web Monkey for Beginners
2.Forget what some of the tags in HTML do?
3.List of up-to-date HTML tags / codes Cheat Sheet
4.HTML cheat sheet is a one-page A4 printable document
5.COMMONLY USEDHTML ELEMENTS AND THEIR CORRESPONDING CODES
6.A free online cheatsheet by VisiBone
7.HTML Code Cheat Sheet to look up HTML tags
8.HTML Cheat Sheet lesliefranke.com
9.HTML Cheat Sheet by Dave Child
10.HTML Cheat Sheet from Petefreitag.com
XHTML Cheat Sheets
11.XHTML cheat sheet provides an at-a-glance perspective of common XHTML practices
Action Script Cheat Sheets
14. AIR Cheatsheet ActionScript Card
JavaScript Cheat Sheets
17.JavaScript reminder and reference sheet
19.JavaScript and Browser Objects Quick Reference
20.The most common DOM methods at a glance
21.Addison-Wesley’s JavaScript Reference Card
23.Javascript Document Object Model for Web Browsers
24.Printable Javascript Cheat Sheet from John Robert Morris
25.Prototype JavaScript Library 1.5.0
CSS Cheat Sheets
27.Cascading Style Sheets Quick Reference Guide
30.CSS cheat sheet is a one-page reference sheet
32.Cheat sheet for creating Cascading Style Sheets (CSS) files.
34.Cascading Style Sheets Level 1 properties Cheat Sheet
35. CSS Cheat Sheet from Petefreitag.com
36.CSS LEVEL 1 AND CSS-P QUICK REFERENCE CHARTS
AJAX Cheat Sheets
38.Ajax a web 2.0 cheat sheet by Amy Hoy
Web Color Cheat Sheets
41.Hex Web Color Cheat Sheet from funky-chickens.com
44.Web Designer Color Reference Hexagon Mouse Pad
45.RGB Values for Macbeth Color Checker
PHP Cheat Sheets
47.PHP Cheat Sheet from Blue Shoes
48.The PHP cheat sheet is a one-page reference sheet
49.Popular PHP Cheat Sheet in widget form
53.Php Cheat Sheet from Digilife
55.PHP tips/tricks Cheat Sheet
56.Smarty Cheat Sheet for Template Designers
Adobe PhotoShop Cheat Sheets
57.Adobe Photoshop CS3 Keyboard Shortcuts
58.Brush Tool cheat sheet for Photoshop
59.Photoshop 911 FAQ and Short tips
60.Adobe Photoshop Quick Reference Guide.
61.Black & White Cheatsheet For Photoshop
62.Photoshop Quick reference card
MySQL Cheat Sheets
63.MySQL cheat sheet is designed to act as a reminder and reference sheet
64.Handy Cheat-Sheet of MySQL Commands
66.Quick MySQL Cheat Sheet/Quick Reference
.htaccess Cheat Sheets
67.simple cheat sheet for the .htaccess file
69.Apache htaccess cheatsheet list
Word Press Cheat Sheets
Some of the other places where you can find some useful cheatsheet resources
Cheat Sheets
Lorelle’s Cheat Sheet Lists
Cheat Sheets for Front-end Web Developers
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
You can stay up to date by Subscribing to our Feeds.
