All About jQuery For Your Web Design

Bringing together HTML5 and CSS, the jQuery JavaScript library greatly eases the pains of Web application development. Learn how using jQuery can improve load time, SEO and multimedia on your website. And did we mention it’s free?
The uber-popular JavaScript library known as jQuery makes everything from eye-catching menus to advanced effects much simpler than ever before. It’s being used by some of the biggest and smallest names on the Web alike—Google, Dell, Netflix and NBC, to name a few, use jQuery to create some pretty amazing content. Why, you may ask? Well, it’s free, it’s open source and it lets developers do more in less time. Those seem like some pretty compelling reasons. But wait. There’s more.

Based on the manipulation of the HTML Document Object Model (DOM) and designed to simplify the client-side scripting of HTML, jQuery incorporates parts of HTML and CSS. Thousands of companies are on the jQuery bandwagon—and your company should be, too.

Let’s look at why jQuery is making such an impact on the enterprise level.

1. jQuery Promotes Simplicity.

Developers find jQuery intuitive and easy to learn—this library is built on shorter, simpler code, after all. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.

In addition, developers don’t have to be experts in programming or Web design to create great styles for your site. Any developer who has spent hours coding and testing CSS files will surely appreciate the simple implementation that jQuery brings to the table. There’s also a set of robust jQuery UI components that developers can plug into their websites.

2. jQuery Elements Display Even When JavaScript is Disabled.

If Adobe Flash isn’t installed on any given browser, certain parts of the page may render incorrectly, if they render at all. This is not only unpleasant for the user; it forces developers to spend extra time “coding” for the browsers that lack the Flash plug-in, which adds to development time.

Not so with jQuery. Manipulating the HTML DOM has become the most widely accepted practice of manipulating a Web page so content will be rendered even if JavaScript is disabled in the browser. Since the HTML DOM is always present, there’s no more worrying about browser settings either.
Furthermore, developing using jQuery can reduce instances of HelpDesk tickets. Your helpdesk will appreciate that your developers are coding proactively to avoid dreaded “browser crashes.”

3. jQuery Easily Integrates With the Visual Studio IDE.

NuGet is a Visual Studio extension that makes it easy to add, remove and update libraries and tools in Visual Studio projects that use the .NET Framework. NuGet has been around for years, and it’s a trusted source for developers to exchange and develop packages for Microsoft Visual Studio.

Visual Studio 2010 supports the integration of the jQuery library via the “Manage NuGet Packages” dialog box. This activates the Intellisense feature of Visual Studio, which gives the developer immediate access to jQuery methods and syntax without having to leave code view to do research. There isn’t a better tool to work in a Microsoft-based .NET environment.

In general, most .NET developers use Visual Studio and are familiar with NuGet. This is part of the reason why jQuery’s popularity continues to grow with .NET developers. With the addition of the jQuery mobile theme for Windows, you now have all the development benefits of the jQuery library available for the Windows Phone platform.

Microsoft is showing that it’s serious about HTML5, which includes a lot of jQuery elements, by promoting the use of jQuery libraries that the HTML5 crowd has adopted. Microsoft is encouraging the use of jQuery—not only in mobile development but also in new Metro-style UI apps.

4. jQuery Makes Animated Applications Just Like Flash.

Flash developers are not cheap. Developing in Flash requires a huge learning curve; for the average developer, it can take years of practice to be able to create the movie-like creations that made Flash famous. On the other hand, jQuery is free and requires only the knowledge of JavaScript and HTML.

Let’s say you can afford your software and your Flash developer. He or she still has to code for browsers and platforms that don’t support Flash and for audiences that will not be able to view your Flash content. This is one of the biggest drawbacks of building a Flash-only website—and one of the biggest advantages of building in HTML 5.

Meanwhile, jQuery uses a combination of CSS, HTML, JavaScript and Ajax. These are all markup-based technologies that are meant to work well together. This means you can apply an optimization strategy to your site without having to make special adjustments for technologies such as Flash. Bottom line: you can achieve great-looking effects that will keep your audience engaged.

For interesting examples of the kind of animation that can be achieved using HTML5 and jQuery, check out the boostinspiration.com feature HTML5 Websites: 10 Flash Killing Examples.

