Compressing/Extracting Files & Folders

Microsoft Windows and macOS have native compression utilities that allow you to create and extract zip files by completing the following steps:

Windows 7 & Earlier

Compressing

  1. Right-click on the file or folder
  2. Hover over the Send To > menu item
  3. Select Compressed (zipped) Folder

Extracting

  1. Right-click on the .zip file
  2. Select Extract All…

References

Windows 8 & 10

Compressing

  1. Select the file or folder
  2. Click the Share tab
  3. Click the Zip icon

Extracting

  1. Select the .zip file
  2. Click the Compressed Folder Tools tab
  3. Click the Extract All icon

References

macOS (Mac OS X)

Compressing

  1. Right-click on the file or folder
  2. Select Compress “filename“ (filename would be the actual name of your file or folder)

Extracting

  1. Double-click the .zip file

References

Zip files can also be created using a compression utility such as 7-Zip or Zipeg.

Fully Responsive YouTube Videos & Google Maps

Add a <div> element around the <iframe> for your YouTube video or Google Map:

<div class="iframe-container">
   <iframe src="https://www.youtube.com/embed/j4o2PDwKdcA" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Add the following to your stylesheet:

.iframe-container {
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
}

.iframe-container iframe {
   left: 0;
   height: 100%;
   position: absolute;
   top: 0;
   width: 100%;
}

Results:

How to Add a Favicon Using the WordPress Site Icon Feature

WordPress 4.3 introduced a new “Site Icon” feature, which provides a user-friendly interface for adding a favicons to your websites. Icons are also used as app icons on mobile devices.

Screen Shot 2015-11-20 at 2.48.50 PM

The Site Icon feature can be found by going to Appearance > Customize and selecting the Site Identity option.

Then click the Select File button and choose an image in the media library or upload a new file.

Icons should be a minimum of 512 pixels wide by 512 pixels tall. If the image is rectangular, WordPress will prompt you to select a square portion after uploading.

References and Additional Reading

Resume Writing Tips

  1. Use a template if needed and/or review templates to get ideas.
  2. Check for spelling and grammatical errors.
  3. Use a professional sounding email address.
  4. Use past tense action verbs for previous job duties and present tense for your current position.
  5. Limit text color to black or gray. Only use other colors for headings or accents.
  6. Do not add unnecessary imagery unless you are a designer.
  7. Be consistent with fonts, spacing, punctuation, capitalization, and other formatting.
  8. Do not list your GPA unless it is at least 3.5.
  9. Omit high school information unless it is your highest education. Never add high school graduation date because it shows your age.
  10. Do not include a hobbies section unless it’s directly related to the position.
  11. Do not list references unless requested and do not add “references available upon request” as this is understood. If references are requested, get permission before adding each reference and never list their home address.
  12. Include your name and phone number at the top of each page.
  13. Name the file using your full name and the word resume.

10 Tips for Writing an Effective Client Survey

Regardless of whether you are embarking on a redesign project or a new website, one of the most important documents is the client survey or questionnaire.  Many client surveys found online are derived at least in part from Web ReDesign, by Kelly Goto and Emily Cotler.  This is one of the most helpful books that I have found for web project management and I’ve been using it in the classroom for years, starting with the first edition (I also recommend the CD version and Lynda videos).

However, my biggest complaint about the common format of client surveys is that they are written from the project manager’s perspective, with little thought given to the client and sometimes even the developer/designer. It does not matter if the client has paid or not—clients are busy—that’s one of the reasons why they’ve hired you instead of trying to build a website themselves. A poorly constructed client survey will likely get pushed to the bottom of a pile of paperwork, especially when it cannot be completed quickly. Hopefully you can utilize the following tips to help simplify the planning of your next web project.

  1. Get the entire team involved

    If you divide project duties among two or more team members, find out what information everyone needs to do their job. Better yet, have everyone participate in writing client survey questions.

  2. Put yourself in their shoes

    Most people hate surveys of any kind and are reluctant to take the time to complete them.

    Look at each question from the client’s viewpoint. If you were the client, how would you answer each question? Write each question as if you had to fill it out. In addition, have a friend review the survey and provide feedback.

  3. Evaluate each question for relevancy

    A long survey can be a daunting task. Review each question to determine if you really need to know the information. How will the information be used? Is the information valuable? Limit questions to what you REALLY need to know. For instance, if you don’t care about marketing plans, don’t ask about it. This is also a good time to make your form more intuitive by grouping related questions.

  4. Provide different questions based on the project type

    You may need different information for a new brochure site versus a makeover of an existing e-commerce site.  One way to avoid the visual impact of a long form is by tailoring questions based on project type. This is easy to accomplish programmatically using a web-based form but you will need to be a little more creative in a printed document. A simple “If no skip to section X” should suffice.

    Of course, you may opt to have separate surveys but be careful not to miss an opportunity to upsell your project.

  5. Avoid lengthy questions

    Wordy, two-part questions can be confusing and lead to incomplete answers.  Something like “Why or why not?” or “Please explain:” added to the end of a question is fine but you should otherwise avoid compound questions.

    You should also limit use of open-ended questions.  Be concise and to the point—if you want a simple answer, ask a simple question. Your goal here is to make it quick and easy for your client to complete and at the same time get the exact information that you need.

  6. Avoid confusing and industry specific terminology

    Do not expect clients to know the difference between a domain name and a hosting account. This is sometimes even true for redesign projects; many people, even very intelligent people, just don’t get it. But that’s ok because it keeps us employed.

    When using common acronyms, spell out the name followed by the acronym in parenthesis like Internet Service Provider (ISP).  Reason being is that some people may recognize ISP but have no clue as to what it stands for and others may be the exact opposite.

    You may want to instruct clients to skip questions that they do not understand. And be sure to evaluate unanswered questions to see if they should be rewritten for future surveys.

  7. Provide examples of the info that you’re requesting

    Show your client how you expect them to answer a question or provide answers for them to choose from. Consider using tables with appropriate headings and examples in the first row, such as the following:

    Website Analysis of Major Competitors
    Website URL Likes Dislikes
    http://example.com Widgets are easy to find.
    Nice color scheme and layout.    		 Text is hard to read.
    Animation is distracting.
         
         

  8. Answer what you can ahead of time

    Chances are you have probably already spoken to or corresponded with the client prior to distributing the client survey. Therefore, you should already know the answers to at least a few of your questions. Go ahead and leave these questions in place, but include the answers as you perceive them to be. Doing so will provide good customer service by adding a personal touch to their survey and showing your client that you are listening to them. We all want to feel special every now and then.

  9. Always, always, always check spelling and grammar

    It’s true, web people aren’t the best spellers—that’s what spell check is for and we tend to rely on this feature a bit too much. Typos and grammatical errors look very unprofessional and could result in loss of income.  Check, check, recheck, have a friend check, have your momma check, and then check some more.

    Do not overdo it with thesaurus soup; use simple language—words that you would actually say in conversation.

  10. Complete the survey with your client

    Whether in person or over the phone, this is the absolute best way to get the information that you need. This tip solves most of the aforementioned issues. I guarantee that you will save time in the long run.

    You can also use this as an opportunity to tell your clients why you are valuable. They need to know that you may charge more than Uncle Bubba The Web Developer, but your lean, mean, sexy code will save them money in the long run.

    Remember to always have your client sign the survey even when it is done this way. Send it to them via snail mail if you have to (web folks tend to forget about the USPS).

