Monthly Archives: August 2016

Tips to Improve Your Web Design Skills

Designing your company website can be a challenging proposition. You’ve got to juggle the expectations of many stakeholders, and you can often hit obstacles that prevent new ideas from emerging.

I was the design manager for a large company website for nearly six years, and during that time, I found myself losing perspective of what our target audiences really needed. Call it “tunnel vision.” When you work on the same website, it often helps to take a step back and think through new approaches. That’s the purpose of this blog post.
What follows are some tips, tricks, shortcuts and general advice for creating great website design. Can you try any of these to take your web design to the next level?

1) Design in shades of gray, then add color

If your web designer creates wireframes prior to visual designs, then you know the value of starting with shades of gray. Turn your wireframe into a grayscale visual design, add your photography, then carefully add color to design elements one at a time.

This will prevent an “overdesigned” website and help to place prominence on just the items that need it.

2) Use Keynote (Mac) to create rapid page prototypes

You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements. There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.

There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.

3) Add web fonts to your corporate style guide

It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.

If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online

4) Bury those social media icons

You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.

If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.

5) Ditch the slideshow/carousel

When the homepage slideshow/image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.

What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing — usually what your company does in layman’s terms — and ditch the rest.

6) Simplify navigation

Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.

Eliminate dropdown menus and especially multi-tier dropdown navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.

7) Remove sidebars

The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.

Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.

8) Get color inspiration from nature

Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.

9) Step away from the computer

I believe that good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.

It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.
10) Use Pinterest to create mood boards

When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.

Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.

11) Increase your font size

Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.

One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.

12) Use white space

It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.

Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.” Give your design room to breathe, and your website visitors will be able to find things easier.

13) Use the squint test

Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint. Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.

Build a Better Website With This 6 CSS Tools

Cascading Style Sheets are an essential element of Web pages, since they control page layout, fonts, positioning and so much more. While CSS does offer a great deal of page control, some aspects can be cumbersome. This in part is why CSS is going through another revision, currently version CSS3.

CSS3 gives designers more control over page layout and the behavior of different page elements. With its new coding options, CSS3 now has the capability to create image effects with code, giving more control over the look and feel of layouts. These effects—which include gradients, text and box shadows and border-radius, for rounded corners on boxes—let you create image effects on the fly, without building each effect using image-creation programs. It’s also worth noting that CSS3 is backwards compatible and will work with pages designed with CSS2.

Here are six programs that will make your life easier when designing pages with CSS. Some will help you accomplish a single CSS programming task, while others are more robust and will help you go a long way toward building a fully functioning small business website.

Adobe Dreamweaver CS6

When working with CSS—and, in fact, when doing all types of Web design—the program of choice for many is Adobe Dreamweaver CS6.

One particularly useful feature is Fluid Grid Layouts (shown below), which is a must for creating multiple layouts for desktop, tablet and mobile versions of a site at the same time. Note that the document type defaults to HTML5. As a result, Dreamweaver CS6 lets you build a mobile site quickly, then output the layout using the mobile development framework PhoneGap.

Adobe Dreamweaver Fluid Grid Layouts

There is also improved support for the HTML5-based user interface system jQuery Mobile.

Adobe Dreamweaver Mobile
Additional Dreamweaver CS6 features include an updated Multiscreen Preview panel, which lets you see how HTML5 content renders, as well as integration with the Adobe Business Catalyst website hosting platform and a wider range of Web fonts that you can incorporate into your projects.

Adobe offers several pricing models based on its Creative Cloud package, which offers software components to businesses beginning at $19.95 per month.

TopStyle 5

The HTML5 and CSS3 editor TopStyle 5 includes several helpful features:

While CSS3 offers a wide range of possibilities, it doesn’t display properly in all browsers. Plus, since it hasn’t reached the final release stage, you need to use CSS vendor prefixes to make sure there aren’t any conflicts among browsers. There are many settings, though, and it’s difficult to remember them. Luckily, TopStyle 5 ensures cross-browser compatibility through its Prefixr, which adds those vendor prefixes to your code.
The iWebKit 5 framework lets you create website or app compatible with the iPhone, iPod Touch and iPad.
Image Maps let you create “hotspots” that, when clicked, take the user to another Web page.
Finally, the CSS Gradient Generator (shown below) lets you create vertical, horizontal and diagonal gradients with pure CSS3, without having to create images. The Reverse button will reverse the gradient—from top to bottom, for example, to bottom to top. Note that you can see the code in a preview box at the bottom of the dialog box.
TopStyle 5 CSS Gradient Generator

