September 13th, 2011

Web Fonts: A New Tool for Web Typography

Arial, Times, Verdana, Courier New, Georgia…what do all of these font families have in common?

If you happen to be a web designer or developer, you could probably have told us that these are a handful of the meager font-family options that are made available to those creating a website.  Considering the thousands of available font faces found in graphics programs and all over the world wide web, the web-friendly choices are rather disappointing.

Not to worry though, because we have some good news for you.  Google has recently developed and released a program that is already changing web typography as we know it.  This revolution has been dubbed “Web Fonts” and is a piece of cake to use!  Google Web Fonts allows anyone to obtain a new font for their website with three easy steps:

step 1: search and make a choice

Google Web Fonts database can be combed through with any criteria of the user’s choosing.  Users can simply type in keywords in hopes of finding a font face similar to one of their favorites, or can even narrow down a search with variables such as “thickness” and “slant.”  Fonts can also be found according to linguistic script or basic filters such as serif versus sans serif.

step 2: review your choice

This part is quite straightforward.  Once the user has chosen a font they (think) will work well embedded in their website, they will view all aspects of the font that Google Web Fonts has to offer.  Users will see all the styles and variations of their chosen font, so there is no mystery behind a font choice!

step 3: copy and embed the code

Google Web Fonts makes this step as simple as can be, too.  The code and directions for the font of the user’s choice are on the page (and oh-so-easy to use, especially considering we are all aware of how CSS3 works now, right?), ready for copying and pasting.

So, assuming you are all ready to break away from the Arial, Times, and Georgia bandwagon, let’s talk a little bit about how this simple yet fantastic new tool can be useful for Denver marketing.

Synchronization in terms of design

Perhaps all of the graphics on your website do not make use of fonts that fit the Arial, Times, etc. mold.  Though very typical, it can be frustrating not to be able to incorporate that curly, bubbly, or otherwise creative font into your website’s design without spending a good chunk of time on it in Photoshop.  However, with Google Web Fonts, you can certainly find fonts to match your graphics (or, likewise, find the fonts in Google Web Fonts prior to making graphics) and incorporate your newly found fonts into aspects of your website that do not demand a whole graphic to themselves.

Getting trendy

Out with the oh-so-popular Helvetica, in with a new font perhaps?  A unique new Web Font may be able to help you create a trend and attach a certain identity to your brand or company.  Making good use of your favorite Web Font around your website, and maybe even in your logo would be a great way to revamp an old visual identity, or create an entirely new one!

August 31st, 2011

CSS3: Faster, Better, More Efficient

A week ago we presented to you an overview of CSS and some of its main features.  We determined that CSS3 is a great tool for use in the realm of Denver website development.

In comparison to CSS2, CSS3 includes the addition of some great a elements that help with font styling, background image layering (two background images at once!), as well as layout set up (multi-column layouts for a newspaper-like feel).  CSS3 features also include a whole new range of color options.  Essentially, the possibilities are endless with CSS3!

Today we’re going to introduce a few specific advantages that CSS3 has over older versions, as well as the use of HTML or XHTML alone (without CSS).

CSS3 is Constantly Changing

Along with the ever-developing world of technology that we find ourselves residing and thriving in today, CSS3 continues to change. CSS3.info is an example of a website that frequently presents the continuing development of CSS modules.  Web designers and programmers continue to mold CSS3 to fit their needs, so you can count on new possibilities for your website coming up just around the corner!  The simple fact that CSS3 is versatile and stable, yet dynamic, is simultaneously comforting and exciting.

CSS3 Saves Time

Smashing Magazine is just one source that produced some interesting test results that show just how much more efficient the use of CSS3 can be for your website needs.  With CSS3′s intricate features, a whole set of images can be tweaked at one time.  Tweaking with CSS3 is a much faster process than individual tweaking with Photoshop images.  CSS3 files also take up less space in cyberspace, so file sizes are smaller; and therefore, loading times are quicker!

