Menu

Web Design

Five Logo File Types Every Business Should Keep on File

by Leave a Comment

Business owners often advertise their brand in multiple facets and in the media space. This makes it crucial for them to understand the different logo file types and the way they are utilized in the media space they are implemented into. In this blog, I will be covering the five important logo file types all business owners should have at their disposal.

Vector Based File

Vector graphics are considered to be the most flexible image format for saving logo files. Vector based files allow you to easily add spot colors (Pantone colors), gradients, and textures to the artwork. However, what they are mostly known for is having the ability to be reduced or increased in size without losing any quality. Common file extensions associated with vector files are .AI, .SVG, .EPS, and .DRW. If there is one file type I would recommend a business owner use to preserve their logo, vector files would be it.

vector-export

EPS (Encapsulated PostScript) File

​Another versatile and effective file type for preserving logos is an .EPS file. An .EPS file can contain any combination of text, graphics and images and is often used when exchanging logo vector graphics that are only to be read but not edited by the recipient. Files sent to a professional printer, for example, are usually sent in this format. Unlike vector files, .EPS files have very little editability when it comes to changing colors, adding gradients, or simply changing text. However, they are similar to vector files because they are programmed in PostScript (PS), which is the language used to create vector based graphics, allowing them flexibility in the scaling department. An .EPS file is made up of two types of data; there is the preview data that allows the file to be viewed in most page layout programs, and it also contains high resolution data used by high quality printing devices.

eps-export

JPEG (Joint Photographic Experts Group) File

JPEG is a compressed image file format (or lossy compression format). JPEG files allow you to compress an image while trying to preserve as much of its’ quality as possible and are not limited to the amount of color it contains. Although some image quality is lost during compression, JPEG images can still appear to be colorful and high in resolution. I would make a guess and say that over 80% of the images seen on the World Wide Web are JPEG files in nature. If you have to showcase your logo on the web in an advertisement, for example, more than likely this would be your image file of choice. The big negative on JPEG images is that they do not preserve transparency data unlike all the other files mentioned in this blog.

jpeg-export

PNG (Portable Network Graphics) File

​Just like JPEG files, a PNG file is a raster (or bitmap) image file format which supports lossless data compression. It also supports millions of colors similar to it’s counterpart,  however it does not support non-RGB color spaces such as CMYK which doesn’t make it ideal for high quality printing if any printing at all. It’s a  clear advantage over JPEG files is the ability to preserve transparency data which is how logos on most websites are implemented.

png-export

GIF

Last, we have the GIF file. A GIF image by nature is an 8-bit color file, which means they are limited to a palette of 256 colors. Having this limited color palette makes GIF files ideal for small images with solid areas of color. GIF files are also an effective means of saving grayscale images since they are based on an 8-bit color palette. With its limited color palette, GIFS offers the smallest image compression available, but that comes with the sacrifice of poor image quality. GIF image files are currently being replaced by PNG image files around the web and most digital spaces since they offer higher resolution images.

gif export

Conclusion

As a business owner, it is important that you prepare your logo in a variety of image file types. The ones I’ve listed are just a few, but these file types are the ones I feel are the most important. Having these files at your disposal gives you the flexibility to place your logo on any type of print or digital advertising campaigns. Having them readily available can also speed up your creative or design process, as well as, give your designer a peace of mind not having to recreate or redesign any logo assets. If you have any other file type in mind you would like to mention, please leave it in the comments below.

Website issues, will you be ready?

by Leave a Comment

Getting your plan together

You are browsing your site and jotting down changes that you would like to make when all of a sudden your site goes blank. Its not your internet. It only happens when you go to your site. You know something went wrong but you are not sure what your next steps will be.

In that type of scenario you need to know what to do and how to go about it. Most importantly you need to act fast. The longer you have website issues like that you could be losing hundreds of potential customers. It doesn’t take a lot of technical knowledge to fix the normal issues, but sometimes it helps or is required. Lets go through some of the most common website issues and how those are normally fixed. Keep in mind this might not work for everyone.

1. Database Connection Error

“Error Establishing a database connection”

Have you ever gotten this while on your site? If your site has been working perfectly for over 48 hours and you did not edit the database connection file, it could be that the server just made an oops and is waiting a few minutes and refreshing fixes it.

