Code For Web

Building Your Team Part 2

One of the most important roles that a manager can play is to promote passion in the workplace. Passion is a key element to building a successful team and company. Without passion, the work becomes more of a chore and can also reduce the quality of the work.

Passion

The leader of any team needs to live, breath and promote passion. Passion for what the group does needs to become part of the company culture, and reinforced everyday in order for that to become a passion. One great thing about working with the internet is that the technology is always changing, new techniques are always being shared, discovered and talked about, which keeps the the team learning. This learning should be shared, and through this shared knowledge and discussion, passion for our trade is produced. Also, this creates a stronger bond with team members. I could go on and on about passion and the importance it plays in the success of projects, team members and the company, but I think you get the point.

Great book to read about getting an idea for what passion is… Delivering Happiness.

Next up: Motivation

Thoughts on the Chrome Web Store

Glorified bookmarks?

Quicklinks to Gmail, Google Apps and a hand-full of games?

How is this an app store – it seem to be directory of links.

Not really sure what Google is thinking here but it does not seem to challenge Apple in any way for an App Store. Maybe its a first step, but this is nothing more than a directory for links.

Disappointed Google, you usually are at the forefront of greatness on the web, this is BUZZ all over again.

Thoughts?

Attempting to Gather Client Requirements

It is always tough when clients tell you, “You tell me how my site should look”.

Where to start? What do you as a web professional need to do? What is going to be the most important item to focus on? This exercise may seem cruel for a client to put you through, but it could be beneficial to your organization.

Here are a few reasons why:

  1. Forced to learn about the organization that you could be building the website/application for
  2. Have an outside and fresh look on the company, you haven’t been there dealing with the day to day management
  3. Show off your companies innovation, creativeness and understanding of how marketing, design, and the web work together to create a brand and expand a brand

Even though you are told nothing, given nothing from the client doesn’t mean you don’t have the ability to research, find resources and information through other means. Sure, it might be a little more work, but you gain knowledge and are able to talk to the client understanding their business.

Also, in the end you gain the respect of your client and hopefully a great source for referrals. How you take care of them now greatly improves the relationship moving forward.

Building Your Team Part 1

This is what I have learned from experience, through the years of observation of seeing what works and what doesn’t work in the web field.

First lets start with the simplest of roles that your team may require:

  • Designer – creation of graphics, designs and other required assets (video, photos, flash, silverlight)
  • Developer – the main coder, and implementor of the website/project
  • Architect – planner who designs or architects the application’s functions and rules; from code design to database design

These three roles are the basis for all roles in the team, from the most green of team members to the most advanced. Now, depending on your team size you may have overlapping roles which will require team members to wear many hats. But this can be to your advantage, one of the biggest complaints individuals in the web field has is their jobs becoming stale and growth possibilities leveling out over time. With a team where one must adapt and wear other hats the individual has the ability to learn and grow, therefore maintaining interest and a positive outlook on the job.

Manager/Team Lead

As a manager or team leader your goals should include:

  • Excite Passion
  • Motivating
  • Promote Teamwork

Many times we find people who are great workers, they get stuff done, but they cannot work with other people, they are a poor team player. This can be due to a lack of confidence, ego or the unfortunate IT attitude (I am superman I can do it all). If you are trying to build a team, this type of attitude will only cause difficulties over time. The goal is to build an environment where sharing knowledge and questions are encouraged. The sad truth is no matter how much you value this employee they will never change their attitude and likely to cause stress within the team thus defeating the team building process. It’s not to say it can’t be done with these types of workers, its just more difficult and usually these individuals require a “special amount of attention”, but we will talk about that more later.

Next up: Breaking down the barriers.

@media query for CSS – this is your friend

If you have been living under a rock, then you might not know about a great feature of CSS3 called @media. This allows for “responsive design” capabilities based on the size of the browser window. This is a great feature when your website needs to target both the desktop browser and the mobile browser. Today most websites accomplish targeting mobile and desktop browsers by having two separate websites, each website targeting a particular device.

Here are a few examples:

iPhone

@media screen and (max-width: 340px) {
   /* styles in here for this screen size */
}

Landscape (mobile)

@media screen and (orientation:landscape) {
}

