Posts Tagged ‘Web design Philadelphia’

21 Reasons: What Makes A Good Strong Design And Quality Development When Building A Website From Scratch?

Monday, November 4th, 2013

You have to start with a wireframe that allows you to organize and control content and placement a lot better, and in turn that helps the end user flow more freely and get a better experience.

Also, designing the right graphics and images will help you get better results when it comes to visual aspect and time spent on that page.

Think about what media you want to play inside of your website and where to place that media for the best results with end user.

Think about having drop down menus if you have multiple categories in your industry and how to list them properly.

Have external css, no inline that will give you more control as well for your stylization and will allow you to use cascading styles to have all pages follow the master page for faster implementation and development.

Have a very detailed “About” page that goes over your history, goals, and what makes you stand out from the rest of your competitors.

Build the website with strong SEO in mind and set all Meta and internal links to be crawled more easily and rank higher.

Watch using to many plug-ins, as they create security holes and can prolong loading time.

Make sure all text is properly displayed and controlled from a well-read stand point.

Also make sure H1 and all tags are described right and reflect keywords, but watch the character count.

Get social traction into your website by means of clickable links, a “like” button, etc.

Make sure there is a site map and xml/kml file for your website. I personally like LXR Marketplace for XML Sitemap generation.

Have the proper amount of pages and have navigation to and from each page

Link your Google plus page to your website and your website to your Google plus page for Authorship credit.

Make sure your client, if any, is staying in contact on the design and overall concept from the beginning.

Optimize and alt tag all pictures.

Try to incorporate a contact form, Goggle maps, and strong linking factors on your pages.

Stay away from flash (I recommend Java), Google is getting more involved with Java Script and how it’s used.

Try to build content that people will want to link to or from so you don’t have to do too many link submissions.

Have a client testimonial page.

Maintain and keep up to date with the inner workings of your website keep it managed always!

Thank you,

Raymond McCloud




Web-Hosted Fonts Can Transform Your Site

Monday, October 28th, 2013

Just like the right accessories can make an outfit go from “so-so” to “ow-ow!” — web-hosted fonts can be the perfect finishing touches to really transform a website into a stunning piece of pixel-based art.

Gone are the days when we were limited to Verdana, Tahoma and Times-New Roman. There are a number of font hosting solutions out there so feel free to experiment and see which method you like best. I personally like the variety and ease of use of Google Fonts. It’s free, loads fast on your site, and the selection is ever-expanding with plenty of options to suit any type of website.

Since I’ve been using web-hosted fonts more and more lately, I thought I’d write about a few best practices I came across:

- Be sure to preview your fonts in all browsers. It should go without saying that you’re testing your website in IE, Chrome, Safari and Firefox as you build them anyway, but you might way to preview your web-hosted fonts before integrating them in the site, as some fonts will render differently in different browsers.

- Keep your body text clean and simple. It doesn’t have to be Arial or Times-New Roman, but choose a classic font that is easy to read at a small size.

- Script-y fonts should be limited to headers and “callout” text. Playful fonts absolutely have a place in web design and it’s great to be able to add typographic flourishes to help jazz a site up a bit. But keep in mind, decorative and script fonts are usually hard to read at small sizes. Limit them to headers or other short bursts of text where you can use them at a larger size.

- Don’t go overboard. I’d recommend sticking to no more than 3 different fonts per website. More than that can not only be confusing to the viewer, but will slow down page load time. Choose just a few nice fonts to use consistently throughout the site and your whole site will be more cohesive and easy to read from the viewer’s standpoint.

It’s about time web design afforded us the same opportunities to experiment and have fun with typography. Don’t be afraid to play around and explore the options that are out there! The sky is the limit with web-hosted fonts!


Halloween – the Time for Scary Costumes but not for Scary Websites

Tuesday, October 15th, 2013

Even the most successful SEO strategy will only get your business so far. Sure, can get your website traffic up through SEO and PPC (Pay Per Click) but if your bounce rate is still high, it most likely means your website isn’t doing its job in keeping the visitors there.

“Bounce rate” is the percentage of users who hit the landing page of a website and leave without visiting any other pages. So, even if your SEO and PPC are bringing users to your website in zombie-like hordes, you won’t be seeing the conversions you expect if they are immediately leaving.

Some reasons for high bounce rate include the following:

- Bad website design. If your website is outdated looking or plain ugly, overloaded with colors or flash animations, these things can all turn the user off and make them run screaming from your site before even reading the first paragraph on the homepage. Good website design is clean and inviting, and helps the user easily find the pieces of information that are important to them.