Let me know if you find this information useful or have something to add. Also, I would love to see your client surveys!!!

Applying Background Images Using CSS

A background image can be applied to any element using the following CSS declaration:

background-image: url(image name);

Shorthand

Shorthand background declarations are written as:

background: color image repeat attachment position;

For example, the following code:

p {
  background-color: #f00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

would be written in shorthand as:

p {
  background: #f00 url(background.gif) no-repeat fixed center;
}

Background Position

Two values can be used with the background-position property as follows:

p {
  background: #f00 url(background.gif) no-repeat fixed center left;
}

The first value, called the x-coordinate or x-position, is the horizontal-position or distance from the left. The optional second value, called the y-coordinate or y-position, is the vertical-position or distance from the top.

The top left corner, 0% 0%, is the default location. The right bottom corner is 100% 100%. If only one value is specified, it is assumed to be for the x-coordinate; the y-coordinate defaults to center or 50%.

Units of Measurement

Units of measurement, such as pixels, points, em units, etc., can be used for the background-position. Negative values are allowed too. Combinations of keyword, length, and percentages are also allowed (e.g., 50% 2em or 100px bottom or left 10%). For logical reasons, when using combinations of keyword and non-keyword values, left, right, and center should only be used for the x-coordinate; top, bottom, and center should only be used for the y-coordinate.

Don’t Forget Color

Always remember to specify a background color when using an image as a background, especially with light-colored text, because the text should be readable if the image fails to load.

Examples

x-pos x-pos y-pos x-pos y-pos x% y% Example
n/a top left left top 0% 0%
top top center center top 50% 0%
n/a top right right top 100% 0%
left center left left center 0% 50%
n/a center center center 50% 50%
right center right right center 100% 50%
n/a bottom left left bottom 0% 100%
bottom bottom center center bottom 50% 100%
n/a bottom right right bottom 100% 100%

Google Outage Brings the Internet to a Crawl

From MVied Designs…

As you may or may not have noticed, the Internet ran into a few complications today. Apparently the problem has been linked to an AT&T routing problem somewhere in the Midwest. Some people didn’t experience any problems, while others were unable to access many large websites, most notably, Google. Several other large website such as Wal-Mart, Apple, and Microsoft were unreachable by people in certain locations

Read full story at http://mvied.com/blog/google-outage-brings-internet-crawl/.

Weird Twitter Gadgets!

I just ran across a post on Digg in the technology group about gadgets and devices people have built that interface in some way with Twitter. Quoting from the article:

Its (Twitter’s) charm is that its usefulness is entirely open to interpretation – while many just don’t get it (including Google’s CEO), some use it purely for self-promotion, others to connect with their peers, others to tap breaking news long before mainstream media covers it, and then there’s the subset of users that like to build or hack devices to use its API. Read on to meet six devices (of varying usefulness) that use Twitter to communicate with their human overlords.

The following devices are listed in the story:

  • Tweet-a-Watt:  The Kill-a-Watt mod that broadcasts your power consumption.
  • Botanicalls:  Plant water sensor that tells you when your plant needs a drink.
  • Laundryroom:  A laundry room at Olin College that tells you how many washers/dryers are free.
  • TwiVo:  A TiVo that tells you when it’s finished recording.
  • A washing machine that Tweets you when it’s finished.
  • A robot that makes and delivers popcorn, that takes orders via Twitter.

Read the full story here…

Let us know what amazing devices you’ve interfaced with Twitter or any other Web service.