5. jQuery Pages Load Faster.

Google and other search engines using page load time as one of the many factors affecting SEO. (More on that later.) For this, and many other, reasons, every developer should strive to make code as light and concise as possible.

The best way to do this is to reduce the size of your code. If your site is coded with an HTML and CSS base, you can easily make uniform adjustments to your code that will reduce the size. Like CSS, jQuery files are generally stored separately from the Web page itself. This lets developers make modifications across the entire site through one central repository instead of search through folder structures. This is a core benefit of CSS coding—and it is a proven success.

In addition, jQuery gives you the option of loading Div tags only when you need them. If you are taking measures to improve the speed of your website, then you may consider loading only the necessary Div tags needed for your page load event. This way, you can display only what a user needs to see right away and have the rest of your division elements load as they are needed.

6. jQuery Can Be SEO Friendly.

You may have the most appealing site, but is it worth it if you sacrifice style for SEO? The way you code your site greatly affects the way it can be found in Google, Bing and other search engines.

As noted, jQuery can be optimized for search engines, and there are a lot of plug-ins available to aid developers in this task. Embedding your jQuery elements using unordered lists is an SEO friendly practice that works well.

For example— < UL >Render your jQuery output here< /UL >

The unordered list is a classic HTML tag that has been around for years—search engines will pick up or recognize < UL > tags much faster than a custom element or tag—and will still be utilized in HTML5.

Another SEO advantage of the HTML5-jQuery combo that’s worth mentioning is that animations can be loaded with keywords that can be read by search engines.

Why You Need jQuery

Let’s recap some of the advantages to using jQuery in your next Web development project.

The price is right. The jQuery library is free.
It’s light. Since jQuery pushes content to the client, it therefore reduces the wait time for server response. Plus, it’s smaller than Flash, so it results in smoother playbacks and less errors.
It works anywhere. HTML5 is cross-browser compatible—it will work on any browser, mobile phone or tablet, and even on Apple devices.
There’s a low learning curve. Since it’s based on plain old JavaScript, developers can learn jQuery fast.
Finally, jQuery is SEO friendly and CSS3 compliant.

In the future, your company will have to deliver content to a variety of different platforms, including desktops, tablets and smartphones, not to mention the advent of smart TVs and other connected devices. The 1-2 punch of HTML5 and jQuery is one of the best solutions for this type of development.

Since jQuery is a major component of HTML5, it is worth the time, money and effort for your developers to learn jQuery now. This library can deliver stunning effects with little coding—and, with more and more HTML5 integration, it will be a huge part of the future of Web development. If your goal is to build a site or Web app that is engaging and interactive, then jQuery is a necessary tool for your toolbox.

Add Social Media to Your Web Design With These Simple Ways

Web designers, social media experts and marketers discuss the impact of social media on Web design and offer tips on how you can integrate the two to reach more customers and prospects.
“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.

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.”

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.”

Build Websites Using Responsive Design With These 7 Tools

As smartphone and tablet use continues to grow, it’s increasingly important for your business website to look good on a small screen. These seven tools will help you build a fully functional site for phone, tablet and traditional desktop devices.
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.

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.

Let’s say you have several horizontal boxes on the screen, each at a fixed size. As you decrease the width of the workspace, the box on the right will begin to move to the edge of the layout. If you keep reducing the width, the box will eventually drop below the box on the left. This is a time-saving feature when scaling a design.

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 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.

Build a Better Website With CSS Tools

Version 3 of Cascading Style Sheets give website designers more control over page layout and page elements. If you plan to build (or rebuild) your small business website using CSS, these six applications are worth a look.
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.

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.
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.
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.
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.

Easy Tips for Improving Your Web Design

How your website is laid out, what colors, fonts and images you use (or don’t use) can mean the difference between success (low bounce and exit rates, high conversion) and failure (high abandonment, low sales).
Want to ensure that visitors will exit your website almost immediately after landing there? Be sure to make it difficult for them to find what it is they are looking for. Want to get people to stay on your website longer and click on or buy stuff? Follow these some Web design tips.