If you were messing with the database connection file and it was working and now it is not. Log into your hosting account to retrieve your database connection information to make sure it is correct. To keep downtime to a minimum when editing files, keeping a backup to replace it if something goes wrong can save a lot of headaches and downtime.

2. The Infamous 404 Error

If you browse the internet then you are most likely familiar with the 404 error. It means that the web page you’re looking for can’t be found. If you own a website, the last thing you want is your site to have a user get that error. To help find them all, start using Google Webmaster Tools. All you need to do is  prove you own the site you want info on. Then you will have access to tons of tools including a list of all the 404 error links that google has found.

To fix a broken link, redirect the link to an actual page on your site. The broken link might  come from your site itself. Sometimes it’s from an external source, or someone might have bookmarked it, or they might of misspelled it while typing. Sometimes search engines also find weird links to pages that don’t exist. They could be pages that did exist but don’t anymore. The only way to fix them is to redirect them. Sometimes you can find the source of the bad link and delete it. Other times you just won’t be able to find it. In either case, it would be a good practice to redirect it. Just in case.

404 Error
One example of a 404 error page

3. Internal Server Error

If you have a website then you most likely have at least heard of a 500 error, otherwise known as Internal Server Error. It has nothing to do with what you did. Everyone makes mistakes and computers are no exception. The website issue is on the server your site is hosted with. Most times they go away from refreshing or waiting a few minutes. Other times you need to call your hosting provider.

Internal Server Error
What usually shows up for an Internal Server Error

4. White Screen of Death

If you have ever edited a file on your server labeled “.htaccess” then you probably know how easy it is to mess up your site with it. In normal coding if you mess up, something just looks a little off. Editing inside this file, if you mess up then your site goes completely blank. No website issue from the server or PHP error, it’s just a white page.

Whenever you plan to make a change to the file, it is best practices to make a working copy. That way if you mess up and are not sure what you did wrong, you simply load the working version and your site’s back up again. That way your site will be down for as long as it takes you to notice its down and to upload the working copy.

Got some questions about a website issue? Ask away in the comments below!

Five Free Tools Every Web Designer Should Have

by Leave a Comment

As a Web Designer, I am always looking for ways to save time and money. One of the best ways to accomplish this is by utilizing some of the free tools offered online. It is best to test these tools to make sure you’re finding exactly what you are looking for. Most of these tools were created by other Web Designers or Developers and for the most part should work fairly well. The more tools you can add to your design palette, the more time and money you can save.

Here are five of my favorite tools you can find online free of charge, to get your web design palette started:

1. Color Pickers

There are many free color pickers available on the web, but my favorite one to use is ColorZilla. With over 5 million downloads, it is considered to be one of the most popular browser extensions on the web; finally, this extension has been made available for Chrome. Some of my favorite features Colorzilla provides are an eyedropper, a page analyzer, a color history tab, a CSS generator, and a palette viewer with 7 pre-installed palettes. In addition to the features I’ve mentioned you may find other useful ones here that can help simplify your everyday design tasks.

Screen shot of colorzilla
Screen shot of colorzilla

2. Font Identifiers

Another one of my favorites tools is the “What Font” extension. This extension gives you the ability to identify any font used within the the structure of a web site. This is probably the area I struggle most with clients. It is very seldom that a client is able to provide you with this information without going through hoops. “What Font” extension will help you to elimination that waiting period. All font identifiers for the most part offers the same features and benefits. For example, with “What Font you are able to reveal the font family (which even providing a visual), font size, line height, and hex color codes which you can then implement into any design program for use.

Screenshot of what font
Screenshot of what font

3. On-Line/Digital Rulers

Changing your screen resolution can make things appear larger or smaller according to the setting chosen. The smaller the resolution specs are the larger the elements appear on the page. This doesn’t mean that the actual size of elements on the page physically changed. In fact, more often than not they stay the same. Using an online ruler such as “Page Ruler” would prove this fact. Anytime you are in need of on-screen measurements these digital rulers will absolutely come in handy. There are two unique features offered in the Page Ruler extension that other may not offer. First, there is the “Element Mode”, which allows you to outline elements on the page as you mouse over them (must be enabled first). Second, Page Ruler allows you to navigate through parents, children and sibling elements of any measured element.

