Scalable Vector Graphics (SVG) are an increasingly popular web design element, and with good reason. They’re extremely flexible, easy to update, and don’t lose quality when resized. On the other hand, many people don’t know what SVGs are or how to use them, making it difficult to work with designers in their projects. This article outlines the pros and cons of using SVG graphics on your website so you can decide whether they’re right for you.

What are SVG Files?

SVG (Scalable Vector Graphics) files are vector images, meaning they can be infinitely scaled without losing quality. This makes them especially useful for web designers who need to resize without losing sharpness or clarity. While designers can always use raster graphics like JPEGs, these types of images lose quality if scaled up. SVG files aren’t limited to working online either; you can also import them into any program that works with vector graphics, including Photoshop.

Advantages of Using SVG Images

1. Scalability

A scalable vector graphics (SVG) image is a scalable image format. It maintains the same crisp quality no matter the size of the display. This makes images look sharp and clean on any screen, regardless of pixel density.

2. Speed

The implementation of Scalable Vector Graphics (SVG) in web design is fast. Raster images like JPEGs and PNGs typically have very large file sizes, slowing down websites as a visitor’s browser tries to download all that information. SVGs, on the other hand, have much smaller file sizes and load much quicker.

3. Versatility

The browser compatibility of Scalable Vector Graphics is extremely good. With support for all modern browsers, it means your website can display clean scalable graphics to the vast majority of your potential audience, regardless of the device they’re using. SVGs also make it easy to add animation effects to websites without needing to use third-party plugins, as they’re able to be selected and manipulated using simple CSS.

4. Resolution Independence

Resolution independence is the quality of an image that can be scaled and zoomed to any size without losing sharpness or clarity. With their vector-based content, SVG images provide this advantage to businesses, allowing them to scale logos and original graphics to any size without loss of quality. Present your business’ assets as they were meant to be!

5. W3C Standards Support

When you use SVG images, you can ensure that your website complies with the standards set by the World Wide Web Consortium (W3C). These standards ensure that a site is compatible across multiple browsers and devices and is accessible to the widest audience possible.

6. DPI Independence

SVG images offer DPI independence. This makes it easy to create crisp graphics that can not only be displayed at any size on a screen, but also printed at any size. From business cards to highway billboards, a single graphic in SVG format can be used for any print implementation.

7. Interactivity

Interactivity is one of the advantages that makes web design unique compared to print design. Adding animation and interactivity to your website will help keep visitors engaged with your site and encourage them to stay longer on-site, and SVGs add to this potential significantly. Web designers can use CSS and JavaScript to animate SVGs with near limitless potential, allowing your website to deliver a one-of-a-kind user experience that visitors won’t easily forget.

Disadvantages of Using SVG Images

Because SVG is vector-based, it does not work well for images with lots of fine details and textures like photographs. SVG is best suited for logos, icons, and other “flat” graphics that use simpler colors and shapes. Also, while most modern browsers support SVG, older browsers may not work with them properly. This can cause a website to look broken or unexpected to people who are still using them.

Key Takeaways

Although SVGs are easier to create than ever before, they can lead to visual complications if you’re not careful. Therefore, when deciding whether or not SVGs are appropriate for your project, it is helpful to compare them with other types of graphics—namely PNGs and JPGs. You can refer to our infographic “Image File Types Decoded” to see how SVGs stack up against other file types and how to decide which one to use for your project.

While browsing the web, you may have noticed similar sets of icons used on all kinds of different sites—think of all those phone, envelope, and map marker icons that seem to be everywhere. If you’ve ever used a website building tool or content management system, you may already be familiar with using these icon sets like Font Awesome or Material Icons. These are examples of icon fonts, and they offer a way for web designers to leverage a browser’s text rendering capabilities to deliver any shape imaginable. With page load speed and cross-device compatibility being more important than ever before in today’s web landscape, icon fonts can be a valuable way to improve a website’s performance and user experience quickly and dramatically.

How does this technology work, and how can you use it to its maximum effect? We’ve put together an overview of how exactly icon fonts work, how to use them on a website and how to create your own with any shapes you can dream of. Exciting stuff!

What Are Icon Fonts?

Let’s start with the basics. All digital fonts work by assigning a letter, number or special character to a string of numbers called a Unicode. For example, in a typical font the letter “A” will be assigned to the Unicode “U+0041.” Every time you type or typeset the letter “A,” that code is used to identify which typographic character should be rendered.

Icon fonts work in the exact same way. Instead of assigning a typical text character to a given Unicode, a font designer can assign any shape they choose. This concept isn’t new, as dingbat or ornament fonts have been around since the beginning digital typography to allow typesetters to easily add glyphs and other symbols to page designs. They’ve gained an increased relevance in recent years, however, due to their versatility and performance in the world of modern web design.

What Advantages Do Icon Fonts Bring to Web Design?

Being fonts instead of raster images, icon fonts offer several advantages over <img /> elements when designing a website. For one, digital font files like .TTF or .OTF have a much smaller file size than the typical .JPG or .PNG image file, and this is especially true for web-optimized font files like .WOFF. This alone can go a long way towards increasing a page’s load speed, which plays a huge role in the user experience in today’s age of mobile device browsing.

On top of this smaller size, having every icon you need in a single font file can lower the number of HTTP requests the browser needs to make to the server when loading a web page. If you have a page with several icons in the form of image files, the browser will need to send separate requests to fetch each image individually, one at a time. Having all those images load in a single request will allow the page to load much faster and with much less demand on the server.

In addition to these speed improvements, icon fonts allow web designers to take advantage of all the CSS properties that can be used to style text. From color changes to text shadows, scaling, transitions and animations, icon fonts a are just as versatile as any other piece of text on a website. Last but not least, they can be rendered at any size without losing quality just like typography.

Can an Icon Font Replace Every Image on Your website?

Despite their exciting potential for CSS styling, fonts can only render flat shapes with a single color. They can’t take the place of photos and other complex images, and even icons with multiple flat colors are better served as PNG files. They also can’t be set as background images through CSS, and workarounds to achieve this effect may be more trouble than they’re worth.

If your site uses a large number of simple, flat shapes, however, then it’s the perfect candidate to take advantage of an icon font’s benefits.

How Are Icon Fonts Used in Web Design?