Rapid CSS Editor

The Rapid CSS Editor lets you write website code manually or use a wizard. When it comes to creating CSS or HTML layouts, using the wizard is a snap, and it includes tutorials for the CSS beginner. Choose a font, font size and link color, then click “OK” and you’ll get the CSS code shown at the right.

The New Form Template option, meanwhile, lets you choose from several pre-defined layouts or create and save your own. As you create a new template, as seen below, it’s easy to preview the results.

Firebug for Firefox

The open source Firebug for Firefox add-on editor lets you inspect the code on a Web page without making any changes to that code. You can experiment with turning items off or adding code, for example, then copy your settings for use with other projects. Among other things, Firebug offers a great way to learn HTML code and use non-destructive editing to change the style and layout of a page.

Here’s a screen shot example of Firebug in action:

Let’s say you’ve built a layout, but you’re not satisfied with how it looks in the browser. To see what’s going on, click on the “Inspect” button, then hover your mouse over different elements on your page. When you do this, that section will open in Firebug and you’ll see what’s going on with your code.

Additional Firebug features include the capability to use a JavaScript debugger and a robust set of extensions that add more power to the program.

CSS Menu 3.3

One task that can eat up a lot of time when building a new site is menu creation. To address this, CSS Menu 3.3 lets you create both horizontal and vertical navigations.

As you’ll see when you look at the default interface for CSS3 Menu 3.3, everything you need is on this one screen. This makes the program simple to use.

At the top left are the controls for opening, saving, publishing adding and subtracting menu items. Directly below that is the menu where you can choose to create either a horizontal or vertical menu, both complete with flyouts and multiple levels. Below the menu section, you’ll find the item properties that let you to set the text, link, target and alt text, as well as add an icon to your menu items if you wish.

At the top right, meanwhile, are the templates and icons section. Templates give you horizontal and vertical options for building menus, while the icons tab gives you various icons to display alongside menu items.

Finally, at the bottom right are the font, color, hover and box controls. These give you a lot of flexibility for styling the menu and the text. For example, you can choose from up to 15 different fonts, including different fonts for the main menu and sub-menu.

CSS Menu 3.3 has two pricing models. A single website license for both Windows and Mac users is $59, while and an unlimited website license is $79.

CSS3 Button Generator

Another time-consuming task when building a website is creating buttons. The Web-based CSS3 Button Generator offers you a solution by letting you create custom buttons for your layouts. (Be aware, though, that these buttons will work only with browsers that support CSS3; otherwise, the buttons might not render correctly.)

The CSS3 Button Generator consists of several sections: Font/Text, Box, Border, Background, Hover and CSS Code. When you visit this site you’ll see a button in place at the top of the screen; meanwhile, several settings are already enabled.

When setting the font, you’ll encounter some limitations, as your only choices are Arial, Georgia and Courier New. Also, there aren’t any controls such as underline, left, right, center, italic or bold, though you can control the position of the text by adjusting the box properties.

Here’s an example button—with admittedly exaggerated effects—to give you an idea of what this software can do:

When you’re satisfied with the look and feel of your button, copy the CSS code and Web kit settings and use them in your designs.

Let’s Lear About 7 Tools to Build Websites Using Responsive Design

As consumers access websites from a growing variety of devices, responsive Web design becomes increasingly important. Responsive web design is about building a Web presence that scales and functions well on desktop, tablet and mobile devices. The viewing size of each device is different, which creates challenges for Web designers, not only because of the designs themselves but also due to the need to manage website components as they scale from one device to another.

One example is how to display images. What looks good on a desktop probably won’t work on a mobile device, so Web developers must consider issues such as proportions, text, image sizes and compression. Another factor is how various components of a Web page will be organized on a smaller screen with different dimensions.
To help you address these and other responsive Web design challenges, here are several tools and online services that will help you meet your objectives.

Adobe Dreamweaver

Adobe Dreamweaver CS6 has the capability to build fluid layouts. This lets you create three layouts—for the Web, tablets and mobile devices—all at the same time. Add Media Queries to these fluid layouts and you can easily control the appearance of your pages. Media queries let designers target different styles to different devices; one example would be a group of styles that only take effect when the screen size is larger than 800 pixels.

