Proposed design compared to the current design

Building brand recognition and integrity through design

A homepage can be the first contact a business makes with a customer. It builds your brand image, integrity and trustworthiness. Poor design is like a weak handed handshake, it instills doubt in the mind of the customer.

I have designed the site using a strict grid for consistency, applied subtle gradient effects for emphasis where it counts and bold imagery to help tell a story of innovation and industry leadership. Thoughtful attention to detail through the use of single pixel borders and well–set typography all paint an image of trust and integrity with the brand.

Radisys proposed homepage - Click for hi-res

Simplify and conquer

I have simplified the layout of the navigations to guide visitors to what’s most important by grouping items together based on importance to convert a visitor to a customer. Primary navigations like What We Do, Products, Services and Support are important to helping visitors convert to customers and to continue to build trust with existing customers. To this affect I have made these navigations a size larger and bright white to draw attention. Secondary navigations are muted against the red background.

Proposed navigation - Detail

I’ve restructured the drop down menus. Instead of using a simple list-based menu I have opted to move in a more mega direction. With more screen real estate being used for these menus I can more elegantly move the user around the site. I’m also using the added space to reinforce trust with their decisions on where to go next with text elements that integrates brand messaging with navigations.

Proposed drop down menus

The footer has been reduced from a laundry list of links to a simple one–line set of categorized items and integrated with social media links. I have also reduced the news and events to a less prominent position below the footer along with the language selection.

Proposed footer design - Detail

The desktop experience must carry over to mobile

It’s not a question of whether or not visitors are going to visit your site on their mobile devices, they will. You have to carry over the same experience they receive on their desktops to their mobile devices. If a visitor visits your site on their mobile device and you present them with an unrelated experience you’ve just instilled doubt in their minds.

For the mobile site I’ve reduced the header to just the red background and the Radisys logo centered. I’ve altered the footer to contain 4 main navigations, Products, Services, Contact and Full Site. Each of these elements are proven to be categories most users on their mobile devices are interested in viewing. A link to the full site is included to let users view the desktop equivalent for full functionality.

For the mobile homepage I have opted to introduce brief copy about Radisys followed by secondary navigation elements. Each linkable item has been built to be 45px in height and nearly full width for fingers. There is nothing more frustrating than poking away at single lines of text and ending up someplace other than where you intended.

Proposed mobile homepage

Given that Radisys products are fairly complex, to make a purchase decision the visitor is going to need to know everything about that product. I’ve added an additional row of navigation elements above the footer.

Proposed mobile products and products details

Planned functionality for the mobile experience is that all footer elements remain static at the bottom of the page. The natural behavior is for users to scroll up on mobile sites. By keeping the footer locked at the bottom of the viewport at all times insures they can continue to navigate the site regardless of where they are on the page.

We don’t know what these users are connected to; they could be surfing with spotty 3G services or connected to WiFi. We have to accommodate the worse case scenario, which could mean they lose their connection at any time. To reduce the total load time of the page and serve up the content they absolutely need I have removed all images from the pages.

In conclusion

By paying careful attention to detail and using vivid story–telling imagery I have paid homage to innovation. I’ve effectively built trust and integrity into the brand and again have returned Radisys to the status of an industry leader.

*Please note I am no longer affiliated with Radisys. These opinions and comps are solely based on my opinion. Posted: December 5, 2011.

I’ve been reading countless stories online of parking lot muggings, pepper spraying, beatings, shootings and stabbings all over material possessions. It’s as if we forget all humanity in the face of XBOX 360 being sold for a mere $25.00 below the regular retail price or a flat screen TV being sold for $800.00 instead of $1000.00. What a joke. Is that TV or game console really worth risking your life or taking the life of another?

I ask retailers one question, if you can sell those items at that discount for one day and still make a profit then why are you not selling it at those prices every day? No one stops to ask that question; perhaps we’re all getting ripped off every day even on Black Friday. I’m not suggesting we all go join the occupy movement, but seriously, why not sell items for less every day?

Christmas and the holiday season are not about materialism. It’s about sharing and spreading love. Whether you’re religious or not, it’s about love and compassion for your fellow man. Next year put your pepper spray down and enjoy Thanksgiving with your family, enjoy everything life has to give, whether you’re broke or wealthy. We all are blessed to live!