- Bad content. Make sure your content provides value to your user and flows from page to page throughout the site. If you are using PPC, it’s vital that the content on the landing page has useful and engaging information about what the client was looking for. A few sentences of irrelevant, outdated, or poorly written content can make your users exit the site before biting into the meat of what your company has to offer.

- Confusing navigation. Your website’s navigation should be easy to find and easy to use. The hierarchy of pages should make sense, should take the users through the site in a logical order, and should allow them to easily find what they’re looking for.

In summary, a well-designed website should work in harmony with your SEO and PPC strategy to get your traffic up and get the conversions flowing in, while a bad website will chase potential customers away faster than a chainsaw-wielding maniac.


Fall Cleaning – For Your Website!

Wednesday, September 18th, 2013

It’s not officially fall until this Sunday, but it certainly feels like it. Cold weather, hoodies, pumpkin-flavored everything… definitely looks like autumn to me!

For many, the changing of the seasons is a good reminder to do some spring (or fall!) cleaning at home. Pull out some seasonal decorations, pack away your sun dresses to make room for sweaters, dust off those bookshelves you’ve forgotten about for a couple months.

It’s also a good time to do some fall cleaning on your website. With day-to-day operations keeping them busy, many business owners tend to forget about their website. This is understandable. But you don’t want to neglect it for too long. Every couple months it’s a nice idea to take a look through your site. Is your content all up-to-date? Do you have any new specials or promotions to highlight? New employees or email addresses you need to add? Have you posted on your blog in the past few weeks?

Not only is it important to have the correct information on your site, adding fresh and new content to your site gives you an SEO boost. Search engines like websites that are constantly being updated.

So, set aside a half hour this week, grab a pumpkin-spice latte, and sit down and go through your site. It’s important that you do – and trust me, it’s much more fun than dusting!

Responsive vs. Mobile Sites – the Great Debate

Tuesday, September 10th, 2013

If you’re into web design at all, you’ve most likely heard a lot of talk lately about “Responsive Design.” Let’s start by addressing what exactly Responsive Design is. In a Responsive website, the website adjusts according to which device it’s being viewed on. This means the same website will appear differently on a PC screen, a tablet (landscape or portrait), or a mobile device.

