High Performance Web Sites: – Rule 6 – Move Scripts to the Bottom
Archive for the ‘css’ Category
High Performance Tips from Yahoo!
Friday, July 20th, 2007Corporate Web Standards
Wednesday, July 18th, 2007Digital Web has an excellent write up on adopting a Web Standards approach from within the Corporate environment. Well worth the read for those that are working from within this realm of development as you may find that many of the struggles that they have you have too:
After a few weeks, the pressure began to build in our isolated building. As the launch date of our initial website approached, scope creep became a big problem. Stakeholders who signed off on designs beforehand would start to see final, assembled products and make fundamental architectural changes, as they had not fully understood the signed-off documents they had approved only weeks earlier.
This post makes some great references to finding the keys to success in getting your project done and done right.
- Baby Steps
- Don’t be a Control Freak
- Pick your Battles
- Just Do It
- Personal Sacrifice
These might be a little bit common-sensical but a great deal of common sense is lost when put under pressure. Choices that you’d usually make under the calm of an uneventful day are left wasted on the floor when word comes in from outsides your team that things must change.
My team succeeds at corporate web standards because we:
a) educate
b) educate
c) steadfastly “do it our way”
d) deliver our products
Education in the corporate land perhaps the largest hurdle to overcome. Most corporate people have very little technical understanding of how the web actually operates within modern browsers. Finally, when you come across one that does have their head on straight, they might be more than a few years behind in the current trends of thinking (IE 5.5 anyone?). Your goal is to evangelize in a major way the benefits of doing it right via Web Standards. Start small and prove to them why you make the semantic choices you do. What has worked for me is to prove examples of real world problems by providing web standards solutions through a simple quiz. The W3C exists for a reason and your designs and solutions should scale around that. Explaining to a designer, a stakeholder, a programmer why a Web Standards approach is the right way is always going to get you the win.
Stick to your guns when it comes to doing things the right way. In no way would you want your brake mechanic to slap a hack on your car, so why would you want that for your site and your audience? Doing it right and staying steadfast proves that your solutions are repeatable and safe.
Finally, one of the great benefits of Web Standards is that its clearly documented and approachable which aids greatly in producing web sites at a quick pace. If you’ve ever had to paint on a design using tables, you know its not a joy. Separation of content and style is every front-end developers joy. It will be a joy that is shared when you need to make those changes to your site 1 month, 12 months, or longer.
Senior Web Developer at Starbucks Entertainment
Tuesday, July 10th, 2007We’re looking for a very talented individual to join our small team at Starbucks Entertainment! Have you’ve read up on your Eric Meyer and David Shea? Than you’re probably the right person for the job! But wait, we’re also looking for someone skilled in Flash as well. So can you telll me how you’d dynamic define a class in Flash AS3? If you, or someone you know, is both highly skilled in CSS and Flash, than we would like you to join our team! See below for more details and apply!
——————
Job Description
Starbucks Entertainment is seeking a multi-talented and passionate Flash \ Web developer to build cutting edge distributed media applications for one of the largest customers bases in the world. At Starbucks Entertainment, you’ll be instrumental to the development of our next generation in-store applications, online social community and commerce platforms. As such, you should have development experience building desktop and web-based Flash\Flex\Apollo\Ajax applications that can function flawlessly; as well as look, scale and perform to perfection. We’re looking for a perfectionist and a craftsman of both Actionscript and Web Standards, someone who can tailor a Flash app but also craft a cutting edge site with Web Standards XHTML and CSS. You should have experience building modular, object-oriented Flash/ActionScript that can poll databases from an enterprise architecture using Flash Remoting using AMFPHP as well as have a critical eye for stylish animations and motion graphics using FuseKit and perhaps After Effects. You should also have a deep wealth of knowledge regarding modern CSS layout techniques as well as browser compatibility issues. You should have an understanding of how to engineer applications that can be highly optimized so as to withstand large traffic, data flow, and interactivity, which is key to success at Starbucks Entertainment.
Our team is small, skilled, agile, highly motivated and dedicated to creating amazing user experiences. We thrive on our close teamwork and collaboration, friendly and effective communication, fun and passion for our craft, and as part of our team, you will too. You’ll wear many hats and be challenged daily with enterprise level projects that have a direct impact on customers and partners. We are looking for a senior Flash\Flex\CSS developer who is passionate about ActionScript and Web Standards to join our team!
Summary of Key Responsibilities
Responsibilities and essential job functions include but are not limited to the following:
- Full cycle (concept to production) development for Interactive media and Web Standards endeavors.
- Provide application architecture, documentation, and UML design to projects.
- Write test scripts and perform UAT.
- Collaborates with the design and development staff on prototypes in Flash and web standards.
- Consult with team on front-end issues (both egacy and cutting edge) around browsers, flash performance, and css.
- Provides ongoing maintenance and support for existing web-based applications.
- Researches and learns new technologies packages and trends.
Summary of Experience
- Expert knowledge of Flash\Flex and ActionScript, with experience using AS 2.0 / 3.0 and Flash Player performance optimization techniques.
- At least 4 years of programming experience.
- OOP programming with deep knowledge of Design Patterns (MVC, Decorator, etc).
- Experience using packages like FuseKit, ASUnit, and Papervision 3D.
- CSS, XHTML, JavaScript, XML.
- Understanding of CSS2\3 layout and browser compatibility issues.
- Development experience in a Linux environment.
- Source Control knowledge with SVN.
- Photoshop.
- Ajax (YUI, Prototype, ExtJS, Firebug Debugger) (Preferred).
- AMFPHP, JSON, CakeAMFPHP (Preferred).
- ActionScript compilers and SWF processors such as Motion Twin (MTASC) and SWFMill (Preferred).
- Experience building desktop applications or distributed widgets using Zinc (Preferred).
- Video encoding, video playback in Flash (FLV), Flash Comm (Preferred).
Required Knowledge, Skills and Abilities
- Passion and desire for craftsmanship.
- Organized development and release-cycle approach.
- Ability to work in a fast-paced and changing environment.
- Strong attention to detail.
- Ability to work as part of a team.
To apply online, click here.
ALA
Tuesday, April 24th, 2007
Pointing Out
Saturday, January 20th, 2007Oh dear, that is a damn ugly site. Why did boxes & arrows spend a better part of a year talking about this redesign and the process that went behind it only to present something that was dull, unprofessional, and generally all over the place? Where is the low-level, detailed care that text is aligned properly?
I suppose you could say that the semantic structure is there, but the CSS to skin the site is about as bland as you can get for a site of this nature and stature. View source to see the results yourself. Its not compartmentalized, its overriden in unnatural ways, and generally is poor.
Any designer would tell you that balance and consistancy are the keys to a good design. Why have a navigation that is scaled all over the place, as if it was a misplaced tag cloud. Its a navigation for god sake. And let us not forget to consider the graphic quality and choices made in this redesign. Are the graphics clean and clear, leading to choices that help drive a metaphor or aid in users finding information or goals…no, not really. What limited graphics that are present on the site to aid in the experience or so poorly choosen and implemented it says very little about the field of IA as a backbone to design.
In a course I teach in web development, I preach to students to begin to study bad interfaces. The practice of studying UI’s that generally do not meet the needs of the user are often telling and allow you to become a more fully featured designer. It allows you to know what mistakes to avoid. The study of bad design requires you to ask tough questions about the their designs, but conversely, your own work:
What doesn’t work?
Why doesn’t it work?
What can be improved and how?
I would suggest another redesign as soon as possible with these questions in mind when approuching the design phase.
Even more sad is the CMS that drives the site, which is so heavly lifting Basecamp, it should be criminal…but thats for another rant.
Make Your Markup Work with Microformats
Tuesday, November 14th, 2006err.theblog does a wonderful write up as to the power of microformats. While miroformats are seemingly not that big of a deal, its really quite powerful when you think of what they are, which are just formats. The iniate power of any tool comes from its ability to format, or to become meaningful by its very design. Consider an electrical plug and cord. The plug format, I’m sure, was initially designed with wild variations with the only major ability being that it could consume a current. The power of the technology was increased tenfold when a format of plug became omni-present and sockets and plugs had a standardized format in which to accept. Now I can take my plug anywhere, save for europe, and plug it in, safe in the knowledge that I should be getting a charge out of it.
Which brings us to markup. Every developer and their child for the past 20 years has written wildy different markup based off of, at times, ever evolving markup standards“. Microformats are here to clean up our mess and make real meaning of our markup. With meaning comes the ability to supply a wider range of possibilities and power…. which is … wait for it … the very nature of the sematic web! Markup with meaning provides powerful advantages to developers and consumers. What those powers are at the moment might not seem the most profound, but give it time. Let it propigate out into the world. In the meantime, stop your horrific coding practices for styling and marking up your code with your own personal stamp. When it comes to scenerios where a microformat would prove to be a worthwhile cause, such as:
- People and Organizations
- Calendars and Events
- Opinions, Ratings and Reviews
- Social Networks
- Licenses
- Tags, Keywords, Categories
- Lists and Outlines
write code that adopts the microformat. I promise you more meaning will come to your code.
Inman’s Heap
Tuesday, October 17th, 2006Shaun Inman has always been an innovative developer, be it with IFR or his plug-in designed analystics program mint. Now Shaun comes up with a new way of viewing web information over time. His new redesign shows the aging and decay of his posts via color contrasting. As posts decay over time, information becomes less and less relevant, as outdated techniques are replaced with modern pratice and topical items lose their impact.
The notion of decay on the web, in my humble opinion, has never been dealt with properly and Shaun’s site take that next step to help the user determine meaning. Searching through google for fresh content leads you down the rabbit hole, which never quite leads you to the most appropriate destination. This proves one ultimate truth about the web: its very nature is that content has a shelf life. Content has no meta-data associated with it to define its time and relivance to that time. Simply supplying a date to the post might not provide enough meaning for the user to uncover relevance. So, what tools does the web developer have has their disposal to provide context? Color and Content.
The idea is indeed brilliant but I have my issues with this choice of decay. He’s gone from a dark tones, which symbolize the freshest content, to a lighter tone, as content fades away. While we can talk sematically about the nature of decay and the Goethe-est poetics of color as we fade away, I wonder if Shaun’s users will see the importance of dark tones as new content? Fresh, to me, is much like the adverts for Laundry Detergiant: pretty girls running through a field of tall grass and fresh linen sheets. The imagery of freshness is light. Inman has done ever so well to develop a system to help add meaning to the decay of content, I just think he’s missed perhaps the most important detail of all: the impression of what decay is…. a slow fade to darkness.
Stopped Designing But Still Interesting
Sunday, October 1st, 2006Stopdesign has been changing out their front pages with some interesting CSS2\3 techniques. For example, instead of adding new classes to change out colors on a dl declaration, doug simply used the + symbol to add styles upon previously defined styles. This is a bizarre form of inheritance:
dd:before {
margin-right:.1em;
content:”+”;
color:#666;
}
dt + dd:before {
content:”";
}
dt + dd {
color:#b77;
}
dd + dd {
/* motivation */
color:#7a7;
}
dd + dd + dd {
/* process */
color:#79b;
}
dd + dd + dd + dd {
/* talent */
color:#bb4;
}
dd + dd + dd + dd + dd {
/* luck */
color:#666;
}
Sure you could do that with specifically id’ing classes, but still worth the note.
