FOLLOW OUR BLOG

Via RSS

Search BLOG

Part 6: Your Online Presence: Your Company’s Intranet

April 29, 2011 | Written by Amber Sawaya

This is part 6 in our 6 part series—Your Online Presence. This is series of guest posts for Carrera & Company.

For our last article in this series we’ll be focusing on your company’s intranet. An intranet is an internal network that a company uses to share information and to keep a repository of information.

Whether your company is a small two person shop or a large corporation with multiple locations you can benefit from creating and maintaining an intranet. The complexity of your intranet should match the size of your company.

Small Businesses — 2-50 people

In a small business the most important aspects of an intranet is storage and collaboration on documents. For this we recommend Google Apps for Business.

Once this is installed you can manage rights and permissions (as well as email accounts and user groups) for all employees. You will have access to Documents (for word processing), Spreadsheets and Presentations. You can set up folders for different categories, like “Operations” and document different procedures in there. Multiple people can work on a document simultaneously and everyone can control their own document management (like sorting, hiding and marking frequently used documents with a star). Google Apps for Business is free for up to 50 users.

Mid-to-Large Business — 50+ people

If you need a more robust and controlled intranet you are looking at an enterprise solution—good open source solutions are Confluence and Drupal (completely customizable to your company’s needs, look and feel). Microsoft Sharepoint is another intranet solution. These systems organize and present your information in a more traditional way—with pages for departments, events, operations, etc. You can include bulletin board systems, document management and a host of other items. Enterprise level intranets are only limited by your desire and budget and can be a vital way to keep employees—veterans and new hires —informed on current events and past knowledge.

Building an Intranet

Whether you have a small or large business your intranet should include:

  • Operational Procedures
  • Vendor Lists
  • Logos (in formats for printing, putting on the web and a style guide that outlines usage)
  • Project Documentation
  • List of Holidays or other days your office is closed
  • Latest News for your company and industry
  • Any other piece of information that needs to be shared and stored with multiple people in multiple locations

We’d like to thank Laura Carrera for allowing us to guest publish this series on Your Online Presence. We hope you’ve found these articles informative and timely.  If you missed the any article in this series you can see it here: Your Online Presence

For questions, comments or to work with us to create an intranet for your company please contact Sawaya Consulting. SAWAYA Consulting is a strategic business-to-business partner focusing on information management through design & technology. We build corporate tools, informational websites, and web applications.We are located in Salt Lake City, Utah and online at www.sawayaconsulting.com.

How to write a CSS nth-child equation

April 26, 2011 | Written by Amber Sawaya

Today we are going to talk about the CSS pseudo selected “nth:child”. It’s my new favorite thing.

We are lucky enough to have two clients right now that have asked us to work in HTML5 and CSS3 and they don’t care one whit that (as one client put it), “my grandma can’t see the site on her old computer running IE 6″. So we’ve opened up the firehose and pushed ourselves to implement some new CSS tricks.

What we use nth child for

Since we commit exclusively to tables-less CSS and a 960 grid layout we use nth child a lot to float elements into columns – if you float three across with a margin-right of 20px, you need to remove the third margin so your widths come out properly:

.col:nth-child(3n+3) {margin-right:0;}
< view the code >

We also use it for table rows when displaying a lot of data:

