SRPI

CSS of the Future: How CSS3 can Optimize Design

Posted by On March - 31 - 2010

The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.

Replace images with code

CSS3 will allow for common design elements such as rounded corners, shadows, gradients, and transparency to be rendered by the browser. This will reduce the number of additional files that need to be loaded and make site maintenance easier by keeping more design information in one place. Fewer files will allow for faster site speeds, improving the user experience and consequently conversion rates. Decreased load times will also help with search rankings as speed becomes a more important factor to search engines. Fewer images also means that more content can be kept in html, making it more accessible to search engines.

See the example below for new code that can replace what is currently being done with images.

Reduce code

CSS3 can take the same designs that are currently being done with extensive or roundabout methods in CSS2 and create them with fewer lines and more efficient code. This will help make your files smaller for better site speed and will reduce your code-to-content ratio to make your site easier for search engines to crawl. For example, the background-image property will be enhanced to allow you to add more than one image to the same element. You can also make use of template elements to display content in a table format without needing html table tags or CSS2 faux column tricks. In addition, new selectors take advantage of design patterns for reducing code.

Read about some of these feature in more detail:

Use dynamic styles

CSS3 will add dynamic styles that will allow for animated effects, creating an alternative to Flash and JavaScript. As David Scoville pointed out recently, using Flash is not always the most SEO friendly technique, so being able to do more with CSS will minimize conflict between design and SEO. CSS3 will add transitions that can take a CSS property (such as color or size) and allow timing to be added so changes that occur on a page can flow more gradually and less abruptly. These transitions can be used in conjunction with transform functions (such as the rotate function I used in the example above) to create advanced animation effects.

Examples and information

Read about CSS Transitions.
If you have a webkit browser (Safari or Chrome), be sure to check out these CSS3 animation demos.

Read the rest here:
CSS of the Future: How CSS3 can Optimize Design

Internet Marketing, Uncategorized

CSS of the Future: How CSS3 can Optimize Design

Posted by On March - 31 - 2010

The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.

Replace images with code

CSS3 will allow for common design elements such as rounded corners, shadows, gradients, and transparency to be rendered by the browser. This will reduce the number of additional files that need to be loaded and make site maintenance easier by keeping more design information in one place. Fewer files will allow for faster site speeds, improving the user experience and consequently conversion rates. Decreased load times will also help with search rankings as speed becomes a more important factor to search engines. Fewer images also means that more content can be kept in html, making it more accessible to search engines.

See the example below for new code that can replace what is currently being done with images.

Reduce code

CSS3 can take the same designs that are currently being done with extensive or roundabout methods in CSS2 and create them with fewer lines and more efficient code. This will help make your files smaller for better site speed and will reduce your code-to-content ratio to make your site easier for search engines to crawl. For example, the background-image property will be enhanced to allow you to add more than one image to the same element. You can also make use of template elements to display content in a table format without needing html table tags or CSS2 faux column tricks. In addition, new selectors take advantage of design patterns for reducing code.

Read about some of these feature in more detail:

Use dynamic styles

CSS3 will add dynamic styles that will allow for animated effects, creating an alternative to Flash and JavaScript. As David Scoville pointed out recently, using Flash is not always the most SEO friendly technique, so being able to do more with CSS will minimize conflict between design and SEO. CSS3 will add transitions that can take a CSS property (such as color or size) and allow timing to be added so changes that occur on a page can flow more gradually and less abruptly. These transitions can be used in conjunction with transform functions (such as the rotate function I used in the example above) to create advanced animation effects.

Examples and information

Read about CSS Transitions.
If you have a webkit browser (Safari or Chrome), be sure to check out these CSS3 animation demos.

View original here:
CSS of the Future: How CSS3 can Optimize Design

Internet Marketing, Uncategorized

Building a Championship Web Team with the Client

Posted by On March - 19 - 2010

