Tag Archives: web design

Web Design Cover By James Girardi

Books

Books and eBooks Reviews

How to Plan Out Your Web Design
by James Girardi

Web Design Cover By James GirardiIf you were every interested in creating a website but didn’t know how or where to start, then this book is the place to begin.  The book discusses the reasons why every business, whether an individual, small business or large needs to have a website.

The book goes into detail the methods of developing the plan for your website using real examples.  Also discussed are ideas for building content, how to use images and pictures, color schemes and if you should choose to blog or not to blog.  Concepts go into more details as Keywords and SEO are explained and ways to use them to help get your website ranked.

Purchase your copy of, “How to Plan Out Your Web Design” for only $0.99 (digital copy)

Web Design Promo

 

SEO – What Are The Meta Tags ‘NOODP’ and ‘NOYDR’ Used For

In doing some website research and SEO research, I came across a couple of sites that have the following <meta> in their source code:

<meta name=”robots” content=”NOODP, NOYDIR” />

In a recent article, I wrote about how to set up your meta data for your site but I didn’t discuss the ‘robot’ meta tags.  Basically this <meta> tag tells the “internet robots” what to do with your site, like FOLLOW, NOINDEX, INDEX, NOFOLLOW.

These tags go in-between your <head> & </head> tags.

So what are NOODP & NOYDIR ? Continue reading

transparency

CSS Opacity and Transparency

The opacity property is how transparent an object is over another object on a web page.  The default value of the opacity property is 1 and the range is from 0 (completely transparent) to 1 (no transparency at all).  Let’s create a nice visual effect using the CSS opacity property. Continue reading

css tip text box transparency

CSS Opacity Property – Text Box

In another article, we discussed how we can use the CSS Opacity Property to change the transparency of an image.  But let’s say we want to keep the image at its normal opacity (100%) but we want to add text over the image.  Depending on the background of the image and the color of the text, it may make it hard to read the text. Continue reading

quick

Create A WordPress Gallery

Overview

If a picture is worth a thousand words, would 10 pictures be worth ten-thousand words? Creating a WordPress gallery is very simple to do.   But before you start your first gallery, you need to upload images to your Media Library.

Step 1 – Place Your Cursor To Where You Want The Gallery In Your Post

You can put a gallery anywhere you would like on a post or a page.  Put your cursor at the area in the post/page that you would like the gallery.  Best if you have the cursor on a new line so that the gallery is not next to a block of text.

gallery1

Step 2 – Click the “Add Media”

After you placed the cursor at the spot that you want the gallery, click the “Add Media” button just above the tool bar for the post/page.

gallery2

Step 3 – Add/Select Images For Your Gallery

At this point you can upload images to your gallery or you can select existing images.  TIP:  You can add images and upload images to your gallery at the same time by switching back and forth between the Upload Files and Media Library tabs.

gallery3

Step 4 – Create Gallery

When you are done selecting or uploading the images, click “Create Gallery” from the left menu bar.  Then clicking the blue “Create a new gallery” button in the lower right-hand corner of the screen.

 

Step 5 – Edit Your Creation

Now you can edit the images that you selected.  You can RE-ARRANGE, REVERSE, ADD DESCRIPTIONS or REMOVE/ADD images.  If you are using the Jet Pack plugin, you can change how the gallery is displayed.  When you are done, simply click the blue “Insert gallery” button in the lower right-hand corner of the screen.

gallery4

Step 6 – View/Save/Continue

After the gallery is inserted, you can continue writing, publish, save or edit the gallery.  To edit the gallery, just click your mouse anywhere over the gallery in edit mode and the two boxes will appear in the upper left-hand corner of the screen.

The pencil shape will bring you back into the gallery edit whereas the “x” will delete the gallery from your post/page.

gallery5

Your gallery is complete.

Happy Writing,

Jim

breakBank

Working With A Web Designer

Like designing a new kitchen or bath, you want someone who understands your needs and goals. You may not want a trendy kitchen in an old Victorian home. Or maybe having two sinks in the bath is an essential. Building a website is no different. You want someone who will work with you and listen to your needs.

Waterviews Book

customer3In working with John Cardone on his website for his book, Waterviews. The look and feel of the website needed to match the look and feel of his book. Using the same color schemes and font styles help us achieve that goal.  As the brainstorming continued, we needed to add more pages to his site to accomplish the goal of having a list of his upcoming events.

John is in the process of writing a second book on Waterviews and we have already started to discuss website modifications to join both books into one site.  This site was written in HTML, CSS.

Smile Cube Photo Booth

customer4A great addition to any party, a photo booth is a fun idea to get people interacting at your party.  With this site, Paul (owner of Smile Cube) needed everything for this brand new business.  Together we went through many logo transformations before getting to the final project.

As for the site, Paul wanted an upbeat-kind-of-site that catches the attention of his visitors.  The site informs the visitors of its options as well let’s the visitors know what to expect from Smile Cube Photo Booth.  Linking to social media sites was important because pictures taken at events need to be online for previous guests to be able to find them.

Your Next Project

flyerThese were only a couple of examples of sites completed by myself.  When searching for your next web designer, make sure it is someone that will listen to your goals.  And pricing on a website shouldn’t break the bank.  I work with small businesses knowing that small businesses have tight budgets.  I offer payment plans and I do not “nickel and dime” over hours.

Special Offer

$100 off any web designs with the purchase of a hosting plan.  It is like getting a free hosting plan AND domain from HostingDomainsWeb.com and still have money left over for your web design.  Learn more about my design process.

Web Services

A website is the most important component to a company’s marketing strategy. There’s no better first impression than a clean and professional website for a company. As web technology has progressed over the years, a company needs to keep up with the advancements of social media, blogs and RSS feeds to stay ahead of their competitors.