tr:nth-child(odd) {background:#CCC;}
< view the code >

How to Figure Out the Equations

I’ve been roundly mocked by my family for my issues with basic math. Somehow I have a degree from the University of Utah and have always excelled at my classes, yet I cannot do long division (and I have a father who is a financial examiner and a sister going through vet school). Thusly I could not wrap my head around the equations for nth-child. I read a great article from How nth-child Works by CSS Tricks and that helped, but it was time to pull in the big guns. I called on my friend Mike Carey (aka Homeschool) to help me out. Mike has a particular gift when it comes to explaining difficult concepts to people.

Mike explained that you need to find and apply the pattern and the start point.

If you want the seventh item to be different then you can just number it (7):

.box:nth-child(7) {background:#00AEEF;}
< view the code >

if you want the 7th, 14th and 21st then you know it’s the seventh item starting with number 7, which is written (7n+7). This made no sense to me.

So Mike broke it down more.

You are looking for two things, the pattern AND where you want the pattern to start. The first part is the pattern. The second part is where it starts.

So then if you want:

Every 5th item to be different, starting with the #5, you write: (5n+5)

.box:nth-child(5n+5) {background:#00AEEF;}
< view the code >

Every item starting with the 3rd to be different, you write (n+3)

.box:nth-child(n+3) {background:#00AEEF;}
< view the code >

Every second item starting with the 6th, you write (2n+6)

.box:nth-child(2n+6) {background:#00AEEF;}
< view the code >

Practical Examples

Besides the couple of examples we started with we used this heavily in an application we are developing that has a lot of information tables. They look like this:

This is achieved by saying the first column looks one way, the second another and the third another. You cannot specify columns in CSS (only table cells [td] and rows [tr]) so you have to do it based on every third cell:

td:nth-child(3n+1) {background:#CEE3F2; … }
td:nth-child(3n+2) {background:#E6F1F8;}
td:nth-child(3n+3) {background:#EDEDED … }

(the above examples have been truncated, view the code to see full styles)

< view the code >
Thanks for your help, Mike!

Age Performance Business Card Display

April 25, 2011 | Written by Amber Sawaya

It’s awesome to see something as simple as the way business cards are arranged become a nice looking display. We snapped this picture on our way out of Age Performance the other day.

Part 5: Your Online Presence: Your Company’s Web Application

April 22, 2011 | Written by Amber Sawaya

This is part 5 in our 6 part series—Your Online Presence. This is series of guest posts for Carrera & Company.

This installment of our series covering your Online Presence is a little more specialized that our other articles. You can previous topics here:

  • Your Website
  • Your Social Media Strategy
  • Free & Local Ways to Promote Yourself Online

This article looks at your company’s web application. What is a web application? It’s a way for your customers to interact with your data—usually through some kid of a form input that will greatly effect the output. Sometimes your web application will be something small that helps reinforce your product or services, sometimes your web application IS your product or service.

Support Application

A good example of a web application that reinforces your product or services is a services calculator-for instance if you are a lawyer and want to help your clients calculate child support payments you could have a calculator that allows your client to input the mother’s salary, father’s salary and number of children.

Your web application then runs the equation in real time to show how much is due.

Another good example of a support application is to help show your customers the return on investment (ROI) on using your product – for instance if you have time tracking software and you know that someone billing $150/hour will recoup your $50/month price tag in 6 weeks, you can have a web application that allows them to put in their hourly rate, choose which plan they want to use (in this case the $50/month plan) and show them how long until they realize a break even ROI and how long until your product is actually producing more money for them than they are paying to use it.

Web Application as a Product or Service

(also known as software-as-a-service—SAAS)

An example of your web application being your product is if you offer a way for people who are working out with a physical trainer to do prescribed workouts and record them when they aren’t with their trainer. Not only does this product allow the client to keep track of their goals, it also allows them to save money by only working a trainer in person some times, but still get the benefits of a customized workout. You take this application and you sell it to a gym, making your web application a product a gym buys to offer their clients a new service.

Join us next month as we look at keeping your organization organized with Your Company’s Intranet.  If you missed the any article in this series you can see it here: Your Online Presence

For questions, comments or to work with us to create a web application for your company please contact Sawaya Consulting. SAWAYA Consulting is a strategic business-to-business partner focusing on information management through design & technology. We build corporate tools, informational websites, and web applications. We are located in Salt Lake City, Utah and online at www.sawayaconsulting.com.

Apple Icon Fail

April 19, 2011 | Written by Amber Sawaya

I’m a huge fangirl so it’s with a heavy heart that I lodge this complaint…

Dear Apple,

Why do you have three different triangle-in-a-square icons in iTunes? They confuse me.

Thanks,
Amber

I seriously don’t understand this, the icons (from left to right) control:

  • Album Artwork
  • Multiple Speakers / AirPlay
  • iTunes Sidebar / Ping

And yes, I click them all regularly trying to turn on the music in multiple rooms in our house. #firstworldproblem