We’ve all heard the old adage, “The customer is always right.” From time to time there is push back from frustrated designers and developers suggesting heresy; the customer is, in fact, fallible. We must be at this part in the cycle because I’ve seen several blog posts lately regarding how the customer isn’t always right and what to do about it. Aside from the obviousness of it — that no one is always right — trying to assign right or wrong to the situation doesn’t address the core of the issue – avoiding confrontation with the client.

The best way I have found to avoid confrontation with clients while remaining in a position to guide website projects is to bring the client into the project team. Here are some tips to accomplish that:

First round draft picks
Putting the client on the project team sounds like a given, but many managers forget to inform them of this during the kick-off call. They just assume the client knows. I would coach you to lay out your team structure during the first call and reinforce it as often as applicable. Continually use the pronoun “we.” Make sure they understand that their participation, not just cooperation, is key to the project’s success.

The starting line-up
You can’t profess to someone they’re on the team if you leave them on the bench. The first reaction to assigning the client work may be, “But, isn’t that what they’re paying us for?” They’re paying you to launch a website, and no worries. You’ll be doing the heavy lifting. Tasks perfect for the client include providing style guide and logo files, reviewing and reporting on analytics, setting up merchant accounts, providing feedback, etc. If you attempt to shoulder the entire project, you risk alienating your client. Keep them engaged.

Be a heavy hitter
The important differentiation here is to be an expert going into a project, not just say you are once it starts. Check your ego at the door.
One surefire way to demonstrate this to the client is by backing up claims by citing sources. No one expects you to know everything, and you’re better off giving credit where credit is due. Another way is with empirical data. Numbers may paint pictures, but they rarely lie.

The All Stars
Establish the rest of your team as experts, too. This is another reason to leave ego out of this, because even if they are your employees, the other team members have valuable insight and specialties. Graphic designers know aesthetics, UI designers know information architecture, and programmers know how to make everything work.

Never throw one of your team members under the bus. It’s important that your team is disciplined enough not to enter debates with the client, but if a point is contested; you can do irreparable harm by not backing them up. Your best bet is to immediately follow up your team member’s comment with agreement and additional support before the client counters. If they are wrong, handle it privately, and let them document the correction. Never reprimand them in front of the client. Some enjoy this because it boosts their individual authority, but all you’ll do is undermine your team.
The more the client perceives you and your team to be experts, the more likely it is they will listen.

Play to their strengths
Your client is an expert, too. It’s your job to tap into it. There are several areas of expertise they likely bring to the table, including their customers, sales cycle, competitors, and company goals. Elevate them if they don’t take initiative to do so. Their information is critical.
Have a big locker room
If your client consistently invites other people from their company onto calls or email chains, start looking for ways to bring them into the team. Utilize their colleagues, subordinates and even their boss. The more they contribute, the more it feels like your client is on a team. They’ll reinforce each other and act as built in reminders. If it’s your client’s boss in the picture, you may not want to assign them much to do, but be clear that you respect their opinion and insight. Provide concise, to-the-point status updates and paint a positive picture. Reinforce that they made a good decision when they approved hiring you. Always make your client look good to their boss.

Go pro
Be dependable, positive and a good listener.

Many ultra talented designers don’t have a solid foundation of business basics. You must communicate well, oral and written. Do you want clients to perceive you as “right”? Start by being dependable and not dropping the ball on anything. Avoid making careless errors; deliver your milestones on time like wire frames and development sites, and embrace the QA process. Mistakes serve as distractions.

As hard as it is sometimes, stay positive. Your attitude can undermine you. No one wants to listen to a Negative Nancy, and they will begin to tune you out. This means you have to learn how to handle critiques.

Being pro also means listening. If you want your client to listen to you and value your words when you speak, you should do that for them first.

Sometimes you strike out
Regarding receiving recommendations, I’ve often heard people say the worst a client can do is say “no”. I beg to differ. The worst they can do is stop paying you. That doesn’t make the client right, but it does mean you have to be gracious. You can do everything right, have all the best supporting evidence, and the client still may say no. If they reject an idea, you have to lead by example, even if that means you need a couple minutes to regroup. You should never “pick a hill you are willing to die on,” because Cufon font replacement or JavaScript drop down menus are the more important thing ever. If that’s your mindset, you’ve already lost.