Screenshot of page-ruler
Screenshot of page-ruler

4. Screen Capture Software

Screen capture software is probably the tool that I utilize the most on a daily basis. I use it for several everyday task such as proofing layout ideas to clients, posting approvals or changes to coworkers about specific tasks, or even using the screen capture to help created unique graphics or images to use in other projects. My screen capture software of choice is “Gadwin Printscreen”. I’ve been using this tool for quite some time now and highly recommend it’s usage. Some of Gadwin Printscreen’s unique features include the ability to export to 5 different file types, send captured images via email or directly to a printer source, as well as choosing a default output size for the captured image. It really comes in handy when creating posters of web pages we previously design to hang on our office walls. These posted are 18” x 24” in size so that should give you a pretty good idea the quality of the outputted files.

Screenshot of gadwin printscreen
Screenshot of gadwin printscreen

5. Web Browsers

The most important tool utilized by a web designer would more than likely be the considered the web browser. Today, there are numerous web browsers available. Internet Explorer, Firefox, and Chrome are the browsers most commonly used by many; however, there are several others out there such as Opera, Maxthon, Sea Monkey, and Midori. I personal have up to 8 different browsers installed on my PC at any given time. Since each web browser renders web pages differently, it is recommended to test your designs in as many browsers as possible. Most browsers also include web page inspectors which allows designers to view code and make edits to see how elements may behave on a page.

Screenshot of chrome browser
Screenshot of chrome browser

Since there are so many free tools out there on the web for Web Designers to take advantage of, it is important that you fully test or maximize their capabilities. The more a tool can accomplish the better. If there are any other tools you would like to mention or add to this post please leave your comments below.

Mark your Calendars: Google’s New Algorithm is Coming

by Leave a Comment

Google’s “Mobilegeddon” will begin on April 21st. This means that Google is no longer just recommending mobile friendly sites, they are requiring it. A study from Adobe found that 45% of businesses don’t have a mobile-optimized site or a mobile app. This means nearly half the businesses with an online presence will be penalized and see a significant drop in traffic. If your site is not mobile friendly, what are you waiting for?

Listed below are 5 mistakes to avoid while creating your mobile site in order for it to excel.

Not Considering Mobile First Design

According to Seoclarity, mobile search currently makes up about 30% of total traffic, regardless of the industry, and will only continue to grow. When designing your website, consider making your mobile site first. Create a simple, yet effective page with the user’s experience in mind. A study by MediaPost shows that 48% of mobile shoppers said that “ease of use” is their most important quality they look for in a mobile site. So just remember the old acronym K.I.S.S (Keep, it, simple, stupid).

After that, use your mobile site as a core basis of developing your desktop view. There is nothing you can put on a mobile site that can’t be loaded on a desktop. Progressively enhance your page with extra information and a more extensive navigation (as long as it’s relevant).

Not a Responsive Site

So you’re interested in mobile, but the thought of having two separate sites sounds difficult and time consuming. Well the good news is you don’t have to, nor should you. A responsive design, using the same site for both mobile and desktop, is the best option. In fact, Google actually recommends this approach. A responsive site is more efficient for Google to scan and review, making it more likely that your content will show in the search results. It also eliminates the possibility of being penalized for duplicate content as you most likely would for having two separate sites.

Consistent web design is also important because multiple device screening is becoming extremely prevalent. In fact, Google reports that 67% of online shoppers use multiple devices during their process. Users will look at products on mobile and revisit later on a desktop (or vice versa) hoping their history, preferences, and shopping cart is synced. The longer the conversion (sale or lead generation) process takes, the more likely the user will not complete it.

No Mobile Search Strategy

Since you’re using a responsive site, you can use the same search strategy, right? Not necessarily. Typically mobile users have different interest and intent than those on desktops. To develop theses strategies, use Google Webmaster’s tools and apply a mobile filter to your search query information. Compare the similarities and differences among mobile and desktop and begin to develop a list of keywords from that. Then do mobile competitive analysis using tools such as SEMrush, SearchMetrics, Sistrix or SimilarWeb, to develop a masters list. If your competitors do not have mobile sites, this is the perfect opportunity to get a leg up.