Dreamweaver lets you build both mobile apps and websites. The chief difference is that some mobile sites can be designed to display on all mobile devices. In contrast, mobile apps can offer more functionality, but they have to be custom built one each device. This can quickly get expensive. You can learn more about the differences and costs involved with each approach from the New Media Campaigns blog.
Recent Dreamweaver updates include enhancements to Fluid Grid layouts and Web font integration.

All Fluid Grid elements have been placed within the Structure category under the Insert menu. New options include Ordered, Unordered and List. Options for DIV elements such as duplicate, lock and swap now appear when you select an element. You can nest fluid elements as well. Fluid Grid elements will work with Web apps as well as mobile sites.

In addition, it’s now possible to add from the library of Adobe Edge Web Fonts in your layouts. When you do, a script tag is added. This tag references a JavaScript file that downloads the font from the Creative Cloud server, where it’s stored in the browser’s cache. Edge Web Fonts are powered by Typekit by Adobe, so they can be integrated with Adobe Edge tools.

Adobe offers several pricing models based on its Creative Cloud package. This offers a range of software components for businesses that begins at $19.95 per month.

Adobe Edge Reflow Preview

Edge Reflow, in development by Adobe, uses a grid (or box) system that scales with your design.

When you reduce the size of your layout, the interface can adjust the positioning of site element and the boxes of the design can move one below the other as the layout changes.

Adobe Edge Reflow
Edge Reflow lets you build either a desktop or mobile site first. It also contains a toggle so you can easily switch between layouts, if necessary. Depending on whether you create pixel-based or percentage-based boxes, these elements will either scale with the layout or remain at a fixed size.

Edge Reflow gives designers a way to test their ideas visually. The Edge Reflow interface makes it simple to toggle back and forth between the mobile and desktop layouts, so it’s easy for a designer to see what’s happening. Once the designer has a layout she likes, she can extract the CSS for further development.

Edge Reflow is part of the Adobe Cloud membership, which is free.

TopStyle 5

TopStyle 5 Pro is an HTML5 and CSS3 editor for Windows with several useful features, including gradient and text shadow creating tools and a framework for building websites and apps for Apple devices.

Because the CSS3 specification hasn’t been finalized, you need to use CSS vendor prefixes to make sure there aren’t any conflicts among browsers. It can be difficult to remember what settings to use, but Prefixr takes care of that for you by adding vendor prefixes to your code.

CSS3 also offers the capability to create gradients. However, this can be time-consuming when working with code. TopStyle has created a tool that lets you quickly specify gradients for your layouts and edit those settings later.
Meanwhile, the Text Shadow Generator makes it easy to create text shadow effects without having to spend a lot of time editing code.

Finally, TopStyle 5 includes iWebKit 5, a framework designed to help you create your own iPhone, iPod Touch and iPad compatible website or Web application.

TopStyle 5 is available as a single user download for $79.95. Existing Topstyle 4 users can upgrade for $29.95.

WinkSite

WinkSite is a free mobile service that helps you monetize your site with Google AdSense and determine the best place to put ads. You can also create in-house ads for your sponsors. Winksite is free for up to five sites.

Winksite users can build a community and invite others to join. You can also create an ezine or guestbook and post surveys. You also have the capability to create custom ads from various sponsors, choose the pages they appear on and determine the frequency and placement of display. Supported file types include YouTube, DailyMotion, MetaCafe, Blip.TV video and FLV files.

Volusion

Volusion is an all-in-one ecommerce tool that lets you build a shopping cart and add it to your website. It will display on desktop, tablet and mobile versions of your site.

Volusion
Volusion is an all-in-one shopping cart system with a Website integrated into the layout. If you were to use a different approach, you would have to first build your website and then obtain, customize and add a shopping cart to your site after the fact. You can also list thousands of products on both the desktop and mobile versions of your site.

Volusion offers a free trial to get you up to speed, but you should know that the free trial goes only so far. If you want to test out the mobile aspect of the service, then you’ll need to pay. When you sign up for an account, you can choose to build a site yourself or work with a sales representative on the design process. It’s also worth noting that the service is proprietary—it runs on Volusion servers only and can’t be used with your own hosting.