CSS3 is Versatile and Adapts to the Viewer’s Browser

As we are all surely aware, different browsers mean different appearances.  While a website may look great in Firefox, it may look absolutely dreadful in Internet Explorer.  One of the great aspects of CSS3 is that it helps the website developer program their site to adapt to the settings of multiple browsers.  Obviously, a solid code base that works across multiple browsers is necessary to get this to work.  However, once your base design is established, a variety of CSS3 tricks can be used to make this so-called “progressive enhancement” work!

CSS3 Includes the Use of Media Queries

With everything from Droids to iPads, people today are viewing the internet from many different forms of technology.  With CSS3′s use of media queries, the coding can be implemented to help fit the viewing device’s needs.

 

So…if you aren’t already using CSS3, what are you waiting for?!

 

 

Free e-Book: Website Fundamentals

Free e-BookYou have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

August 23rd, 2011

CSS3: An Overview

There’s a relatively new addition to the world of web development out there, and that new addition’s name is CSS 3.  CSS 3 is the newest version of CSS, with plenty of unique and exciting features.

As you are probably aware, CSS is an important web language that functions to help meet your creative needs when building a website.  CSS stylesheets and style elements help to determine everything from background image placing to hyperlink appearances to table colors.  While CSS will not get you anywhere without some good solid HTML code behind it, it’s still an important element in terms of aesthetics.  While HTML is the “meat and potatoes,” so to speak, CSS is the salt, pepper, garlic, and butter…you get the idea.

So why is CSS 3 so great?  Today we are going to give you a few examples of CSS 3′s new features, and you will have to agree with us that it can certainly help satisfy your web design needs!

First, let’s talk about the basics of what CSS has to offer:

  • background image alignment and repetition rules: without this, background images would certainly be a headache
  • link style for hyperlinks, visited links, active links, and links on “hover:” so you can venture out of the blue and purple link world
  • font styling aspects including color, size, and font-family properties: for those times when you get bored of Times New Roman
  • styling for tables including background color, and some border styling properties: it’s all about uniformity, folks
  • styling for text area boxes including background color, and some border styling properties: again on the uniformity…it keeps things looking neat

Now, besides having all of the above, here are some neat CSS 3 features:

  • multi-column layouts to create a newspaper-like look so that text continues from one column to the next: pretty useful if you are into the whole blogging thing!
  • the power of speech: if you are using Opera, that is
  • the ability for users to resize website elements: say goodbye to any pesky little scrollbars that are hindering the user-ability of your website
  • the ability to create shadowed text: a little cheesy, possibly, but pretty neat all the same
  • the ability to designate background pixel size: way easier than editing the image repeatedly in Adobe Photoshop
  • the ability to use multiple backgrounds on one page: again, so much easier than edits upon edits upon edits of one image
  • use of opacity in terms of colors: for example, you could make red text fade to pink in precisely the same warm-toned shade
  • ability to use an image as a border around tables: seriously, how cool is that?!
  • a wider range of color options with the use of hue, saturation, and lightness numbered colors: it’s not all about hex codes anymore
  • rounded border corners: simple, but this is an element that could certainly change the look and feel of your website!

So you get our drift.  CSS 3 has made some pretty snazzy additions to the CSS family, and chances are, you’re itching to try them out!  So we will get back to you next week with some more details on writing the CSS of your dreams.

 

 

Free e-Book: Website Fundamentals

Free e-BookYou have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

August 3rd, 2011

A Guide to Effective Web Design: The Basics

As you have probably concluded from the title, we’re going to delve into the realm of website development today.  We will talk you through some basic concepts and ideas to get the creative juices flowing, and then you’ll see some elaborations on the ideas in the next couple of weeks.  So let’s get started!

Say you’ve just started up a business and need to know a little bit about how to create a website that draws people in, gives them the information they need, and keeps them coming back.  It’s not necessary to build the most innovative website the 21st century has seen yet.  Today we will talk you through our list of three key concepts that go along with web design, as well as website management.