Not Assessing Mobile

Just because you have a mobile site does not mean it is mobile friendly. It is in an owners best interest to test the functionality of their site, among different devices and operating systems. Also they should check for any crawling issues or error reports (especially 404’s). Besides the technical aspect, ask yourself, “are SEO best practices still being followed?” Relevant and unique content, tags, titles, meta descriptions, site speed, etc should all be accounted for.

Evaluate the performance of your mobile page. This will show you the intent of these users. Which pages are receiving the most visits, have the longest view duration, and have the highest conversions? Make sure these pages are easy to get to by placing them in the navigation bar. Also asses which pages have a higher bounce rate on mobile. This could be an indicator of an error, or that the page is just not relevant to mobile users.

Still not sure where your stand? Google offers a free tool to test your sites mobile friendliness.

Not considering the impact on local search

According to Think With Google,  94% of Americans with smartphones search for local information on mobile. If that’s not enough to grab your attention, Google also polled mobile users searching for local businesses and discovered that half of them visited the business that day. This means your mobile strategy should be geared locally. To guarantee you are maximizing your reach and visibility, make sure your address, phone number, email, and any other business information is accurate and consistent. This information should not only be a resource, but provide as a simple and efficient channel for the consumer to further connect with your business as well. Consider adding a click-to-call button, syncing your location to Google maps, and making sure all email addresses are linked. This not only generates more traffic, but also will lead to more leads and sales.

Google’s “Mobilegeddon” on April 21st is the biggest update concerning mobile thus far,but it most likely is only the first of many more to come. If you are not mobile friendly by the time it is released, your visibility will certainly decrease and expect a substantial drop in traffic.

Do not wait for your site to be penalized, call DaBrian Marketing (610.743.5602) and create a mobile site now!

By: David McDowell

Five New Web Design Trends for 2015

by 1 Comment

Introduction

It seems that with every new year that comes around, old trends are phased out while new and improved ones emerge. Whether it is the color or style of clothing we wear, the type of car we drive, or even the everyday technology we use, trends tend to come and go at a rapid pace.

This holds true in the field of web design. Although some trends from 2014 may roll over to 2015, many of them will be phased out while new and improved trends will take over where they left off.

Here are some trends that will make a mark in 2015:

Responsive Design

There are several ways to implement a mobile web design solution as explained in my January blog Design Solutions for the Mobile Web. Also, in that blog it was stated that responsive design was the best solution to present day web design and development. Building secondary mobile sites (i.e. m.yourwebsitename.com) and depending on device detection is becoming a thing of the past. In 2015, mobile, tablet, and desktop layouts are being integrated seamlessly with the use of responsive design; resulting in a better user experience. This method also helps with optimizing your website by reducing subdomains and duplicate content.

Mobile Desktop Navigation

To navigate web pages on mobile devices, web designers and developers often implement mobile menu structures which function in several different ways. Mobile menus can collapse, expand, pop up or even flyout from the sides of the device’s screen. In 2015, these menu structures will be utilized in desktop layouts as well. Some websites like Adobe, MyEmma, and YouTube have already implemented this type of navigation. It’s only a matter of time before this become common practice.

Image and Video Backgrounds (Hero Images)

Most companies are content with letting words do the talking on their web pages. If this is your train of thought you are missing a big opportunity to grab your visitor’s attention. In 2015, designers and developers are now using hero images and video backgrounds instead of image sliders to accomplish this goal. These have been proven to be more effective than text heavy websites. Usually, accompanying Hero Images and video backgrounds are a couple lines of text and a call-to-action (CTA) button. Two very good examples of this would be the Tatamagouche Brewing Co. and Hammerhead websites.

Flat Design / Material Design

