Monthly Archives: January 2017

Learn More About 6 CSS Tools

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

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.

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
TopStyle 5 is available as a single-user download for $79.95. Existing Topstyle 4 users can upgrade for $29.95.

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.

Rapid CSS Editor New From Template

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.

Ads by Kiosked
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.

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.

CSS3 Menu Interface
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.

Tips To Optimise Image For Website

As WordPress web designers, one of the biggest challenges we see when handing over a new website to our clients is getting them to understand how to optimise their images for their website or blog. Below is a step by step video tutorial that demonstrates how to optimise your images so you can work them into your new content without compromising page load time or server space.

SUITABLE IMAGE EDITING PROGRAMS
The most commonly used and probably the best programs to use for saving your images for your website are

1 – Photoshop: You no longer have to pay a high price tag for this program anymore as it’s available for a reasonable monthly subscription fee and you can download it to more than once computer at time. It’s compatible with Mac and PC.

2 – Gimp: This is a widely used open source program which is a fantastic for editing images and optimising images for the web, you will also need to install the save for web plugin

Easy Steps to Add Social Media to Web Design

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

social media share buttons
“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.”