THE CUTTING EDGE DIFFERENT

James Girardi Web Design Cutting Edge DifferenceGet the benefit of an innovative and creative designer dedicated to making your business a step ahead of the competitors by having a custom-tailored website. Graphics are specifically designed to your site. I don not use clip art from image websites. I design the art for your site, using your color scheme and ideas. Learn more about my graphic design process.

CHOOSING THE RIGHT DESIGNER

Make Right Choice James Girardi Web DesignLike a contractor you trust with your home, having a web designer you can trust in makes all the difference. I pride myself in understanding your business goals so that together we can develop a plan of attack in getting you more customers for your business. I care about my clients and their needs. I don’t take on multiple projects that interfere with completing your site on the timeline that we worked out together. Getting a professional website designed has never been easier. Learn more about my web design services.

ONE STOP SHOP FOR ALL YOUR INTERNET NEEDS

Shopping Cart James Girardi Web DesignYou have a one stop shop for all your internet needs. My partnership with a major hosting company allows me to get you a domain, hosting account, SSL certificates and more at a very competitive price. This means you don not have to have the burdensome to get a domain name set up. I will handle it all for you, but that does not mean you lose the ownership of the domain. Everything is in your name and your ownership.

RECENT WORK

 

WEBSITE MAINTENANCE

Another service offered is website maintenance. Once your site is complete, the growing of your site is not over. From simple text updates to adding additional pages, I will be there for you to continue your marketing goals.

Maintenance services include:

Site Content Updates • Landing Page Designs • SEO Modifications • Company Email Plans

Ready to get started? Call me, email me or find me on social media and let’s chat about your website goals.

meta

How To Create Meta Tags For My Website

What Are Meta Tags?

Meta tags are elements of a web page that help search engines to categorize your web site correctly.  When you visit a web page, you don’t see the meta tags, however they are there. To see a page’s meta tags, just right click on it and select “view page source”.

 TIP: Visit your competitors’ websites and check out what keywords and descriptions they are using.  Let’s say you are a barbershop in Anytown, USA and your keywords include “Anytown”.  Your competitor in the next town over which may be “Nexttown, USA” might be using the same keyword “Anytown” to acquire anyone who is looking for a barber in your town.

The most common tags are listed below in “Basic Layout For Your Meta Tags”.

 Different Types of Meta Tags

metatag1Here is a great article that goes into depth about Meta Tags and when to use them.  Some experts are stating that some meta tags aren’t as important as they were in the past.  Search engines like Google,

Bing, etc. are constantly changing what is important to page ranking.

Searchenginewatch.com Article

 

Basic Layout For Your Meta Tags

You can copy the code below and keep it in a Word Pad file for future reference.

<meta http-equiv=”Content-Type” content=“text/html; charset=utf-8” >
<title></title>
<meta name=”viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
<meta name=”keywords” content=“” >
<meta name=”description” content=“”>
<!–FACEBOOK–>
<meta property=”og:title” content=“” >
<meta property=”og:site_name” content=“”>
<meta property=”og:url” content=“” >
<meta property=”og:description” content=“” >
<meta property=”og:image” content=“” >
<meta property=”og:type” content=“website” >
<meta property=”og:locale” content=“” >
<!–TWITTER–>
<meta property=”twitter:card” content=“summary” >
<meta property=”twitter:title” content=“” >
<meta property=”twitter:description” content=“” >
<meta property=”twitter:creator” content=“@” >
<meta property=”twitter:url” content=“” >
<meta property=”twitter:image” content=“” >
<!–GOOGLE+–>
<link rel=”author” href=””>

metatag2

Delete and of the tags that you aren’t using.  Note that you can use the same information in multiple spots, example the URL for Facebook and for Twitter are the same.
If all this info is a bit complicated or you have someone manage your site, make sure you have meta tags in your site and set up best.
Interested in having your site checked out, email me.

css2

First-Child CSS Tip To Fix Margins

I have done many websites in the past and had to set specific attributes for multiple items that were really the same item but because of its positioning, I couldn’t use all the same values.  What do I mean with this?

Let’s say you have a column with 4 blocks in it.  We are gonna say it is the side bar and you have the following items in it:  Specials, Product of the Week, Upcoming Events and Sponsored Ads.  I am referencing a site I did for VIP Billiards.

first-child1

Now in that side bar, you want spacing between each section.  So in this case, I used my <h3> tag to create the spacing and I set the value to 1.5em.  But when I do that, I feel like my spacing at the top of the column is too large.  How do we fix that in a quick manner without having to have a new class for the <h3> tag?

first-child2

Simple, we add a “first-child” to the <h3> tag.  We re-adjust the {margin-top} to 1.0em; and then add the following code:

h3:first-child {

margin-top: .5em

}

first-child4

By doing this, we give the first <h4> tag in that column only a .5em margin at the top and give the spacing for the rest a 1.0em margin.

Now we have nice spacing between the navigation bar and the column as well between each section.  And because we added a “first-child” for the <h3>, it works for any section that has an <h3> tag.

first-child3

Using a first-child can fix other issues as well.  Maybe you want to set the spacing between a few images but you don’t want a margin to the left on the first image.  Use a first-child for your images.

Now if we can use a first-child, then that should mean we can use a “last-child” as well.  Test it out, let me know how it works for you.

Happy coding!!

-Jim

PS:  10/25/2014 – Since writing this and making minor adjustments, I re-adjusted my <h3> by adding a padding-top: 6px; and a padding-bottom: 6px; and with the h3:first-child {padding-top:0px;}.  This helped with page layout a little better than how it is written above. CSS is so versatile that there are many ways to “skin a cat”.