1. Have a polished, professional logo–and link it to your home page. “Your logo is an important part of your brand, so make sure it’s located prominently on your site,” says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. “Use a high-resolution image and feature it in the upper left corner of each of your pages,” she advises. “Also, it’s a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it.”

2.Use intuitive navigation. “Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site,” says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide “secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar.”

Why is intuitive navigation so important? “Confusing navigation layouts will result in people quitting a page rather than trying to figure it out,” Gatti says. So instead of putting links to less important pages–that detract from your call to action or primary information–at the top of your home or landing pages, put “less important links or pieces of information at the bottom of a page in the footer.”

3. Get rid of clutter. “It’s very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options,” explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.

To keep visitors on your site, “make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor’s eyes away from the most important part of the page.” To further keep clutter down on landing pages, “consider limiting the links and options in the header and footer to narrow the focus even further,” he says.

Another tip to streamlining pages: “Keep paragraphs short,” says Ian Lurie, CEO of internet marketing company Portent, Inc. “On most Web sites, a single paragraph should be no more than five to six lines.”

4. Give visitors breathing room. “Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer,” says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.

“Controlling white space through layout will keep users focused on the content and control user flow,” adds Paul Novoa, founder and CEO at Novoa Media. “With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website.”

5. Use color strategically. Using “a mostly neutral color palette can help your site project an elegant, clean and modern appearance,” says Mark Hoben, the head of Web design at Egencia, the business travel division of the Expedia group, who is also a believer in using color wisely. “Employing small dashes of color–for headlines or key graphics–helps guide visitors to your most important content,” he explains.

It is also important to use a color palette that complements your logo and is consistent with your other marketing materials.

6. Invest in good, professional photography. “Website visitors can sniff out generic photos in a second–and they’ll be left with a generic impression of your company,” warns Zane Schwarzlose, community relations director, Fahrenheit Marketing. “Your company isn’t generic. So show your visitors that by investing in professional photography.”

“We strongly recommend that our clients invest in professional photography or purchase professional stock photos,” says Gatti. Good photographs “draw the eye, providing an emotional connection to the written content.” Poor quality photographs or photographs that have nothing to do with your message, on the other hand, are worse than having no photographs.

Bonus photography tip: “If you want to draw attention to a particular piece of content or a signup button, include a photo of a person looking at the content,” suggests Elie Khoury, cofounder and CEO of Woopra, which provides real-time customer and visitor analytics. “We are immediately drawn to faces of other humans–and when we see that face looking’ at something, our eyes are instinctively drawn there as well.”

7. Choose fonts that are easy to read across devices and browsers. When choosing fonts, keep in mind that people will be looking at your website not just on a laptop but on mobile devices. “Some large-scaled fonts may read well on [a computer monitor], but not scale or render well on mobile, losing the desired look and feel,” explains Novoa. So he advises using a universal font.

“Pick a typeface that can be easily read and size it no less than 11pt,” says Ethan Giffin, CEO, Groove Commerce. “If you’re using Web fonts, try to use no more than two font families in order to ensure fast load times,” he says.

“If you’re using a fixed-width design, use a font size that allows a maximum of 15 to 20 words per line,” adds Lurie. “If you’re using a fluid design, use a font size that allows 15 to 20 words per line at 900 to 1000 pixels wide.”

8. Design every page as a landing page. “Most websites have a design that assumes a user enters through the home page and navigates into the site,” says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. “The reality, though, is that the majority of visits for most sites begin on a page that is not the home page,” he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.

9. Respect the fold. When asked for their top design tips, almost all the Web designers CIO.com queried immediately said: Put your call to action in the upper portion of your website, along with your phone number and/or email address (if you want customers to call or email you). Regarding home page images, “I recommend going against full-width sliders and encourage sliders or set images that cover two-thirds of the width allowing for a contact form to be above the fold,” says Aaron Watters, director, Leadhub, a website design and SEO company.

10. Use responsive design–that automatically adapts to how the site is being viewed. “Rather than developing a site for each device, a responsive site is designed to adapt to the browser size,” making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.

“Every design decision is just a hypothesis,” adds Mike Johnson, director of User Experience at The Nerdery, an interactive production company. “User testing, A/B testing and simple analytics can help you continuously improve your designs [by providing] feedback from real people.”