This will target devices in landscape mode like the iPhone and Android mobile devices. This allows for the designer to create a fluid interface that will respond to the devices resolution restrictions. No matter what size the screen is the website can still be very readable and easy to navigate based on creating a set of CSS rules based on the media restrictions.

A great example of this is www.colly.com by Simon Collison, his website responds to the users browser window size or mobile device’s screen size. Repositioning page elements and hiding items is needed in order to create a more readable website no matter what the screen size is.

Many of you should be use to the following:

<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />

But with media queries we can do this in the CSS file:

@media print { }

Since “all” is the default media type, we can add a @media print to target printer output. @Media Queries uses good old Boolean logic (true|false) to determine if the CSS properties will be applied.

Why is this GOOD?

Well why is this NOT GOOD should be your question! The gained flexibility in design, reacting to the users’ browser or device allows for the website to render and display in a manner that is one readable, and secondly viewable to the user no matter the resolution or device. Hence the current “buzz” word in the industry: RESPONSIVE DESIGN. But this is a great buzz word, when did we have the capability to on the fly rearrange the websites content based on the users resizing of the browser (without JavaScript) or device orientation? For designers and developers this is something to be excited about and really look to use in your everyday development/design of web applications. Endless possibilities…

Sounds Like The Past

This reminds me of what Sun’s Java tried to promote years ago, “Write one, run anywhere”. In this case its, “Render Once, Respond to anything”.

References

If you are really bored feel free to read the W3 specification for @Media Queries.

Delivering Happiness

Anybody out there running a company or the person in charge, this is a must read. Delivering Happiness is a great book, gives you the insight to how Tony made things happen. His struggles and how his team overcame the obstacles before them. Great thing about this book is that it is filled with real world examples, comments from Zappo’s employees and just filled with great information about building a company culture that can be successful and also fun and exciting at the same time.

So for all you business minded people out there, this is a MUST read.

ASP.NET MVC Preview #3

The Microsoft Team has been busy at work, with recently releasing ASP.NET MVC 2 and now we see 3 isn’t too far off. Few of the items looks like they have “borrowed” features from RoR (Ruby on Rails) or at least the concepts on how things work. Which isn’t a bad thing, why reinvent when you know of a model that is already working well thats in production.

One plus I see for the ASP.NET MVC framework is the backing of a solid and powerful programming language like C#. While Ruby is an exciting and powerful scripting language, C# does offer a vast array of features, objects and abilities. I think of it as if we wrote a RoR app and used C/C++/Java (JRuby) to process some of our heavy lifting for the performance boost. The ASP.NET MVC framework has it built/baked in.

Preview 3 has introduced a new View Engine; Razor. Looks like we have removed the <% %> and replaced with @object {}. While this is a nice change and saves us programmers a few keystrokes I don’t see this as earth shattering news.

Just thoughts…

Need to learn HTML5?

So HTML5 is coming soon and coming strong!

Many mobile devices are supporting this due to the technological advances and the reduced need for Adobe Flash (thanks to Video and Sound capabilities). Plus mobile devices are on the cutting edge of technology and adapting at a faster rate. The storage features of HTML5 are great for mobile devices due to the ability to store frequently accessed information locally. Currently, you can see Google Mail utilizing this feature on the iPad, iPhone and Android devices.

The new form input types are a nice addition: email, phone, search, website, amount, rating, date, color, and zip. On the iPhone/iPad the keyboards adjust based on the input type and all other browsers will default these form fields to “text”.

As for desktop browsers there is solid support for HTML5 and even some “hacks” you can do to enable most browsers to support the new tags in HTML5 (CSS additions to make the new tags css property display set to block). Google Chrome and Apple Safari so far have the best overall support for HTML5 from what I have seen. The new tags are good for organization of content (semantic coding practices), but at first this may cause some confusion for designs and developers, with some practice and reading will clear things up.

Right now I recommend if you are going to be doing any mobile development, target HTML5 and take advantage of the up and coming technology.

Resources:

Great read for HTML5: HTML5 for Web Designers
Test your browser for HTML5 goodness: html5test.com
View other goodness in HTML5: html5gallery.com

    HTML5 is a technology you should have your team looking into now and not tomorrow. HTML5 and CSS3 is a great combination!