Volusion pricing models range from $15 per month to $195 per month; enterprise pricing is available as well. Factors in determining price include data transfer, number of products used, bandwidth, social media integration and rating services.

GoMobi

The GoMobi content management system lets you build mobile websites that can be viewed on more than 6,000 mobile devices. You can also add code to the desktop version of your site so that a user on a mobile device who visits the desktop site is seamlessly redirected to the mobile interface.

GoMobi offers an easy-to-use interface with the complex programming happening behind the scenes. For example, to add your GPS coordinates, just enter the address, add that section to the mobile site and save your changes; the GPS feature appears automatically on the mobile interface and is ready to use. For designers who want more options, the interface can be customized through the use of templates. In addition, you can add custom CSS, HTML and JavaScript programming by linking those pages to the GoMobi interface. You can upload your own icons as well.

While GoMobi offers a numerous display options, it doesn’t support tables or JavaScript. One way around this is to use Dreamweaver to create custom mobile pages that plug into the GoMobi interface; this way, you can use JavaScript, tables and custom CSS in your mobile website. You can also host these custom pages wherever you want; this is worth knowing because GoMobi, like Volution, is proprietary and runs only on GoMobi servers.

To sign up for GoMobi, you must go through a reseller such as HostPapa. This option is inexpensive— $5.95 per month with HostPapa—but it also means you don’t have full access to the interface. If you want to have full control over the the domains, registration and the GoMobi sites, you need to become a reseller yourself. The fee for this will vary depending on the hosting provider, but it will give you full access to the GoMobi Site Builder, the option to regulate users on the interface and the ability to charge a hosting fee to your clients.

Mofuse

With Mofuse you can build a mobile version of your website yourself, hire Mofuse to do it or become a reseller of its services.

The look and feel of Mofuse resembles GoMobi and therefore makes it easy to understand and build a mobile site. Depending on the needs of your business, this could take as little as 20 minutes. Enter some basic information, launch a default template and start to build with it.

The Mofuse interface allows you to quickly enter information into the CMS that you can then add to the interface, making it easy for a designer to quickly build a mobile site.

The next step is the Mobile Site Menu. Here you add elements to the site, then edit the order of appearance, the look and feel, CSS attributes, colors, monetization, analytics, social media integration and more.

As with other mobile programs, you can create code after the fact and insert it into the desktop site. If someone comes to your desktop site from a mobile device, the code detects that and seamlessly redirects the user to the mobile interface.

Mofuse offers a free 14-day trial. Its price points vary depending on the number of monthly views and the building blocks you need. (These range from RSS feeds to weather widgets.) The JumpStart package, for examples, offers 10 elements, allows for 1,500 views and costs $7.95 per month. In contrast, the Ultimate package gives you unlimited elements, covers 1,500,000 views and costs $199.00 per month. However, the Ultimate package, as well as the $89-a-month Small Business package, lets you edit CSS.

You can also choose to become a reseller of the Mofuse services. Unlike GoMobi, though, there are no setup fees, nor is there a contract.

Tips to Add Social Media to Your Web Design

“Fewer people are experiencing your brand on your Website,” says Jeremy Dedic, the user experience practice leader at digital agency Rightpoint.

“Many companies think of their Website as being the center of their online brand’s universe. But more and more consumers use social media sites as a starting point for accessing information about products and promotions, gathering customer feedback, voicing opinions and seeking customer service,” he says.

Web pages, Internet pages

Indeed, some brands have done away with traditional Websites all together, and instead are using some combination of Facebook, Google+, YouTube, Twitter and Pinterest to get their message out.

Should you ditch your Website? Not necessarily. But if you want your Web or ecommerce site to truly engage and convert visitors, you should take some lessons from–if not fully embrace–the popular social media sites.

Following are six simple ways to incorporate social media into your Web design and strategy.

1. Let Customers Know What Social Media Sites You’re On

“Make sure visitors [to your Website] are able to see the social networks you are on and can socially share your products and content,” says Erica Tevis, the owner of LittleThingsFavors.com, an online wedding ecommerce site, and LittleThingsBaby.com.