If you have been browsing the web lately (about for the past 2-3 years to be exact), you would have noticed a common trend in how websites are being designed. Everything appears to be flat, simple shapes with colors that pop. Presently, flat design, (as it is called), seems to be the technique of choice when creating websites (ex. https://www.getdonedone.com/). Google has even expanded on this concept by adding subtle gradients and slight movement or animation to create a new direction known as material design. A great example of material design would be Playground, Inc.’s website.  Flat design in general offers a clean, fast, and clutter-free layout that allows visitors to interact with content focused on gaining their attention without being distracted.

Micro Interactions (Forms, Popups)

Another web design trend that seems to be taking off as of late is the implementation of micro interactions. In web design micro interactions are modules – usually in the form of popups, that revolve around a single process. The process can be anything from subscribing to a blog or an email distribution, downloading content, watching a video clip, and so on. There are numerous ways to trigger mico interactions on a website; however, from personally viewing multiple websites over the past year or so, the most common way to trigger these interactions is by viewing a page for a certain amount of time; when that time elapses a micro interaction would usually appear.  This practice is very popular with blog posts. Ultimately, micro interactions should improve user engagement and increase customer loyalty if implemented correctly.

Conclusion

It is important to note that some of these new trends may not increase visits to your website; however, they may keep visitors engaged enough to positively impact conversion rates.

What other web design trends from 2014 will rollover or have an impact in 2015?

What other new trends do you expect to see in 2015 that are not listed above? You may add or list any other trends you foresee in the comments below!

Design Solutions for the Mobile Web

by Leave a Comment

The introduction of mobile devices, such as smart phones and tablets, has given people the ability to browse the web and complete additional task on the go. In January, 2014, mobile devices accounted for 55% of the internet usage in the United States with mobile apps making up 47% of the internet traffic while 8% came from mobile browsers. This was the first time in history mobile app usage eclipsed desktop usage (45%). This continual growth in mobile device usage also created several issues in the web design and web development workspace. Designers and developers now have to compensate for how web pages are being viewed on these devices as well as choose the best solution to implement.

This week, we’re going to walk you through the three most common design solutions for the mobile web.

Mobile Websites

The initial way of handling the mobile web experience was by creating an entirely separate website just for mobile. A good example of this is ESPN’s website. If you type http://espn.go.com/ into your browser window in a desktop setting you will be taken directly to their “desktop” version of their site. However, if you type that same URL into your smart phone or tablet’s browser you will notice that it will redirect you to their mobile version of the site and the URL will reflect m.espn.go.com/wireless/index instead.

This direction was effective, but it still created several issues. Mobile websites often have completely separate content and a bit less functionality in comparison to their desktop counterparts.

See other advantages and disadvantages of mobile websites here.

Websites designed for mobile devices.

Mobile Apps

Another solution for catering to the mobile web is developing a mobile app. This is not to be confused with a mobile website. Unlike mobile websites, mobile apps work independently of a browser and they don’t depend on an internet connection for general usage. Mobile apps are popular for linear processes, or processes that have a starting and an ending point. They also have the ability to utilize mobile device hardware such as credit card readers, cameras, and GPS locators.

A good example of this would be bank apps like Wells Fargo, or Bank of America that would allow you to scan your check with the use of your mobile phone or tablet which would then allow you to make a deposit into your bank account. You can browse and download other mobile apps from the Google Play Store from your mobile devices as well. The main disadvantage of developing a mobile app is that you have to create code for three platforms (namely Apple, Android, and Blackberry). The code is not universal and cannot be implemented across platforms.

See other advantages and disadvantages of mobile apps here.

Responsive Design

Responsive design is currently the best solution for mobile web development (See Google’s Mobile Guide). It is considered the best solution because it is one website, one URL, and one set of HTML code which allows the website’s content to be displayed on wide variety of mobile devices at multiple resolutions. Some good examples of responsive design are the Microsoft, Adobe, and BlueSky Interactive websites.

Responsive design can be a bit more costly to develop than your standard desktop website, but the low maintenance advantage of creating content for only one URL vs. multiple URLs saves time and money in the long run. In addition, having one URL is better suited for SEO related purposes.

Websites utilizing responsive design techniques.

Conclusion

Although all three solutions are proven ways of designing for the mobile web, in 2014 responsive design is the solution of choice. From our experience, responsive design is the simplest solution to the mobile design problem and has been the most effective for our web design projects.

Now that you are familiar with three design solutions, you are now able to make a better decision on which one is best for you and your company.

Which mobile design solution would you choose? Let us know in the comments below!