Put your heart into it
Perhaps you’ve heard the saying, “Sincerity is everything. Once you can fake that, you’ve got it made.” If you believe that, chances are you consider most of this blog post a waste of your time. That belief will only get you so far. As a team leader, you need to get involved in projects at a deep level. In many cases a simple way to do this is through research, listening, and understanding. Once you reach that point, you can honestly start recommendations with, “If this were my site, I would…” When that happens, clients tend to listen. You can’t really teach someone to care, but you can encourage it and hire team members that are capable of it.

The trophy
Bring a client into the team requires tact, patience and finesse. Much like Web design itself, this process can be raised, like a trophy, to an art form. Follow these suggestions well and you’ll face fewer and fewer “The client is always right” losing battles.

More here:
Building a Championship Web Team with the Client

Internet Marketing, Uncategorized

71 Chrome Extensions for Blogging & SEO

Posted by On March - 16 - 2010

I’ve converted, but my first experience with Google Chrome occurred about a year ago and it was not a positive one. It was disappointing and frustrating. However, after fighting with Firefox, which crashed many times daily and demanded updates that slowed browsing and constantly interrupted me, I gave Chrome a second chance.

My biggest concern was the lack of extensions (”plugins” for Firefox users), but after about an hour on the Google Chrome Extensions site, that was no longer a problem. So, I’ve compiled a list of the best Chrome Extensions for SEO and a few other can’t-live-without extensions (in no particular order).

1. Chrome SEO

chrome-seo

Includes page, backlink, traffic and rank stats, and more.

Archive for March, 2010

CSS of the Future: How CSS3 can Optimize Design

Replace images with code

Reduce code

Use dynamic styles

CSS of the Future: How CSS3 can Optimize Design

Replace images with code

Reduce code

Use dynamic styles

Building a Championship Web Team with the Client

71 Chrome Extensions for Blogging & SEO

1. Chrome SEO

2. SEO Site Tools

3. Google Similar Pages beta (by Google)

4. Domain Details

5. PageRank

6. SeoQuake

7. Speed Tracer (by Google)

8. Ultimate Chrome Flag

9. SEO Playground

10. Whois+

11. Firebug Lite

12. Pendule

13. IMG Inspector

14. Image Preview

15. IE Tab

16. MeasureIt!

17. Web Developer Mini

18. ProxyThisPage

19. Switch HTTP Proxy

20. Session Buddy

21. Session Manager

22. ShowIP

23. AutoPagerize for Chrome

24. Evernote Web Clipper

25. My Shortcuts

26. Resolution Test

27. FlashBlock

28. Docs PDF/PowerPoint Viewer (by Google)

29. WOT (Web of Trust)

30. AutoPager Chrome

31. html2pdf

32. Auto Copy

33. Chrome Gestures

34. Clickable Links

35. Tab Switch Plus

36. Xmarks Bookmarks Sync

37. Translation Bar

38. Autocomplete = on

39. RoboForm Online

40. LastPass

41. RightLink

42. goo.gl URL Shortener

43. StayFocusd

44. New Tabs Always Last

45. Search Box

46. Feedly

47. Search the Current Site

48. SendTo Extension

49. RemindMe

50. Tabs to the Front!

51. Aviary Screen Capture

52. Picnik Extension for Chrome

53. Pixlr Grabber

54. Webpage Screenshot

55. Zemanta

56. Bit.ly

57. Twitter Reactions

58. Shareaholic for Google Chrome

59. Digg for Chrome

60. StumbleUpon

61. Del.icio.us Extension

62. Delicious Tools

63. Chromelicious

64. My Alerts

65. Facebook for Google Chrome

66. HootSuite

67. Yelp Mobile for Google Chrome

68. Auto HD for YouTube