As mentioned before, many website builder apps and content management systems like WordPress make it easy to add icon fonts to a web project. Many WordPress themes come pre-loaded with icon sets and easy ways to implement them right out of the box, no HTML or CSS needed. Even without these tools, using an icon font is just like using any uploaded font on a web project. There’s a broad range of free icon fonts available for designers to download, and these fonts can be uploaded to a hosting server and implemented with the “@font-face” CSS rule like any other font. From there, the “font-family” property can be used to set any text content in the icon font.

CSS

@font-face {
  font-family: myIconFont;
  src: url(https://example.com/fonts/myiconfont.woff);
}

.my-icon-font {
  font-family: myIconFont;
}

In the above example CSS, the @font-face rule is used to load the icon font by specifying its url in the “src” property. The “font-family” property is used to assign a name to the icon font, and any element with the “my-icon-font” class will be set in the specified font.

The most common way icon fonts are used in web design, however, is through ::before or ::after CSS pseudo-elements. A typical approach is to create an empty <i> tag and use CSS to select that tag’s ::before or ::after pseudo-element, inserting the Unicode for the desired icon using the “content” attribute. Once the content is generated, additional properties are used to specify the icon font as the font-family as shown below.

HTML

<p><i class="font-icon dog"></i> Dog</p>

CSS

.font-icon::before {
  font-family: myIconFont:
  color: blue;
}

.font-icon.dog::before {
  content: "041"
} 

In the above example, the “font-icon” class is used to specify the correct icon set and styling to be used for all icons in the set, while the “dog” class inserts the Unicode for the dog character within the set. Since no actual content exists in the HTML, icons can easily be swapped out and changed using nothing but CSS.

How Can You Create a Custom Icon Font?

While there’s an ever-expanding selection of free icon fonts with even more options available if you’re willing to pay a premium, nothing compares to a set of original icons to make a website stand out and deliver value for a client. If you’re familiar with using software for creating and editing fonts, you probably already guessed that making a font out of icons is exactly the same as making one out of letters and numbers. Just be sure to export your font as a .WOFF or .WOFF2 if possible, since those file types are optimized for serving as web content.

For those of us without font editing tools, there are several web apps available that allow you to upload a set of .SVG files and export them as a font. One such app is IcoMoon, which is free to use as long as you don’t need to save your projects on their servers.

To use IcoMoon and similar apps, create a set of icons in a vector editing tool like Adobe Illustrator or the free Inkscape, and export each icon as an .SVG individually. These can be uploaded to a new icon set in IcoMoon, where they can then be mapped to whatever Unicode you choose and downloaded as a font file. IcoMoon even includes sample HTML and CSS to make implementation into a web project a bit easier.

Conclusion

Whether you plan to create your own icons or to use one of the exciting variety of existing icon sets out there, we hope this overview has inspired you to try this new approach to adding graphics to your next web project. In addition to their versatility and scalability, icon fonts can improve your website’s performance, making them a valuable asset for both usability and search engine optimization. And on top of it all, they’re just a lot of fun to work with!

A website may exist thanks to technology that has emerged very recently, but the design principles behind a great website are timeless. Conveying information to the viewer is still the most essential problem for a web designer to solve, and no element of a website conveys more information than its typography.

The trend with typography on the web has been that as web technologies evolve, more and more techniques become available to designers. It seems that with every new innovation in website and digital type technologies, web designers inch closer to having the full arsenal of tools available to print designers. With this trend in mind, we’ll take a look at the state of typography on the web, exploring what’s available to designers as well as what challenges they’re still faced with.

Breaking Free of Web-Safe Fonts

One of the most significant breakthroughs in typography on the web is in the number of typefaces available for designers to play around with. Traditionally, web designers were limited to a small handful of “web safe fonts,” or system fonts that came bundled with Windows computers and Macs. Typefaces like Arial, Helvetica, Times New Roman, Georgia, and a handful of others were the only fonts web designers could use if they wanted to deliver a consistent experience to site visitors.

Services like Google Fonts completely revolutionized this landscape. With a vast library of well-made typefaces ready to be called with just a few simple lines of CSS, Google fonts has made it easy for web designers to use typeface styles they’d previously only dreamed of. From the Gotham-esque geometry of Montserrat to the Bodoni-reminiscent elegance of Playfair Display, Google fonts offer a decent alternative for all of the classic typefaces previously out of reach of web designers.

As convenient as Google Fonts are, sometimes a project calls for a very specific font that can’t be replaced by a Google font look-alike. Luckily, improvements in web browser technology and the ubiquity of high-speed Internet in recent years has made it not only possible but viable for web designers to upload their own font files to be served as part of the website content. This essentially allows for nearly any font to be represented on the web, provided it’s in the right digital format.

Innovations in Digital Typography

Web technologies aren’t the only tool expanding what web designers can do with typography . In recent years, we’ve seen all kinds of exciting new innovations in digital typefaces themselves. From hand-made ligatures to beautiful glyphs and stylistic character alternatives, contemporary digital typeface designers are bridging the gap between digital and traditional typography. Combine this with web designers’ freedom to upload and use any digital typeface imaginable, and it’s not difficult to see why web typography is getting closer and closer to the subtlety and beauty of its print counterpart.

Ever-Growing CSS & JavaScript Support

The final technological advancement we’ll go over is the ever-expanding possibilities presented by CSS and JavaScript. As web browsers continue to become more powerful, new CSS properties and JavaScript methods that allow web designers more control over their typography are becoming standard. With these new standards, many typographic techniques that were previously only seen in print media are becoming not only possible but commonplace on the web.

Drop Caps are an excellent example of this. A staple of page layout since before the invention of moveable type, drop caps on the web was relegated to poorly supported experiments by CSS tinkerers throughout most of the web’s history. Fast forward to 2019, and now WordPress’ new Gutenberg editor allows anyone to set a drop cap by simply flipping a switch. Similarly, innovations in JavaScript such as the HTML5 Canvas API allow web designers to easily render text with strokes, gradients, and so much more.

The Challenges of Responsive Web Design

The general trend we’ve gone over so far is that, as web technologies progress, the typographic options available for web designers have opened up accordingly. Some technological advances, however, present more challenges than opportunities for typesetting on the web. One of these is the vast array of screen sizes web designers must account for in 2019.

As website design standards moved from static, fixed-width layouts to flexible and responsive layouts, it became impossible for designers to control every detail on a page layout. A typographic header that has a single line break on a desktop screen may have three or four line breaks when viewed on a phone. This inability to perfect every detail on a page layout means that web designers simply cannot achieve the level of finesse afforded to print designers.

Despite these challenges, this is an extremely exciting time to be a web designer. The gap between print design and web design is quickly closing as technology is giving web designers an ever-increasing toolkit to create beautiful typographic layouts. The web team here at tekRESCUE is certainly thrilled to be able to take advantage of these new tools, and we’re excited to see what the future has in store for the world of web design.

It’s extremely important to have a working mobile site in a world where more and more people are using mobile devices to search. Many people won’t even so much as use websites that lack mobile capability. As the saying goes, first impressions are everything, and you have to use the first few seconds of someone viewing your site to make a good impression. If the website does not work on mobile, the majority of mobile viewers will back out. There are a couple different types of mobile websites, each with their own advantages and disadvantages, and different approaches to each of them. In our last article, we went over responsive websites and some of what makes them unique. Now, we will be going over dedicated mobile websites, how to use them effectively, and some key ways they differ from responsive websites.

Device-Specific Features

Mobile sites are different from responsive websites in the fact that they usually utilize different code, and redirect to a different site altogether. Sometimes they can take advantage of “responsive” code to rearrange the site size to fit it to the screen, but it is normally not to the same extent as a pure responsive site would. Mobile sites are especially useful, and almost necessary, doubly so for feature-heavy websites. Because not all content works on mobile devices, the content from the desktop version disappears in favor of something that will work on mobile. And for websites whose design on their desktop version would limit the user experience, having a separate mobile website can be useful.

Unrestrained Desktop Sites

When designing a responsive website, the site has to be able to work across all devices, which means sticking with jQuery, HTML5, CSS3 and other similar cross-platform code. But with a mobile website, you don’t need to limit the power of your desktop version. If any features don’t work, you will be able to make a replacement. If you need to have the same features for your mobile users as you do your desktop users, there is a solution still. You can have the basics available on your mobile site, but for any features or tabs not available to mobile, you can have them redirect to a companion mobile phone app. This way, you will be able to have everything available without having to find a way to make it work in a browser.

Less Arduous Testing

Another potential pitfall of responsive websites is the need to test new features on all kinds of devices. While basic edits like changes to text, new images or new blogs can take less work to implement with a responsive vs a mobile site, any big changes require testing across all devices again. Any interface changes to the desktop site will still need testing to make sure they work on mobile. And because the added features must take all devices into account, it is possible that they will run slower on a given device because they are not optimized for it. Finally, since 3rd party services do not always make mobile-friendly content, you oftentimes will have certain features that become broken on a responsive site.

Either way, developers often need to strike a balance. Elements of both, and the ability to block certain content off mobile for responsive design will likely be needed to make it work.

Last month, we took a look at two of the four types of traffic your site should accommodate. We covered organic search traffic as well as paid search traffic, two sources that rely on your site to have a strong presence in search engine results. Today, we’ll be covering the two traffic sources that have nothing to do with search engines: referrals and direct traffic. Like we mentioned before, each traffic source requires different design techniques to generate the optimal results. With that in mind, let’s take a look at some ways you can design your site with referrals and direct visitors in mind.

Referrals

These are visitors that got to your site from a link on another web page. They were, in essence, referred to your content by another web site. What would make other sites more likely to refer their visitors over to your site and generate more traffic for you? How do you make sure referred visitors find your site relevant enough to stay and not simply bounce back to the site they were on?

The best answer to both of these questions is to pack your site full of engaging, useful, shareable content. If other site owners think their audience will find your content useful, they’ll want to share it to increase engagement with their own audience. Interesting or enlightening blog articles, well-made infographics, software or design asset packs, and other unique assets make for great content to link to. The more unique, one-of-a kind assets your site has, the better.

Direct Traffic

Finally, we have direct traffic: any visitors that reach your site by directly typing a url into their browser’s address bar. These are often visitors already familiar with your site, but keep in mind that urls can spread through word-of-mouth. In both instances, more visitors will be inclined to reach your site if it has simple, clean urls that make sense and are easy to remember.

The first step to memorable urls is to choose a domain that makes sense for your brand. The closer your domain is to your actual brand name, the easier it will be for potential visitors to remember it. For example, say you have a brand called “Peppermint Bark Dog Biscuits”. You’d want your domain to be “peppermintbark.com” so that anyone can find you online, even after only knowing your brand name. It can sometimes be impossible to get the exact domain you want, however, so something close like “barkdogbiscuits.com” would also work nicely.

All of your individual pages’ url slugs should also make sense and contain simple words separated by hyphens. Try to avoid numbers, symbols, and other things that would make your url slugs unintelligible and difficult to type out. Going back to our dog biscuits example, if you have a page dedicated to your dog biscuit flavors, your url slug should be something simple like “peppermintbark.com/flavors” or “peppermintbark.com/biscuits”. The same goes for any blog articles or other pieces of content your site has—make sure your urls are as easy to type as possible, and you’ll be more likely to get those direct traffic visitors.

That’s all of the web traffic types we have to cover. We’ve gone over organic search, paid search, referred, and direct traffic sources, as well as some techniques you can use to design your site with all of these visitors in mind. Web design can be a real challenge with innumerable things to keep track of. If you feel like you don’t want to go it alone, remember that you can always contact a professional team of web designers like the one at tekRESCUE. We’ll use all of our knowledge and experience to drive as much traffic to your site as we can!

Does it matter where we come from to get to where we are today? When it comes to visitors to your website, the answer is a resounding “yes.” A website is like a storefront in a busy downtown intersection—each visitor could have used any number of roads to get there. As the owner of this storefront, you’d want to bring in as many visitors as possible, from as many roads as possible. On the web, however, it takes different design techniques to drive different types traffic, and if you haven’t been designing with each traffic source in mind, you may be missing out on all sorts of visitors.

Today, we’ll be going over these types of web traffic and offering some tips you can use to better design your site to generate as much traffic as possible of every kind.

Organic Search Traffic

The first type of web traffic we’ll be looking at is organic search traffic. These are visitors that entered keywords into a search engine and clicked on your site in the search results. If you want to design your site to drive as much organic search traffic as possible, this is where search engine optimization (SEO) techniques come into play. Your focus should be on telling search engines what your site is about, and convincing them that your site is a relevant source of information for that topic.

You can give search engines an idea of what your site is about by choosing the right keywords and having those keywords appear in the right places. This includes page titles and headers, meta tags such as title and description, image alt attributes, and simply in the flow of your paragraphs. As we discussed in a previous article, quality content remains the best way to convince search engines that your site is a relevant, credible information source.

The biggest design challenge here is to design for search engines without sacrificing your goals of designing for human visitors. A site stuffed to death with keywords may generate a lot of search traffic, but no visitor will stick around long if the site isn’t designed first and foremost with people in mind. Incorporating your keywords in a way that feels natural and organizing your site’s content clearly will appeal to both the bots and the humans.

If you want to learn more about SEO in-depth, check out some of our other articles on this topic. We’ve covered it pretty extensively on this blog.

Paid Search Traffic

The second type of web traffic on our list is paid search traffic. Organic search traffic gets its name because it happens automatically: a search engine recognizes your site as relevant to someone’s search and feeds it to them on its own accord. Paid search traffic, however, comes into play when you pay for an ad to run on a search engine.

Ads can be very effective, as they usually appear at the top of search results and make your site very visible. This doesn’t guarantee traffic on its own though. To optimize the amount of traffic you get out of a search ad, your best bet is to design your ad with attractive copy that will draw visitors in and convince them your site really is relevant to their search.

An effective paid search campaign doesn’t end with the ad, however—the page that visitors end up on when they click your ad is equally important. Your goal is to lower bounce rates, or the rate at which visitors leave quickly after making it to your site. Designing an attractive, well-written, easy to navigate landing page is a great way to keep these bounce rates low and draw in new visitors from a search ad campaign.

That’s all we have time for today, but these are only half of the web traffic sources we want to cover. Come back next month to read part two, where we’ll be going over referrals and direct traffic!

Your landing page informs what your purpose, services or offerings are. It does this by walking them through the purpose of the organization, into the general services or purpose behind them, and then into the application of those services. Then depending on the organization, there should be an area for a contact box, an estimate form, or a number/email address to connect and interact with you, the owner. We have previously covered these things, but today we go over other potential sections.

There are other things that can be optionally included, such as a small about us page, a testimonial page, or a small portfolio page. These can be smaller than the rest, or all included together in a row. But if you do include an About Us section on the landing page, and also have a separate stand-alone page for About Us, include a link to the full section. Just include the most important information to your brand. This might mean saying how many years you have been in operation, why you started, what you do, the years of experience on your team, how you’ve helped people and any anything else that you as the owner and operator find to be the most important pieces of information.

A testimonial page can be effective, especially with a proper landing page. If the website kept the visitor there and gave them the information or answer(s) they needed or got them interested, then some well placed examples of real customers that benefited from your help can be great to give them reason to contact you or buy your product. A great place to get testimonials is from asking people who have already left you positive reviews on Google or Facebook for a website testimonial. Or just ask their permission to use their review. The effective use of one should add to the flow of the landing page, informing, driving traffic and connecting your potential customers.

If you “create” anything, than a portfolio page would be well-advised. Whether it is your photos you’ve taken, the buildings you have built, whatever it is you create, if the website is mainly about that, then you should definitely consider adding it to the landing page.

There are types of websites that may differ from this formula, however. For example, a personal resume website wouldn’t need to list out the services they offer. And a personal resume website doesn’t always need multiple pages, the landing page may be enough. For that, the idea of breaking down categories into sections, and having an intro and a contact section still stand. But instead of what listing “Catering, Menu and Online Ordering” as your sections, you can have “Resume(employment history), Portfolio, About and Contact”. If you do not have a portfolio, instead you could have a section for skills or references. And an online sales website, may want to use their intro section to advertise flash sales. If you are hosting a non-profit, it will not be your services you will advertise for sale. But rather, the good your organization does, and what donors can expect their money to be used on.

Designing a website correctly can be difficult, but with the proper team behind you it should be able to generate customers and visitors alike.

In this series, we continue our look at what makes an effective landing page. We have previously gone over design philosophy and the intro section. In this article we cover listing what you do, and contact forms. Basically how to inform and connect to your potential visitors and customers.

Sections for Listing Your Services

Landing page designers can set this up in several ways. One way is to have one initial section with a row of images and descriptions of what you do. Then from there one option is to have an individual section for each type of service. For example, Lawn Maintenance could have one for lawn maintenance, lawn design, and cleanup service having their own section.

Alternatively, you could skip the general one that lists all, and just have each category have it’s own section. If you do a huge range of things, then find ways to break them down into categories. Then each category can be used to go into the specifics that they fall under. You should use each section, essentially, as advertisement and a way to provide a reason that people should hire you. This might mean describing how it can help build your business or help your customers.

For example, in the Catering section, there may be 3 little taglines. One could advertise how many people you can service. The second could advertise how many options you can provide, and that you can provide to specific needs like vegetarian, seafood, brisket or options for anything in between. The third could advertise that you have a service area of 100 miles or that you could offer buffet-style.

Make sure to clearly mark each section so that visitors can easily differentiate between information they need and information they don’t. Sometimes it is best to also include a link for each section that has a corresponding page. Anything that needs to be tailored to the client can be directed to a separate contact page that is used for getting quotes.

Contact Box, Call to Action or Contact Info

The final thing that should always be included, is a means of getting in touch with you. Think of the rest of the sections as a way to lead the clients to the final goal, contacting you. The introduction tells the visitors about what your company does, the first service section will list off what you do so they can look for the one they need, and the following sections will go into more details over them. Then finally after they know what type of company you are, what all you do, then more info on what they are looking for, the final step is to put them in touch with you. One can do this in several different ways.

Most websites will have a contact page, so the specific section does not need to have everything the page does. For box and mortar stores, a phone number and a map would be best for the bottom of the landing page. But for someone who, for example, does construction, then at the bottom a small form for contacting you or getting a quote would be the best use of space, and maybe a number and an email address. If you are selling something digital, say an iPhone application, then a call to action is the best for you. “Click here to pre-order our app”, “Download Our App Today”, or “Experience X For Yourself”.

“First impressions are everything”, says the age old adage. When a customer visits your website’s homepage, they will immediately make a judgement call on if the website matches what they are looking for. This means that you have about 30 seconds to get and keep their attention. It’s like the internet’s version of window shopping. When you are in a mall, you are going to look into the window of a store to get the intent of what they offer and what they do.

A website should exist to inform and then connect visitors with you. This comes from our mission statement as a company to make technology that works for you and enhances your life. And our website design stems from this philosophy. It should be easy to use, simple, and elegant. In this series we will be looking at how to effectively use a landing page for increasing visitor interaction and retention and turning those visitors into actual customers.

What Should a Landing Page Include?

The first thing we will look at is what is important enough to include on a landing page, as the more cluttered the more likely the visitor will back out before they read the info that would have kept them on the site. Keep in mind that this isn’t a 100% rule, and that there will be exceptions. For example, there may be differences between what a restaurant, a non-profit, and a lawn care company would want to provide.

There are also different types of visitors. A returning customer may be simply looking for a phone number to call, or looking to order online. The landing page should make some consideration of that. This doesn’t apply to most businesses, but for those that it does should keep that in mind. For a phone number, that can be on the bottom of the page, but for quicker access be put on a page that has a link in the menu.

The Introduction Section

• Sliders
• Company Name w/ Background Image
• Logo w/ Short Description

The first section should quickly explain the type of organization you are and the types of services you use. This is the first impression, and it needs to be clean, uncluttered, and effective in communicating the core essence of your brand. If you decide to use a slider, then you have the option of advertising temporary sales and new offers and removing them later. The first slider can explain your company, the second and third the categories of services you offer(for a restaurant, 2 could be your menu or drink selection and 3 could be your catering), and then any temporary offers should be put last.

If you use a backdrop, venues should use a picture of their place of business, service companies can use a stock picture of their industry. Over the backdrop should be your logo, with a link to either get in touch or more about what you do. These images should be in line with the branding you use. Things a company should not put here, include overly specific info about employees, too much information, or cluttered sections explaining every tab. Instead of information about specific employees, you can have information about the company in general. There are some exceptions to this, which we go into in the next article.

If you’re looking for professional website design for businesses in Austin & San Marcos TX, consider contacting tekRESCUE today to see how we can help! 

When making your website is an important but difficult task, this infographic is designed to guide you through all the steps of picking a color.

COLOR SCHEMES

ANALOGOUS

This color scheme is very relaxing because it uses colors that are very similar to each other. An example of this is sky blue, teal, and sea green. This type of color scheme is best for websites displaying calm images.

COMPLEMENTARY

Complementary colors are colors that are exact opposites of each other. When placed together the colors stand out. Complementary colors are not recommended for the overall theme of a website, but using the compliment of the main color is very useful to emphasize important parts
of the website.

MONOCHROMATIC

A monochromatic color scheme is actually a scheme made up of just one color. It is made by using lighter and darker versions single color. This scheme is really useful for bringing out important parts of your website, like titles, navigation, links, etc.

TRIADIC

This color scheme uses the power of three, each color is in equal distance apart from the other two, on the color wheel they make a perfect triangle. You could use one color for the background
and the other two for content and highlighted areas.

SATURATION

Saturation is the strength of a color, low saturation makes a color more dull, while high saturation makes a color more vibrant.

CONTRAST

Contrast is the difference in strength between two colors, and the larger the difference in strength between colors the more contrast they will have. on the flip side, colors that are similar in strength will have very low contrast.

WHO ARE YOUR CUSTOMERS?

Surprisingly, different colors appeal to different audiences.
So, it is important to choose colors that appeal and attract the right customers.

COLORBLINDNESS AND BAD EYESIGHT:It is important to remember not everyone can see perfectly, even though your company may not cater specifically to people with bad eyesight, it is very likely that you will have customers with these problems. The best way to make your website visible for all audiences, is to have proper contrast in your color scheme.

Men typically like neutral colors as well as bold colors. (i.e. black, white, red, grey, brown, green). If your company caters to men it is best to avoid pastel colors, and vibrant colors like yellow, purple, pink, and orange. Women prefer websites with brighter colors such as blue, green, and purple.

It is also important for your colors match your products and/or company. If your company sells athletic gear it would be best to choose more sporty colors such as grey, red, and navy blue. Similarly, if you have a floral design company it would be best to choose colors such as pink, green, white and other floral colors.

DO’S AND DONT’S

DO’S

Chose colors with your customers and your brand in mind. Make sure the colors make it easy to read the information on your webpage. Also, make sure the colors match your product.

DONT’S

Don’t choose colors that are too similar to each other this is the easiest was to make words very difficult to read. Also, try not to choose colors that are too different from your company’s brand, black and red wouldn’t suit a Florist’s company, but it would be perfect for an athletic clothing brand.

With the right copy backing up your website, you have given your content a fighting chance to actually command the kind of influence that it has the potential to achieve. The internet is full of content that simply floats about without the slightest semblance of purpose or cohesiveness, and in that static noise of irrelevance and and aimless, copy that is both relevant and well-formulated manages to cut through with a striking level of conspicuous brilliance. Simply put, having relevant copy is necessary if you want have your website and the brand that it stands for done justice.

The exact kind of copy that you’re going to need in order to bring out the full power of your website to make an impact will naturally depend on exactly what category your content is in, but no matter what that category may be, there are a number of universal benefits that truly good copy will always bring to the table for those who are willing to either invest in it or learn how to create it themselves. The following are some of the biggest ways that well-written, relevant copy can help your website’s performance improve substantially.

More Enticement To Share Your Website’s Content

The stronger and tighter that your relevant content is, the better of a chance that you’ll have at enticing all of your visitors to share that content with their own social networks. Strong copy doesn’t simply tell the reader a message, but actively engages them to the point that they’ll feel compelled to talk about it. Relevant copy is the kind of copy that provides contextually fitting value, and with the presentation of that value comes the natural compulsion for all who find it useful to promote it to like-minded people.

Higher Conversions

If you want your website’s proposition to turn into sales, then you need the kind of copy that’s going to have a call to action with genuine impact. Relevant copy is effective at breaching the walls of well-developed skepticism that modern digital media consumers have and giving them the confidence to invest in new things. Through relevant copy, your content entertains, educates and resonates with the target reader before asking a sale; because of this, your power to see that sale get made successfully is increased tenfold.

Repeat Visitors Turning Into Promoters

The level of trust that relevant copy can inspire in your target readers isn’t just valuable in terms of your brand’s reputation, but also in terms of its objective monthly traffic. It isn’t just more unique visitors that you want, but a consistent follower base that regularly engages with your content and brings new unique visitors in. By developing a stronger relationship with your core followers through relevance, you’ll be turning those followers into promoters who voluntarily raise brand awareness and keep the website alive with constant presence.

Higher Search Engine Ranking

Naturally, a higher flow of revolving traffic and more links to your website created through sharing promoters is going to provide a good deal of high-value SEO power. The longer and more consistently that you employ relevant copy, the better of chance you’ll have to make your website visible on the front page for keywords related to its niche.

A well-designed website can be one of the most important parts of any business success in our modern information age. More often than not, a potential customer is going to have their first impression of your company digitally. It is even more crucial to have a well-designed website when you are selling products online. Heat mapping is a tool that will help you determine which parts of your website are effective and which ones are less effective. Here are four ways you can use heat mapping to optimize your website’s conversion rate.

Understanding Heat Mapping

Heat mapping is a tool that has come in very handy for online businesses. This tool shows you which parts of your site are being clicked on the most. Free Analytics services like Google Analytics will usually have a heat map option available for you to look at. These heat maps come with a guide that tells you which parts of your site are being clicked on the most. This is very important when you are working on designing an effective home page. You will be able to see which of your promotions you are running on your home page are working the best.

Target the Areas of Your Website that are Not Doing Well

In business, when you discover something that works well for you it is important to stick with it. Before heat maps, this was difficult to do when it came to your web design. However, now you can determine which buttons, promotions, banners, and other design elements are helping your business to grow most effectively. You will then be able to design the rest of your site around the proven methods that have worked in the past. Heat mapping technology can also be a great way to gauge if new changes you are making to your site are effective or not. This tool will also help you to narrow down the problem areas of your site that need work. You will be able to pinpoint areas of your site that are not helping you in your sales funnel process. Heat mapping technology can allow you to also see if the changes you are making to your site are effective in remedying these problem areas.

Focus on Key Elements of Your Site that are Helping You Make the Most Sales

Just like a great salesman in your organization, your website can be a revenue generating machine. There are certain elements of a successful e-commerce site that just work. Heat mapping technology will help you find the elements of your site that are helping you make the most sales. If you are ever looking to branch out and make a new website, you will be able to use a heat map of your current site as a formula for your new success.

Determine Which Page on Your Website Should be Your Landing Page

If you have a page that is currently helping you make the majority of your sales, you will want to make this your landing page. You will be able to use heat mapping to determine exactly which elements should show up to a user after they have clicked on your ad.

If you’re interested in learning more about heat mapping and increasing business on your website, contact tekRESCUE in San Marcos, TX.

A company logo is often the first glimpse of a business that potential customers get. Because of this, having the right logo to represent your company is integral to gaining and retaining customers. Your logo should be a visual representation of your company, its values, and more, regardless of the industry. Due to the importance of company logos, a great deal of research has gone into learning what works and what doesn’t when it comes to designing a logo. Across multiple industries, the following tips have proven most valuable.

Graphics

While some logos use only text, the majority utilize text combined with a graphic image. The most successful logos are those with a fairly simple graphic. Those logos that feature complicated or busy graphics will be less memorable. The graphics you choose should also reflect your business so that potential customers can easily associate the image with the company. When creating your logo, consider using vector graphics. Vector graphics will provide more clarity when used across the majority of platforms, and will make it easier to format your logo in different sizes.

Font

The vast majority of logos include some text, and for those the font should be chosen as purposefully as the graphic. The most important part of a font is its readability. Potential customers should be able to easily understand the text on your logo, so make sure that you choose a font that is clear. Avoid having more than two different fronts on your logo. Also, consider the platforms that your logo will appear on, as the size of a font and the material it is printed on can change its appearance. Two fonts used in many modern brands are Serif and Sans Serif, as they conform well to size variances.

Color

You will also need to consider the colors used in your logo, both in the graphic and the font. The color of a logo may not seem that important, but they can subtly change how potential customers view your business. Studies have shown that people tend to associate colors with certain emotions. For example, red hues tend to stand out and be associated with energy and excitement, while blue is often associated with security and trust. Choose your colors carefully and try to keep the colors in your logo down to three or less.

Flexibility

Another important aspect to consider when creating your logo is the platforms you will be using. A company’s logo may be used on many different materials and in many different sizes. Your entire logo, both text and graphics, should be flexible enough to use on a variety of platforms. Your logo needs to look appealing on something as small as a business card but as large as a billboard. Can it be printed on material such as a T-shirt or other promotional product? Some companies will use different logos for their marketing than other materials, but consistency is best, so choose a logo that can do both.

If you’re interested in more information about growing your business, contact tekRESCUE in San Marcos, TX.

What is a UX designer, and what do they do? UX stands for User Experience and a UX designer is a person who provides the aesthetic design and function of your website. They are responsible for the look and the way a website “flows.” There are a few key points a successful UX designer will keep in mind when designing a website, the main one being pleasure from use. Pleasure from using a website is triggered by key elements within the sites operation. If a visitor enjoys a website, they are likely to return. It’s through small psychological nuances that make up an effective UX design. These nuances are:

Demand

Creating demand for your products or services is simple; your design should reflect that the item or service in question will end soon. Because of its low availability, people automatically attribute value to it. In the mind of the visitor, this design choice tells them that because enough people have used or purchased something until it became unavailable, then that thing must retain significant value.

Group-Think

Group-Think is a very interesting psychological process. People do what others do. If a considerable percentage of a group believes that a particular item is the best or most efficient, the remaining majority will believe it as well. To apply this to your design, simply install positive ratings or testimonials to let new visitors know that previous visitors approve of your product or service.

Reciprocated Trading

Reciprocated Trading in your design is the act of giving something useful to your visitors. This makes them feel obligated to give something in return. This reciprocation can be influenced by your UX design to have the visitor react in a way that is beneficial to you. To apply this nuance to your website, try offering something that fits the niche of your site, like lowered prices or free shipping.

Contrast

The science of contrast is easy to understand. If something is drastically different from the majority of your site, the visitor is more likely to notice it. Things such as a red button on a green website, or even a sudden change in font are effective examples of a contrasting UX design. Use the science of contrast to gain your visitors attention for sign-ups and other deals.

Framing

Where something is can affect your visitors. By associating an item or service’s value by its location, you can generate usage or sales by where your visitor sees it on your site. For example, imagine you have six service packages with varying prices lined from left to right with the lowest price on the far left and the most expensive on the far right. If the middle is highlighted, visitors are most likely to choose that option.

Prominence

Prominence in your design is choosing the moment to provide offers or sales to a visitor. By choosing when an item is the most prominent in your design, you can influence upsells for a particular item or service. Examples of prominence are pop up ads after a customer check outs or a recommended items section.

A “responsive” website is one that rearranges itself to display optimally on any device or screen size. Since 2013, phone use rose by 78% while desktop use fell by 10%. Because of this, it is very important for businesses to keep up with the internet trend and make their site mobile responsive. The average person spends 20% of their day on their smartphone, which is about 2.8 hours a day!

Google uses mobile-friendliness as a ranking signal that affects all mobile searches worldwide so that users find it easier to get high quality results optimized for their devices. Also, 70% of mobile searches lead to action within one hour while it takes nearly a full month for the same percentage for desktop users to catch up.

Some of the additional benefits of having a mobile responsive site are:

• Saves time
• Save money
• Wider Browser Support
• Improves SEO
• All pages available on every device
• No need to zoom on smaller devices
• One URL, One Code, All Devices

The age of online selling and finding whatever you need at your fingertips has caused a rush of people to the Internet to sell the products and services. With millions of new websites being developed, the field is getting a bit crowded. To even have a small amount of traffic to your website, you really have to stand apart from the crowd. Typing a word or phrase into your search box and hitting the enter button brings up a zillion sites, vying for your attention. Being selected from among many is the key to success on the Internet today. So what can you do to be selected?

In this article, we’ll be going over five things you can do to build your website for Search Engine Optimization (SEO).

1. Keywords

Research for the most popular keywords relating to your theme. Find the top keywords and build your webpage content around those keywords. It is important to keep in mind, that your content must be helpful and informative to the reader, as well. Keywords are important but keyword stuffing is not a good practice.

2. Quick Page Loading

This is another critical feature for good SEO practices. People searching the Internet are typically very impatient. They want to click on a site and have it appear in front of them immediately, if not sooner. Having too many attractions on your webpage can cause it to load slowly. Avoid this at all costs.

3. Mobilize your website

Mobile users are becoming the biggest Internet group these days. With Smartphones everywhere, people transact business and shop online while doing other things. No one sits idly at their kid’s baseball game or soccer game. They multi-task. Pay bills, buy shoes, clothes or groceries to have delivered by the time they get home. If you don’t mobilize your website, you will be missing out on over half the people in the world. Also, Google does not rank sites that are not mobilized as high, so your traffic will suffer for another important reason.

4. The user experience

User Experience is yet another important feature. If your navigational system is difficult to figure out, forget it. Users will leave your site in a heartbeat. Google will give you a lower ranking if your site is hard to use also. Web surfers want to easily zip through your pages to find what they are looking for. Make sure that it is easy for users to move from one place in your site to another with one click. It will help your overall site success.

5. Learn how to use the Google SEO tools

To stay on top of building your traffic, you need to learn how to use these tools to your advantage. Building traffic is not a passive activity now. You need to work on it continually. Some of the tools you need to understand include:

• Google Analytics

• Google Keyword Tool

• Search Console

• Page Insights

• Mobile Testing Tool

The areas discussed are not just ideas, but requirements for online business success.

If you’re looking for a web design or hosting company in San Marcos Texas, consider contacting tekRESCUE today to see what we have to offer.

The squeeze pages you use for offers must be perfectly-executed if you wish to convert sales. There are six tips in this article, and the article explains how you may use each tip to your advantage. You will find yourself earning quite a bit more money when your squeeze pages have been fine-tuned for performance, and you will be pleasantly-surprised as you make more money than you ever have in the past.

#1: Offer Less

You must not convince yourself that offering the world to a customer converts sales. You must offer a tangible sum for a new program, but you should not give your customers too much. They will be happy with anything you offer, and you will save money as you reduce the amount you are giving away on each conversion.

#2: Ensure The Page Matches Your Ideals

You cannot create a squeeze page that looks nothing like something your business would create. Your customers will be a little more than confused, and you will find yourself apologizing for the poor design of the page. Your most ardent customers will complain about the sensational design, and those who have not shopped with you before will assume your squeeze page is a phishing attempt.

#3: Use Fewer Fields In Your Forms

You must not force new customers to fill out a form that is a mile long. Ask for the least amount of information possible, use that information to convert sales and you will instantly see more people asking for information. The form fields will turn off customers who do not have much time on their hands, and the forms will begin to get out of control if you have not handled them properly.

#4: Use Splash Pages

Splash pages are much more desirable than pop-ups, and they look much more attractive. Internet users hate pop-ups, but they will accept a dedicated page for your new campaign. They will be taken to a new page on your website when they arrive, but an attractive page will help convert sales as you have shown that you worked hard on it for the customer’s benefit. Create better splash pages to avoid pop-ups.

#5: Write A Better Call To Action

Your call to action must work into your reward. You cannot ask your customers to be happy with the idea of being your customer. You must speak to your customers about the reward that they are receiving, and you must speak of the reward often. Customers enjoy receiving rewards, and your emphasis on rewards will help convert sales that you would not have seen otherwise.

#6: Track Your Traffic

Your squeeze pages must have tracking attached. You must learn how many people visit the page, and you must subtract the number of forms you receive from the total number of visits. You will quickly learn how effective the page is, and you will avoid problems with a page that does not produce the results you were looking for.

The six tips here will help you create squeeze pages that truly convert sales. You need not waste your time with antiquated ideas of marketing. Graduate to something new and different with each of the six steps.

What are the popular website design trends for 2016? In years past, website design has changed dramatically. In fact, it has gone from something that provided a great deal of information in text form to something that is far more interactive, often to the point of extremes. For 2016, the most popular designs have a mixture of both of these extremes. The idea is to provide information quickly and concisely while simultaneously getting potential customers’ attention and then engaging their interests long enough to keep them looking at the website in order to find out what a particular company is offering. Above all, the website design has to be a functional one so more people can get the information they need without it taking too long to do so. It also has to be something that they can load quickly. Otherwise, they will probably never see the website itself because they will grow tired of waiting for it to load and will move on to a competitor’s website instead.

Getting Attention

Every website designer faces the same dilemma. They have to be able to get the attention of their potential audience. Otherwise, everything else is a moot point. It is virtually impossible to sell a good or a service unless they are able to draw potential customers in. Even for organizations that operate as nonprofits, it is still essential that they have an attention-getting website. If it doesn’t look attractive and professional, it is highly unlikely that anyone is really going to spend very much time looking at the website at all. Therefore, it has to be something that is able to grab the reader’s attention and draw them in as soon as they look at it.

Engaging

Of course, just getting someone’s attention isn’t enough. Website designers are also tasked with creating something that will engage the reader long enough to allow them to know what a particular organization is all about. Whether they are looking at a nonprofit or a company that sells goods and services, the website must be engaging enough to prompt them to keep reading and keep looking at new links long enough for them to take the next step. For website designers, this is one of those jobs that usually sounds far easier than it actually is, as keeping someone’s attention can often be more difficult than getting it in the first place.

Concise

Despite the need to create a website that looks great and hold someone’s interest, website designers have to create something that is rather concise. When it comes to a website, most people have a tendency to have a rather short attention span. If the website is not designed in a concise manner, they usually lose interest and move on to something else. No one wants to look at a website that has very little information on it, nor do they want to look at one that has so much information and it’s going to take an hour to disseminate it all. Therefore, website designers have to strike a balance between the two.

Functional

Above all, any design that is popular will be functional. This should go without saying, but there is no website design that will ever become popular if it is too complicated to load quickly and be easy to read. This is one of the things that makes designing a popular website so difficult. The need to combine artistic inspiration with functionality can sometimes be exceptionally difficult. At times, these two ideals clash so completely that it is hard to find a balance in any capacity.

Summary

In closing, the most popular website design trends in 2016 will incorporate all of these things into a single entity. It is only then that all of the benefits of outstanding website design can truly be enjoyed. That is why it is so important that anyone in need of a website choose a high-quality website designer that has a comprehensive IT staff. That way, their website can be effectively designed and managed going forward.

With so many free DIY website building platforms on the market today, it’s pretty tempting to save a bit of money and tackle the task yourself. While it’s not a terrible idea, especially if you’re strapped for cash, there are some things you should keep in mind before committing:

“Free” Only Covers the Basics

If you want to use a custom domain name instead of a generic yoursite.sitebuildingtool.com, you’ll usually have to pay, often to the tune of $10/mo or more. If you want to add more advanced features, such as email opt-in lists, protected files, and many other features, you’ll often have to pay extra each month to unlock these features. These monthly add-ons can start adding up pretty quickly. If you want to add more advanced things, such as e-commerce, you’ll often wind up paying much more.

Basic, Generic Layouts

While you can usually choose from dozens of templates, your site will have the same look and feel as many of the other sites on the platform. You can often tweak color schemes and upload a custom logo, and drag elements around a bit, but that’s generally the extent. If you aren’t proficient with graphic design, you’ll have to rely on graphics provided by the platform and stock photos.

Lack of optimization settings

The end goal of building a website is having potential customers and clients view your site and take action. The SEO (search engine optimization) settings provided by the majority of free website builders is often lacking at best, or sometimes practically non-existent. Even if there are some settings you can tweak, do you have the time and patience to figure out optimal settings? Doing optimization wrong can actually hurt your rankings in search engines.

Lack of Support from Optimization Firms

If you ever decide you want to grow your online presence through search engine optimization, there’s a chance companies won’t take you on if you’re using a site builder due to the reasons listed above. If that’s the case, you’ll wind up having to pay them to build a more flexible website if you want to move forward. Legit SEO companies know that on-page settings are a huge part of optimization, and if they can’t make the necessary changes it will be an uphill battle the whole way.

You don’t actually own your site

Generally, you’re just renting space, and if the company you’re with changes their terms to something you don’t agree upon (or goes out of business), you lose your site and will have to start over from scratch.

If you want to ensure your business has a professional online presence, your best bet is to hire pros. Your time is valuable and building a beautiful, effective website can be time consuming and labor intensive. When you go with experts, you can rest assured knowing that your site will be built and customized to fit your brand. A good web development team will listen to your needs, then run with the ideas. Custom images, mobile-responsive layouts, advanced features (such as e-commerce capabilities, email opt-ins, appointment scheduling, etc.), and more can be discussed and added in with no extra headache or hassle on your end.

At tekRESCUE, we often build websites using the WordPress platform, which is backed by a thriving community dedicated to enhancing security and adding powerful features. What separates us from other web design firms that use WordPress is the fact that we love getting our hands dirty and diving into the code to customize your site to fit your vision. We also take the time to ensure proper on-page optimization so your site is built on a solid foundation.

If you’re looking for a reliable San Marcos and Austin web development company to help build your website, give us a call today at 512–843–2835. We’d love to discuss your needs! Visit our website design page to read more about what we do.

At tekRESCUE, we use the WordPress framework for a lot of our simple to medium complexity websites. We can also write code from scratch or use other frameworks such as Drupal or Bootstrap, especially Bootstrap. Did I mention we also love Bootstrap? But at the end of the day, we usually use WordPress. Here’s why:

It’s user friendly

This is huge for us. Many of our clients like and need the ability to EASILY make changes to their sites without having to call us. WordPress allows this capability. If someone can edit a document with Microsoft Word, then they can edit a page in WordPress.

It’s secure

WordPress is open source software. Thousands of eyeballs are constantly looking over the code. When a security risk is found it is quickly fixed and the code is updated. This is another huge reason for us because we are security freaks at tekRESCUE.

It’s Google friendly

Google loves WordPress. This has been true for a LONG time and is still true today. WordPress is used by almost 19% of all websites and is still growing in popularity. Search Engine Optimization and WordPress work great together.

It saves the customer money

We could make a database driven website from scratch. We could write hundreds of lines of code from scratch. We could write javascript from scratch. Doing that takes a lot of time. WordPress allows us to strong with a strong, secure foundation to create excellent simple to medium complexity websites.

Other reasons

It’s stable. It’s actively developed. It’s mobile friendly. It’s “girl next door” sexy. Oh and it was born in Texas.

Randy