Love yourself, love your family and love your neighbor. That’ll bring you more joy than that flat screen TV. Give your time to help someone in need have a warm meal or a better day. When you help someone your brain releases “feel good” endorphins and those endorphins feel so much better than hoarding around your favorite retail store. Just the memory of helping alone can boost your mood far more than watching your favorite episode of CSI on your flat screen.

As for the deals, folks they’re not that great. My wife and I managed to complete our shopping for our children and families without needing Black Friday deals. We got items for half off and even some for free! Be creative, look around, Walmart is not your one–stop shop.

I ask of everyone to remember what the holidays are about. I also ask that we all take a moment to give peace to families that are grieving losses this time of year, for families of our soldiers who are over seas, and for those so caught up in materialism they have forgotten what it’s all about.

Purchase The Devices

• Go over to Amazon.com and pick up the Obihai 110
• If you want to get out of your modem lease fees or if you need a newer modem pick up the Motorola SURFboard SB6121 DOCSIS 3.0 high–speed modem, also available at Amazon.com

Check to see if you can port your existing number to T–Mobile

For Google Voice to use an existing number it has to be paired with a currently active mobile phone. Through our research we found that –-Mobile seemed to be the best choice when porting to Google Voice. Just enter your number at T–Mobile’s website.

If you can’t transfer your number, that’s ok. Google Voice can give you a new number, however if you use your current number on your business cards or your clients call you on it, it’s nice to keep.

If you can port your number to T–Mobile head to your local T–Mobile dealer and pick up the cheapest prepaid phone you can find. We picked up ours for $19.99. Get a $10.00 prepaid card with your purchase so you can still make and receive calls to your existing number during the porting process. T–Mobile will give you a 1–800 number to call to set up your port. They will tell you it will take 5 – 7 business days, it took us 3 business days.

Once the port is complete, Comcast will cut service to your phone. This is why it’s nice to have some back up minutes.

Once you get your devices

Here is where the fun starts, you have all of your new goodies and you’re ready to make the switch.

• If you don’t already have a G-Mail account, create one. For OBi to pair up with Google Voice you must have a G-Mail account. Don’t worry, it’s completely free and takes a matter of minutes to set up.
• Once you have your G-Mail, login and go to Google Voice. It will prompt you to select a number or use an existing mobile phone number. Choose the existing mobile phone number and enter in your T-Mobile phone number. Google will give you a message telling you that once the porting process is complete your T-Mobile phone will no longer be able to make or receive calls. This is fine, after all we only spent $19.00 on it. The porting process with Google Voice takes exactly 24 hours.
• Once your number is ported to Google Voice, Google will send an e-mail to your G-Mail letting you know the process is complete. Pop over to Google Voice and you’ll see that your number is now your Google Voice number.
• Make a call from your desktop or laptop to any phone this activates your account. Once you’ve made the initial call, in Google Voice, click settings and then phones. Check mark Forward Calls to Google Chat.
• Hook up your modem (if you bought a new one) and give Comcast tech support a call, they will walk you through activating your new modem.
• Once your modem is activated, plug it into your router and restart the router and the modem so they pair up with each other.
• Plug in your OBi 110 to your router and plug in your regular telco phone line into the back of the OBi 110.
• Voila, you can now make and receive calls via Google Voice for free on your regular phone anytime with your OBi 110. Buh-bye phone bill!

I know it sounds like a lot of work but the process took my wife and I no more than one week to complete. Our call quality is better than Comcast and we are paying nothing!

Hello there Chris!
I’m a fellow web developer and I had a quick question…
Would you be so kind as to briefly explain the difference between the various CSS frameworks out there (like 960.gs, 978.gs, and blueprintcss.org), and why the 978.gs system is better in your view?
Thanks for your time! I sincerely appreciate it…

And my response:

You really have two different types of frameworks here, and that’s really the funny thing about CSS frameworks. On one hand you have the 960 and the 978 which are simple grids and named after the full content width in pixels. On the other hand you have Blueprint which is more of your “traditional” framework, one like you may see in JavaScript, PHP, or any other scripting language. Blueprint comes with a variety of basic styles in place and its own stylesheet. Ok so more detail and why I like the 978 the best.

960gs:

The 960 is kind of the “first” or at least the first I came across grid system. It comes in a variety of modifications for the number of columns you can use etc… It’s namesake is after its full content width of 960px. However, the 960 is not exactly what we’d think of as 960px wide, instead the usable content area is 940px wide with 10px margins on either side. Why the margins? So you can easily code in floated elements, example:

.something li {
  float:left;
  margin:0 10px;
  width:220px;
}

You could have four of those list items go across the page without having to zero out the first or last child item margins (using the 12col version).

960 also comes with a base style sheet that you can use where the creators have given various width content areas with arbitrary class names. This used by most developers to speed up their process. Myself, I am more old school in my approach and don’t use these predetermined class names, instead I like to create my own classes and IDs that make more sense to me as I write the code and later come back to debug for browser compliancy.

The 960 was created for 1024×768 display resolution environments, you have a healthy whitespace on the left and right side of the page which well frames your content.

978gs:

The 978gs is more of the new kid on the block. It’s 978px wide in content space and each column has a 30px gutter, or for an element, a left and right margin if 15px. The usable content width is exactly 978px. For floated elements you’d simple add an additional 30px to that width for a grand total of 1008px in width. At first there was no real base style sheet offered, Nick La, created this grid system (webdesignerwall.com) and was later capitalized on by the Brothers Roloff (978.gs) who took it to the next level by offering the same mathematical grid at different widths (larger/smaller/mobile). Brothers Roloff also created PSD for each grid system and a base style sheet, all are downloadable for free at 978.gs.

So why do I like this over the 960? Whitespace! I find that the extra margins for columns better frames the content and separates it from the rest allowing the eye to scan various content blocks more effectively. I can’t speak to the base stylesheets provided since I shy away for those in favor of home–growing my own.

*For the 960 and 978, if you plan on home–growing your own CSS classes and Ids, be sure to use a reset at the top of your document. The prepackaged styles come with a reset already in place.

Blueprint:

So here is the different one, and it’s not the only one of its kind. Blueprint is a full–fledge framework. It comes with its own styles and various styles for typical applications like buttons, forms, links etc… Comes with its own HTML template etc… I have never used Blueprint so I am not going to spend time talking about its pros and cons. I prefer to have more control over the the stylesheet. Not saying you cannot modify or use only part of Blueprint, but if you do that you’re somewhat back in the same boat you were before using it. It’s main purpose is to speed up the developers workflow.

If you’re designing a site from scratch, as in there is no client provided design then you can use any one of these grid systems. It’s always easier to start from scratch. However, if the client has provided you design and it does fit into the Blueprint framework, I don’t see anything wrong with using it. Or, if it fits into the 978 or 960, there is no harm in either one.

Looking into the future though, these are slowly becoming obsolete, as more and more developers are moving towards fluid, flexible or hybrid grids. Monitor size and resolution are changing rapidly, from mobile devices, to laptops; to desktops the arena is huge. Using fluid, flexible or hybrid grids allows you to code one style sheet for them all. This also makes the 978 package attractive since the Brothers Roloff have converted it into popular widths you can easily use media–queries to handle various screen sizes and resolutions.

Another variable is the width at which people browse the Internet, not everyone browses at full screen. Chris Coyier of CSS–Tricks did an interesting poll and info graphic of how people are browsing the web and you may be surprised at the results.

Hope this answers your questions! Good luck in your development adventures!

– Chris

If any of you would like to add to this answer, please feel free to comment below!

Your Time is Your Greatest Asset

Every project you take on is a lesson. By timing projects you’ll start to learn the true amount of hours it takes you to complete various aspects of a project. You’ll also have a point of reference when quoting new projects. Perhaps you have performed the same task in the past that a client is looking for now. If you do a diligent job of timing your projects you can look back at that previous project and build those hours into your quote.

Understanding your hours also helps you give your client a realistic timeline of when they can expect to see checkpoints for their project. Checkpoints and realistic timelines are critical to good relationships with your clients. Having knowledge of your hours can help you also deal with scope creep and help you decide whether a new feature request can be done in the given scope of work or if it requires an additional project quote.

Your time is your greatest asset. You get paid for your time. The more you know about yours hours the more upfront you can be with your client and they will appreciate your straight shooter attitude with their projects even if it is not in their favor.