Quality Design

This is a pretty important aspect of your website, essentially, your website’s look and feel.  Just as it’s important to dress nicely for good impressions, it’s important to encase your website content in a wrapper that exemplifies professionalism and quality.  Now, although you may not be an HTML or CSS3 expert, there are plenty of services out there to help you design the look and feel of your website.  If you are taking the creative plunge to take on the whole project yourself, that’s great as well!  Keep in mind that there are a lot of things for you to consider: color palettes, visual aids (from photography to videos to diagrams, all depending on your content), as well as seemingly unimportant details like font face.  As far as graphics go, it’s important to develop high-quality graphics for your website with professional-grade programs such as Adobe Photoshop, Adobe Illustrator, and Adobe Flash.  The bottom line is: be proud of your business and the work you have done with it; and make your pride apparent with an attractive website!

Clear, Concise Information

How you organize the information contained in your website is certainly an important aspect of web design.  Information given on your website should be clear and concise, so that potential customers can leave your web space with a good idea of the services and business that you offer.  Websites should be easy to navigate (no virtual mazes, please!), but still contain plenty of detail for those who need it.  Simplicity in website organization is often key to delivering necessary information to customers.  It is also important to keep information on your website up to date!  Outdated information is essentially useless to new customers.

Content Management

It’s often hard to manage all the content contained in your website.  WordPress itself con often be very helpful in helping to manage your website content, especially if your website includes a blog or news page. Drupal and Joomla are two open source content management systems available. Content management systems like Joomla or Drupal can help you manage all areas of your website content from photos to RSS-fed pages to customer help forums. Really, these tools are just a way to keep organization easier. Effective content management is important for any website owner to focus on.

 

 

Free e-Book: Website Fundamentals

Free e-BookYou have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

June 1st, 2011

The Google Earth API…Oh, the Possibilities!


In case you missed it, we recently discussed Google Maps APIs and how they can helpful for a Denver online marketing company like us.

Today, we’re going to give you a few ideas to get those creative juices flowing — some cool features that the Google Earth API can add to your website.

The basic idea of the Google Earth API is that a big computerized globe sits all comfy on your page — pretty fun, right?  And from there, it only gets more interesting…

Pinpointing & Marking Locations Around the Globe

When you insert a Google Earth API globe into a webpage, one really useful feature is being able to track down and mark any location (and multiple location) around the world.  You can create your own “icons” to mark places (these can also be made to be dynamic, as in they can change on highlight or rollover with the mouse).  This place mark icon is created by pinpointing the latitude and longitude of the location of your choice; the place mark can be tagged with any assortment of descriptions or captioning of your choice.

Creating a Tour

It’s a tricky bit of coding, but if you take some time and have some patience, it is possible to create a tour with Google Earth APIs.  This way, a user viewing your page can be taken to a series of locations of your choice, marked with (as previously discussed) place marks with corresponding descriptions.

Layering

If you want to get fancy, Google Earth APIs have quite a few layering options for mapping out the globe.  For example, a border layer can be applied to allow the viewer to see divisions between cities, states, countries, etc.  Roads and road names can also be displayed in their own layer; trees and terrain can be viewed in a three dimensional orientation.

To sum it all up, Google Earth APIs allow you to design an interface in which users can explore the globe, guided by you.  If you’re interested in checking out some cool examples, visit the Google Earth API Demo Gallery.

Free e-Book: Search Engine Optimization Fundamentals

Free e-BookYou have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

Photograph courtesy of ToastyKen, released under a CC by 2.0 license.

Free e-Book

Social Media For Business

Free e-Book -- Social Media for Business

Download our free e-book to learn how to derive real business value from social media tools.





Sign up for our Monthly Online Marketing Newsletter


Recent Posts

Top 10 Categories

News Archives