Monthly Archives: September 2016

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