A mobile site, in contrast, is a separate website that’s created specifically for mobile devices. Mobile websites live on their own URL (usually or and the user is automatically redirected to the mobile version when they view the site on a small device (typically under 600px wide).

Now that you understand the difference between the two, which one is better?

In terms of SEO, Responsive Design gets the win. For one thing, Google prefers having a single URL (in a Responsive Site, the URL doesn’t change when you’re viewing it on a mobile device). In a recent blog post about Responsive Design, Google states that “maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses…”

Furthermore, “link juice” is lost on mobile sites because links from mobile browsers are not counted as search link equity toward your main site.

So we understand that for SEO purposes, Responsive sites are better. What about for the end user’s experience?

Well, as I build up my portfolio of Responsive websites, I’m learning more and more tricks to make the site beautiful and accessible to mobile users. It’s simple to switch the navigation to become easy-to-click buttons, scale images down to fit the screen, and add or hide elements as they are needed or not. All of these things combine to create beautiful, user-friendly mobile websites.

And what about for the client or web master? Maintaining a Responsive site is much easier than maintaining a separate mobile site. When information needs to be updated or changed, you don’t need to worry about changing it in two places (the desktop AND mobile site). In our complicated world, keeping things as simple as possible is the way to go!

So when you’re redesigning your website, you’ll definitely want to keep these things in mind. Ask your web developer if they build Responsive sites. According to Google, it’s definitely the direction that web design is heading in, so you might as well jump in and embrace it now!

How To Make A Simple Wrapper In Dreamweaver Without Knowing Any Code

Friday, June 21st, 2013

Today I am writing this Blog, I have to write about something techy, so I figured I would start with designing websites. There always seems to be a bit of confusion when it comes to the ins and outs of page structure and user friendly content.

Also, many people want to build comprehensive fully developed websites with all the goodies and add ins but are really stuck on what and how to go about it.

Well, I know first-hand that understanding the development stages and the under laying structures and principles of building a really nice website are not always as they seem.

Tons of code to understand, the knowledge of knowing where to find the plug-ins, platforms etc.

Well, I have some really simple answers for the beginner designer who wants to put up a nice website with some goodies and quality content.

Download Photoshop and Dreamweaver that’s all you need for now to get started. also or find your own links for download.

Now open both programs.  Once there, open start with Dreamweaver, Click html page, then save it into a root folder that you make on your desktop. Call it Root folder, everything gets saved in here.

Name your html page index.html—this will be your home page. In design view go to insert Ap-div and click the feature you will see a div tag pop into place it’s a blue square.  Click on the object then click (ctrl+f3) to bring up the properties panel you will see (x) , (y) , (w) , (h) , well in the (w) make it (1024px) hit enter do the same for the (h) but make it (768px) that should make your blue box or div tag (1024px by 768px). Now go to the css panel and click add a property in dropdown. Click margin left  put (-512) in this space then go to (ctrl+f3) again to bring up property panel, and in the (L) square  put 50% and hit enter. Now it’s centered. That’s your wrapper and now you can build inside of it.

Go to insert and hit Ap-div again as you will see it now places a div tag inside that wrapper at (0px 0px). This is perfect as you can position with the property panel or go into the css that will be inline in this case and edit there.  Always resave all under file save all.

Basically, now you can build a header and other elements and place them into divs that will align very easily. This kinda gets rid of the confusion of aligning things in Dreamweaver, however too many divs can start interacting with each other and will cause problems and thus you need to create a stacking order later on.

I do not recommend this way for long term, this is only to get to know your way around Dreamweaver and see how things are working in order to understand and develop a page without knowing a ton of code.  However, on the subject of code I would get familiar with basic html css and java for starters. For more info on building out structures, elements and components email me if you like at

It’s all Greek to me: What is this Lorem Ipsum stuff anyway?

Monday, May 13th, 2013

If you’ve ever worked with a graphic designer on a website or print project, there’s a good chance you’ve gotten a mock up back with what appears to be Greek words. It usually looks something like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, elit sit amet mattis egestas, libero eros scelerisque nisl, vel laoreet sapien dolor sed elit. Cras vel enim sem, eget congue leo. Maecenas turpis libero, bibendum non elementum et, venenatis sit amet lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

You might have first thought your designer was going crazy, or that they were possessed and had started speaking in tongues, but really what you saw was a design tool called Lorem Ipsum. Lorem Ipsum is simply dummy copy used as filler when no actual content is available.

So why do we use it? Say I’m building you a website and you’re still writing the copy for the homepage so I have nothing to work with yet. I want to show you what it will look like once the text is in there. Sure, I could randomly hit letters on my keyboard to fill the space, or repeat “Content to come, content to come, content to come, content to come…” but neither would do a very good job representing what actual content –with full sentences, periods and paragraphs—would look like.

That’s where Lorem Ipsum comes into play. Lorem Ipsum dates back to the year 45 BC, and was originally pulled from a classic piece of Latin literature. Basically, Lorem Ipsum generators pull from a library of words, combining them with punctuation to best represent realistic sentence structures.

Typing “lorem ipsum generator” into Google will yield hundreds of results. The generator I always use is, which pulls from over 200 Latin words and lets you choose how many words or paragraphs to generate and whether or not you want to start with “Lorem ipsum…”.

But if you’re working with a client with a bit of a sense of humor, you could try some of these generators:

Lorizzle ipsum dolizzle brizzle amet, shit adipiscing elit. Nullam sapizzle velit, my shizz volutpizzle, sizzle doggy, dope vel, bizzle. Pellentesque eget tortizzle. Sed erizzle. Shizznit break it down dolor dapibizzle owned tempizzle fo shizzle. Own yo’ pellentesque ghetto bling bling yo. My shizz izzle tortor. Pellentesque eleifend black .

Flannel letterpress irure, gastropub occaecat fingerstache vero iphone photo booth tousled proident qui. Polaroid gentrify yr authentic aliqua culpa, stumptown literally ethnic plaid. Accusamus wolf small batch, vinyl portland nulla hashtag seitan gentrify. Hella tofu ethical, small batch officia banjo placeat pinterest nesciunt try-hard high life. Brunch est umami aute pinterest raw denim. Id blog forage, cray single-origin coffee labore dolor selvage accusamus quinoa biodiesel.

Hoppy acid rest tulip glass wort chiller wort chiller, berliner weisse, fermentation. bock draft (draught) caramel malt acid rest trappist. Brewing shelf life barley barleywine final gravity racking chocolate malt bacterial. alcohol; acid rest malt extract hop back black malt finishing hops; lauter tun. alcohol double bock/dopplebock priming copper dry hopping!

Bacon ipsum dolor sit amet venison filet mignon ham hock pork chop tongue, doner ham short ribs pig jerky ground round capicola bresaola andouille fatback. Brisket short loin beef ribs fatback hamburger pancetta strip steak ham hock. Fatback frankfurter andouille pastrami, ball tip meatloaf rump swine drumstick jerky pig shankle sirloin kielbasa.

I would quote Samual L. Ipsum (, but that’s not suitable for work. Anyway, now you know what all this gibberish text is about!

The Variations of PHP Code

Monday, April 15th, 2013

PHP code is probably the single most popular source used today.


It’s flexibility and scalability is second to none. It can be combined with virtually any other source to execute endless customizations. PHP is most effective when used with databases. The most common database software is MySQL. Which when used correctly PHP scripts can perform extremely difficult programming tasks. Most web frameworks are constructed with PHP.  Its library is endless. There is however, a drawback.

PHP can be coded in many different forms. As popular as the code is there is no “one specific” uniform standard. Any expert in this particular field can build their code completely different than any installation at any time. To date I’ve run into at least 4 different variations which most times leaves me scratching my head. Ultimately in the end all variations tend to conform to one degree or another on some level. It takes time to analyze and eventually understand how the different configurations have been implemented. It can be very time-consuming doing so. It’s always best to take notes to track back mainly because of the fact we’re always updating content. We always have to remember how the configuration was the last time around. The larger majority of sites built to encourage guest or membership involvement tend to be about 80 to 90% PHP based. It’s very easy to install, and administrate. When developed and implemented correctly this code can practically run itself. All it needs is a little attention on a regular basis and you can grow a thriving personal website, on line existence and company all in one.

3 Things To Consider When Building A Mobile Website

Tuesday, February 7th, 2012

Being one of’s resident code geeks, I owe it to myself and my reputation to keep abreast of trends in the Internet marketing game. One surprising statistic that was recently released is the growth in mobile search. Mobile search of course leads to mobile web browsing. While most websites look absolutely fine in a standard smart phone browser, it is absolutely to your benefit to also build and launch a mobile version of your website for the best end user experience.

What Are The Keys To A Good Mobile Website?

1. Easy and bold navigation. In a traditional website, horizontal navigation is the winning solution here, but that may not necessarily translate well in a mobile environment. Big buttons or bold bars are the way to go when it comes to a mobile website. Remember, you have about 3.5 inches diagonally to work with, so make it count!

2. Simple color scheme. Following the same rule of thumb with the size of the media, you do not want to overwhelm the end user. Keep the graphics simple and eye catching.

3. Calls to action, my long standing favorite. As you may recall from my last post, Design, Implement, ACTION!, I touched on the importance of making the end user react to your site the way you want them to. The same principles apply here…keep the phone number large (and clickable!), make sure your buttons are large (relative to screen size of course) and evenly spaced, and be direct!

Remember, this is a mobile world and people are moving faster than their 4G cell phones can handle. You want to make sure you streamline your information here, and deliver your sales message home and as quickly and effectively as possible.


Design, Implement, ACTION!

Friday, January 20th, 2012

My favorite part of building a website is hearing the results from that website.

“I get so many more leads through my website, I get so many more calls from my website…” The compliments go on.

The secret of it all is that it is no accident that the new site is working so well! The Internet is so cluttered with websites that it is my job to design websites that are not just interactive and good looking, but fully functioning lead machines!

The web design team at knows that you get more calls when your phone number is placed in a specific location on the page, and that you get more e-mails when the contact form is easy to use and on every page. We know that someone will read more pages and potentially become customers when buttons are designed and placed the right way.

So, how do we know how to make your website a bonafied lean, mean, lead generating machine?

  1. Create a button that is enticing to click. The web is littered with buttons with a generic “Click Here” on it. People know how to ignore things they see all the time
  2. Place these buttons “Above the fold” so that it will be amongst the first thing the end user sees.
  3. Make sure the colors contrast from the area they are in. If the color scheme of your call to action blends in with the rest of the site, they do not become enticing enough to click.
  4. Offer an incentive! The oldest trick in marketing is what we are talking about here. Make the end user want to click on it by offering something. Whether it is a free consultation or an ebook, you have to make the person want to submit their information.
  5. Get that phone number up top… AND HUGE!
  6. Want to get e-mails? Put a simple form in an easy-to-access spot on the page.