As for where to place social media icons (for Facebook, Twitter, Google+, Pinterest, YouTube, etc.), “a good rule of thumb is that the more visible your social buttons are, the more users will interact with them,” says Jessie Jenkins, social media and content specialist at Thrive Internet Marketing.
‘Follow’ icons should be included within the header/footer of your Website, preferably every page, as your social media profiles are an important source of information to users and an easy way to stay connected.” Similarly, Jenkins says, include “‘share’ and ‘like’ icons on every blog post, as well as any Web pages that possess valuable, share-worthy information.”

Also, include a call to action. “Ask your Web visitors to ‘like’ your Facebook page, ‘follow’ your brand on Twitter, or ‘Join the discussion’ on LinkedIn,” says Alessandra Ceresa, director of Marketing and Social Network Management at GreenRope, a developer of business marketing software. Why? “Everyone has social icons on their Websites these days,” she says. But people are more inclined to click on them if you tell them to. In addition, it’s important to “design your social media icons to match the style and feel of your Website. These details catch the eye of the viewer, making it more likely that they will click on your social links.”

2. Allow Social Logins to Make It Easier to Connect With You

With social logins, “now sites don’t have to set up their own individual login unless they want to, but they can have their visitors login with a Facebook or Twitter account,” says John Roa, the CEO of ÄKTA, a product design studio specializing in user experience. “This allows sites to create an internal community–and can be a great opportunity for organizations to share specialized content and connect with their users.”

Save Big on Amazon Products Now Through 11/28 – Deal Alert
Moreover, giving people “the option to register/login via Facebook, Twitter, etc. instead of filling out forms shortens the registration process, which tends to lead to an increase in the conversation rate for user registrations,” says Adam Kirkwood, designer/developer, Viralheat, a social media management, publishing and engagement service.

3. Make Your Web Design Social Media Friendly

“Companies and organizations should design Websites, from code to content to commerce, in ways that complement the social media user experience, and vice versa,” says Dino Baskovic, a digital marketing consultant.

For example, on many homepages, “static content has largely been replaced with variable content that feeds from various sources, such as social media feeds, blog feeds, category driven areas of the site, news feeds, etc.,” notes Brian Compton, creative director, Lewis PR. “As a result, homepage layouts–such as this one for Google Ventures–have changed to include somewhat modular panels that can house any given type of variable (feed) content.”

Adds David Carrillo, manager, Earned Media, The Search Agency: “Implementing Facebook Open Graph and Twitter cards on a Website is the best way to control the presentation of your Website on social networks. And it’s a lot easier to implement from the beginning than to have to go back once the site is already built out.”
4. Make Content Shareable

“What good is it if a consumer or prospect finds something they like but it’s too difficult to ‘like’ it or ‘tweet’ it [or ‘pin’ it] right from that page?” asks Daniel K. Lobring, senior director of Public Relations at rEvolution, a sports marketing and media agency. “Embedding the ability to share on all pages of content is now essential.”

“Your product and content pages should have social sharing buttons right by the item picture, making it easier for your customers to instantly share your items,” says Tevis.

5. Incorporate Facebook Reviews Into Your Website.

To increase conversion rates on its Websites, Costa Rican Vacations & Panama Luxury Vacations integrated Facebook customer reviews.

“We created a ‘Testimonials’ tab on Facebook and asked customers after completing our survey if they’d be willing to share their feedback on Facebook,” says Casey Halloran, the cofounder and chief marketing officer. “It worked way better than we’d planned. We received 100 testimonials within four months.”

The only problem: “We got a few negative comments.” But even that, Halloran says, was not a bad thing as it helped the company improve its customer service, “which created more positive feedback, which improved our Website conversion and boosted sales.”

6. Embed YouTube Videos When Appropriate

“Many pages with quality YouTube videos rank better in search engines, especially if there are more video views,” says Brian Coughlin, an SEO specialist at OpticsPlanet.com. “Videos also increase a visitor’s time on page and improve conversion rates.”

The bottom line regarding Web design and social media: “It no longer makes sense to create a Website if it’s not going to be integrated [with your] social networks,” says Marko Z. Muellner, vice president of Marketing, ShopIgniter. “Not only do you increase the challenge of driving awareness and traffic [when you ignore social media], you eliminate the potential for sharing and earned amplification.

“Website designers have become great strategic anthropologists, understanding how and why people use their sites while keeping focused on business needs,” he says. “Now they must understand how their target audiences use social media so that they can incorporate liking, sharing, commenting, pinning, etc. in new ways that meet expectations and surprise and delight.”