Firebug Helping CSS Customization

Firebug Helping CSS Customization

What do you understand by CSS?

CSS files have CSS codes in it which helps in designing the style and appearance and theme of your web page. Typically CSS is the abbreviation for Cascading Style Sheets. It is used to make your web page more attractive and eye-catching with the support of Wild Apricot, a product of CSS. It is however used to define a certain level of heading or giving the site a new look or style.

Meaning of Firebug

Firefox is a vital tool for Firefox which is used to edit a WordPress theme. With the help of this you will be able to customize according to your need and requirement on a particular issue. It works in real time basis so any changes made to the site can be viewed in real time., However it can not support permanent changes. In order to make any changes you have to code the program in the notepad or in any text file.

Firebug is supported by Mozila’s Firefox which assist you in adding up the required element to your WordPress theme style sheet. It can be otherwise termed as a secret weapon in the hands of the web designer. Firebug measure and illustrate everything that you want for your web page such as offsets, padding, margins, and sizes etc. With the help of a Firebug You can debug, edit, monitor and regulate HTML, CSS, and JavaScript live documents in web pages.

Firebug Helps CSS Customization

In Firefox you will find a Firebug’s CSS tabs which guide you in changing your site on your web page as per your requirement. Apart from the changes listed down there if you need any other changes also, it will enable you to do so by implementing the same that you need to be in your page, known as customized changes.

The cascade gives you a standard set format or guideline to manage changes to your designed page. You can take Firebug as a rule book supported by Firefox that cascade to effect the element of style. It knows better whether a link should show a black or blue color. Firebug gives you a lot of suggested options as well as assist you in picking the best option to customize the design of your page. It is equipped with many back links. For each element of style a design it has certain rules and stored properties to be followed. The rules are however attached to the application through backlinks therefore it lessens your worry. You do not have to wander here and there for making any changes. What exactly you have to do is that just simply go to the link and give an easy click. It will take you to the source and apply the changes to your document.

The below are some important aspects as how Firebug assists CSS customization.

Showing images, colors, and fonts:

As we all know the CSS tab have a wide range of selection suggestion to give your web page a new attractive look. So when you drag your mouse near to gradients, colors, font or images it will give you a small tool-tip previewing a detail sheet for example the font preview will give you a list of different styles of text and many more.

Everything at a click:

Editing CSS is now just like a child’s play. By Clicking the CSS property you will be immediately encountered with a little text editor box which will help you to apply changes in no time to your web page. To go to the next property you can use the tab button while to cancel any changes made to the document the escape key can be used.

Managing text and numeric:

It is a good time saving technique as we all know because it supports Autocomplete which takes text automatically without being typed in the page but what in case of numeric ? Yes, it also supports numbers to line up perfectly just by increasing or decreasing the number by one. Always use up and down arrow keys to edit the numbers. You will be landing up with minimal mistakes.

Sharpen your vocabulary

CSS will also help you in learning and managing your vocabulary. It has a CSS keyword complete dictionary with a wide selection range of vocabulary in its memory to refer to. Always make sure to use the up and down arrow key to make changes or to get select a word from the alphabetical order suggestion list.

Effective for all style sheets

No doubt styles and changes can be updated using HTML code but that is for a single web page document only. If you need to give the same effect to all the pages in your web document then you have to do it times and again, however with the help of CSS tab you will be able to make changes to all the pages of the web page simultaneously.

Source Live edits

Firebug support realtime processing so it works on live objects, for editing also it can do directly without disturbing the source code but in CSS the user has to edit the source code first in order to make the changes in the main document.…

Pin it to Win It: Use Pinterest to Promote Your Work & Get Inspired

Pin it to Win It: Use Pinterest to Promote Your Work & Get Inspired

Building a website and marketing an online small business is a team-effort, from acquiring the best Web hosting services and operational software to marketing its content and designing an attractive site. Once a business has decided on a premium Web hosting provider, such as HostGator, and before they integrate software like an address validator from QAS for business efficiency, a business needs an attractive site that looks good really good. That’s where you, the creatively talented Web design professional, enters the picture. Businesses depend on you to create a visually appealing website that will draw in visitors and provide a memorable user experience, which means you need to be spot-on with your craft. As a freelancer, you’re probably staying competitive and up-to-date on the evolving trends by networking, connecting and maximizing available tools.

Is Pinterest in your repertoire of tools?

Pinteresting

Before you dismiss Pinterest as a women’s website for pinning DIY crafts and fashionable outfits, keep in mind Pinterest has had 2,702.2 percent increase of unique visitors total since May 2011, according to the digital advertising agency Modea’s “Very Pinteresting” infographic. “Pinning” is significantly growing as a way to bookmark, share and promote all types of content, including innovative design inspiration and a marketable work sample portfolio that will help you land that next gig.

Stay relevant and visible on the Web using Pinterest for the following reasons:

Promote Web Design Portfolio

The more you promote your best work on social-sharing digital spaces the better. Pinterest has grown as a creative social and marketing space for major brands and small businesses that innovatively pin service and product-related images. If you already maintain a presence on creative social networking sites, such as Dribble and LoveDsn, then expand your outreach by pinning premium work to Pinterest boards. An image of your work has the potential to be re-pinned, go “viral” and direct traffic back to your personal website or blog.

Stay Motivated Get Inspired

Much is to be discovered on Pinterest, even for design-savvy professionals who are always on the lookout for new perspectives and fresh ideas. To collect images that motivate you professionally or creatively speak to you, create boards in a variety of categories. Search for inspirational pins by using the Pinterest search bar for the following types of boards recommended by DesignFloat.com:

  • HTML5, CSS3 and jQuery boards
  • WordPress
  • Web Design Infographics
  • Web Layouts
  • User Interface
  • Vector graphics, illustrations and templates

While re-pinning images and graphics, include SEO-friendly words in your pin description (and board title) for optimization. Pinners will be able to search and find your design-related boards, including your portfolio board!

Connect With Other Creatives

Pinterest is a virtual, image-focused Pandora’s box full of ideas, visions and talent to explore and discover. As you expand and brand your Pinterest page, you’ll connect with other pinners in your industry who share your interests and goals. You can start to follow boards and pinners of other designers, which will build and grow your Web and social networking presence. Upload original pins from your personal blog or professional website. People who click on your pin to re-share can learn about your blog. Also, by making your website “pinnable,” site visitors can pin your images, which further promotes your work.

Building a website and marketing an online small business is a team-effort, from acquiring the best Web hosting services and operational software to marketing its content and designing an attractive site. Once a business has decided on a premium Web hosting provider, such as HostGator, and before they integrate software like an address validator from QAS for business efficiency, a business needs an attractive site that looks good really good. That’s where you, the creatively talented Web design professional, enters the picture. Businesses depend on you to create a visually appealing website that will draw in visitors and provide a memorable user experience, which means you need to be spot-on with your craft. As a freelancer, you’re probably staying competitive and up-to-date on the evolving trends by networking, connecting and maximizing available tools.

Is Pinterest in your repertoire of tools?

Pinteresting

Before you dismiss Pinterest as a women’s website for pinning DIY crafts and fashionable outfits, keep in mind Pinterest has had 2,702.2 percent increase of unique visitors total since May 2011, according to the digital advertising agency Modea’s “Very Pinteresting” infographic. “Pinning” is significantly growing as a way to bookmark, share and promote all types of content, including innovative design inspiration and a marketable work sample portfolio that will help you land that next gig.

Stay relevant and visible on the Web using Pinterest for the following reasons:

Promote Web Design Portfolio

The more you promote your best work on social-sharing digital spaces the better. Pinterest has grown as a creative social and marketing space for major brands and small businesses that innovatively pin service and product-related images. If you already maintain a presence on creative social networking sites, such as Dribble and LoveDsn, then expand your outreach by pinning premium work to Pinterest boards. An image of your work has the potential to be re-pinned, go “viral” and direct traffic back to your personal website or blog.

Stay Motivated Get Inspired

Much is to be discovered on Pinterest, even for design-savvy professionals who are always on the lookout for new perspectives and fresh ideas. To collect images that motivate you professionally or creatively speak to you, create boards in a variety of categories. Search for inspirational pins by using the Pinterest search bar for the following types of boards recommended by DesignFloat.com:

  • HTML5, CSS3 and jQuery boards
  • WordPress
  • Web Design Infographics
  • Web Layouts
  • User Interface
  • Vector graphics, illustrations and templates

While re-pinning images and graphics, include SEO-friendly words in your pin description (and board title) for optimization. Pinners will be able to search and find your design-related boards, including your portfolio board!

Connect With Other Creatives

Pinterest is a virtual, image-focused Pandora’s box full of ideas, visions and talent to explore and discover. As you expand and brand your Pinterest page, you’ll connect with other pinners in your industry who share your interests and goals. You can start to follow boards and pinners of other designers, which will build and grow your Web and social networking presence. Upload original pins from your personal blog or professional website. People who click on your pin to re-share can learn about your blog. Also, by making your website “pinnable,” site visitors can pin your images, which further promotes your work.…

The Secret of A Successful Website: 5 Worthwhile Design Features Blog

The Secret of A Successful Website: 5 Worthwhile Design Features Blog

The success of any website depends upon a lot of factors. One of them is web design. The way a site is designed, says a lot about its success. Web designers have hundreds of options to design their websites. For instance, they can use a number of design elements alone to enhance the websites and take it to a different level altogether. Let us take a look at some of the key design features which make a website successful.

Content Management System

Having a CMS is one of the most popular web design feature these days. It is what helps the publishing, editing and modification of content. There is a number of CMS software such as WordPress, Drupal and JOOMLA among others that make it easy for designers to manage content on their sites.

The best part of a CMS is that anyone with even the slightest knowledge of the system can handle the content. The designer will do the job and hand over the system to the clients and it is they who will manage the content with ease.

Automatic Email

Okay, this is not really a secret feature, but you will be amazed to note that a number of websites actually don’t have this feature. I have seen many websites giving it a miss. An automatic email responder is in fact an immensely useful tool for all websites, especially those related to business/eCommerce.

The benefits are obvious. For instance, it responds to potential customers in real time when they take a call-to-action. Suppose you have an eCommerce site. So, when a client places an order and confirms it, they immediately get an email confirming the order with all the order details. This gives the shopper a sense of security and satisfaction that their order was successfully placed. This in turn will increase the conversion ratio of the site.

Social Media

Websites with a social media presence are more likely to be successful than their counterparts. What designers do is integrate social media with the main site. And they can do it in many ways. For instance, they can place a row of buttons of famous social media sites such as – Twitter, Google+, Facebook, Stumble Upon, Pinterest, Digg and others in a banner form at the bottom of each web page.

Alternatively, they can use a thin vertical banner with the same buttons which is constant for all the web pages. Just imagine the impact this will have on the page rank of your site on search engines!

Interactive Design

Go for an interactive web design. This will allow you to be as creative as you want. You can use Flash or HTML 5 for this purpose. For instance, you can use some interactive presentations or intros in the Landing page of your site. Or you can get really creative and design interactive Flash banners on your home page displaying your products and services. Just let your creativity flow and design a site for your end-uses with interactive elements.

Most web designers these days make it a point to use the above mentioned design features on their websites in order to make it a success. You too can try them out on your websites and see the change.…

Login into Joomla Admin Panel

Login into Joomla Admin Panel

What URL is used to log into the admin panel?

Live website: If your joomla site is live, then the URL to log into the admin panel would be: 

http://www.yourdomain.com/administrator

Live website in a folder: If your Joomla install is in a folder on the hosting account, you would login like this:

http://www.yourdomain.com/foldername/administrator

It’s important that the word administrator be all lower case, and the name of your folder be the exact case of the folder on the server.

Not-live website: If your hosting account does not point to a live website, the Joomla administrator may look something like this:

http://www.servername.com/~username/administrator
or http://00.000.000.000/~username/administrator where 00.000.000.000 is the IP address of the server. 

If your site is not live and you are not sure what URL to use, contact technical support for your Joomla hosting company.

How can you tell if your site is live?

If your site is live, you would have done one of two things when you set up your hosting account:

1) If you purchased a URL (www.yourdomain.com) when you created your hosting account, then you are set up with a live URL.

2) If you had a URL then bought a hosting account, and followed the instructions to point your domain name servers (DNS) to the new hosting account, you have a live URL. This would have required you to log into the service where you bought the URL (such as GoDaddy.com).

If you put in a previously registered domain name when signing up for hosting, but did nothing with the DNS with those domain names, your account may be called by the name of the URL, but the URL is not live. A good way to tell is simply type in the URL of your domain. Does it take you to a parked page or your old site, or does it take you to a page on your new hosting account?

Is your hosting account not yet set up with a live URL?

In the case of a company like Rochen, you aren’t required to point the DNS for the URL to the server before using your new account. In the welcome email they send you, they give you the optional login for your account. Other hosting companies will likely do the same. For Rochen the Joomla admin login URL is:

http://servername.directrouter.com/~username/administrator

If your Joomla install is in a folder on the hosting account, you would login like this:

http://servername.directrouter.com/~username/folderName/administrator

Other hosting companies have a similar configuration for accessing yoru hosting account before you point a live URL at it.

Login into Joomla Admin Panel

Once you find the right login, you will see the Administrator Login panel.

Put in your username and password and press the Login button. You have now logged into the administrator side of your Joomla interface.…

The Top 6 Usability Mistakes that can take your Website Down Blog

The Top 6 Usability Mistakes that can take your Website Down Blog

Website visitors are some of the most impatient people on the planet. They don’t like waiting and they love sites that don’t take their time for granted. So, all websites, including your own, should just try and get the job done as quickly as possible. This is only possible by ensuring your website is able to meet the highest standards of usability. It’s important to understand here, that a high degree of usability is determined by how the users perceive the website’s user friendliness and not how you, as the website owner, will identify with it.

So, it’s important to avoid those cardinal mistakes that are going to bring the usability of the website crashing down. The popularity and success of your site is directly proportional to its usability and indirectly proportional to its non-usability

Let’ take a look at the usability disasters that need to be avoided at all costs.

Presenting Content through Pop-Ups

The idea for using pop-ups for presenting content is the product of a highly creative mind, but not a mind that values usability. Think about it? Just how many times have you opened a website and found that a popup blocker has prevented pop-ups from appearing on the screen and you need to turn it off, in order to view the pop-ups. Now, imagine the main content of your website, the single most important persuasive element on your site, appearing in a pop up. Doesn’t sound like a good idea, does it? Users are not going to appreciate the fact that in order to view site content, they need to de-active the popup blocker first.

Broken Permalinks

Another mistake is not getting rid of permalinks that aren’t taking your website visitors anywhere. This problem usually occurs if the structure of the website has been reorganized or it has been moved to another domain; and developers forget redirecting or getting rid of dead permalinks. In order to ensure that this mistake does not occur, astute developers make use of URL redirection, commonly known as ‘301 redirection’. The use of this technique enables a developer to redirect the users to the new page when users click on the dead permalink. The funny thing is, in spite of there being a solution to the problem of dead permalinks, developers still forget about them and users end up seeing a 404 error page when they click on these links. As can be imagined, it’s a big turn off and users prefer going to some other site that is better designed and less likely to waste their time.

Drop-Down Menus are Unwise

I know this one is going to make you sit up and take notice. With most websites making a no holds barred use of drop down menus, your surprise and disbelief is natural. But the reality is that developers only offer drop down menus because it helps save vertical space. They really aren’t worried about the usability aspect. They have conditioned website visitors into believing that they are a good idea and we accept them as such. But try and evaluate your own response to this menu when you are using it. Don’t you find it time consuming, don’t you get irritated by the fact that your mouse needs to precisely point to a name of the section or category that you want to visit. What’s more, don’t you feel frustrated if the length of the navigation item in the drop-down menu forces you to move the mouse horizontally? Don’t worry; quite a number of people feel this way, meaning such menus are definitely not usable. But, they still keep getting used.

It seems even designers have begun to believe that they are a good idea.

Cannot scan content

There is no beating good copy, if you want to make an impression on your website visitor. But, if you think that visitors are going to read everything that you have written on your site, you are wrong. As mentioned before, website visitors have very little patience and just go through the content in a cursory manner. They only look at the interesting parts of the content, and ignore the rest. So, the structure of your content must be such that they are able to scan it and separate the important parts from the insignificant ones. You can achieve this by highlighting the content that you think will elicit a positive response from your website’s visitors. Using larger fonts, headings, catchphrases, bullets and color contrasts can be a great of way of focusing attention on specific parts of the content. You can even think about using images next to the content to help it stand out. Not making your content scannable will only pull it down; this in turn will bring your website down.

Using inordinately bright images, that also blink

Say you desperately want a visitor to click on a certain image. What do you do, well there are plenty of things you can do, but what you mustn’t do is that you shouldn’t make it blink. All blinking images do is act as an irritant and distract the user from the website’s message. Users aren’t able to focus their attention on reading the text that is right next to the blinking images. Think about it for a second. Imagine you come across a site that has images, which blink constantly. What will be your reaction?….. Irritation. What’s more, such images will also distract you from going through the site properly and getting information that you need. This might result in you making a misinformed decision. You wouldn’t like that would you?  The ground rule is that blinking images must be avoided at all costs in websites and in the event that they are absolutely necessary; they must be used in moderation. Otherwise say goodbye to the usability of the website.

Ignoring Web Design Conventions

Surprisingly, even the best web designers can be accused of giving full vent to their imagination in the form of reworking existing conventions to enhance the website’s creative quotient. This is a cardinal mistake as its only conventions that help improve the user experience of a site. Website visitors have come to expect that the logo will usually be found on the top left corner; while search will be available on the top right, clickable buttons will have subtle bevels and so on and so forth. Your website design needs to cater to these preconceptions otherwise visitors are going to be disappointed. Yes, there is no beating original design, but it is able to accomplish the same, within the boundaries of widely accepted and expected designing conventions. It’s ok for your clickable links to be blue as is the norm, because a clickable link with a red underline might just be construed wrongly by the user.

I will be honest with you, there is nothing like a top 6 or top ten usability mistakes. Each mistake is as detrimental to the usability of the website as the other. But let me try and explain this by referring to the classic line from George Orwell’s “ Animal Farm” –  All animals are equal, but some animals are more equal than others”; no mistake is good, but some are worse than others.  Avoiding these mistakes is an absolute must if you don’t want a website that is a disaster when it comes to usability.…

8 Smart Ways to Increase Conversion Rates for Your Websites

8 Smart Ways to Increase Conversion Rates for Your Websites

Though many of us my be priding in the fact that we have some of the best web designs, when it comes to actual conversion from such websites, the same may be much lower than what you may expect and this could in turn impact your revenues without your actually realizing the same. These things happen because of simple mistakes that are not so very difficult to fix and rectify. Once you do it you certainly can have a big impact on the conversion rates which in turn will also positively impact your revenues. Let us over the next few lines try and find out about the common mistakes that we make which play a big role in killing your website conversion rates and leave you staring down a dark and deep tunnel.

  1. To begin with we should try and understand the importance and impact of the page fold more so when it is about attracting first time visitors. You will have to know that first time visitors will spend as little as five seconds looking at your first page and they will not bother too much about scrolling the page. Hence it would not be a good idea to have your call-to-actions or related contents below the page fold. This is the area which the visitors can see without scrolling and hence this will increase chances of the visitors not being able to find out what they are looking for.

This can be avoided by using the new browser size feature available with Google Analytics. This will help you to understand better as to which elements of your page can be seen above the fold in the common resolution sizes of screens. For e-commerce sites it would be not a bad idea to check the checkout button in the shopping cart located above the fold.

  1. Though your promotional banner may look cool in your website, you are inadvertently perhaps allowing the user to get distracted to such promotional banners instead of spending more time on the important information available in your page. Your call-to-actions and other such vital pieces of information may tend to get lost in the clutter of too many promotional banners. If you have animated images or images of people chances of your main website or web page information getting lost is all the more obvious.
  2. The importance of being unique and being able to think out of the box is very important as far as contemporary web designing is concerned. Being cool is very important. However in this objective you should not stray out of the line and give the usability design standards a go by. This could lead to your visitors being in a state of confusion which could make them move away from your website. This at the end of the day certainly will have a negative impact on your conversion rates. This can be avoided by using a website testing tool not only in the laboratory but also in a real life situation so that you will be able to gauge the mood of the customer and how they look at your website.
  3. Another common mistake that many of the website designers make is not to test the website in all the major browsers. There are many websites which do not function or have only limited functionalities in some browsers. This certainly will not augur well for your conversion and therefore should be carefully looked into. The problem is that even small and slight changes in one of the browser versions can lead to some major changes on conversion rates and visitor engagements.

So the safest way forward is to test the website on all major browsers such as Firefox, Internet Explorer, Safari and last but not the least on Google Chrome, which without any doubt is one of the most popular browsers.

  1. The influence of text on your website visitors is something that cannot be ignored under any circumstances. The text should be easily readable apart from being engaging. This is all the more important when you are attempting to convert your website visitors and achieve your conversion goals.

You have to bear in mind there is a difference between online reading and normal reading. In an online environment, they usually look for text that is of interest to them. Therefore it would be better to use short bullet points in your key pages. This makes scanning through the eyes an easy process and will eventually increase your conversion rates.

  1. When you are in the job of testing your website and its variations it is important to create as many variations as possible. Small and insignificant changes likes color or style may not have the desired impact on your visitors. This will again hurt your conversion goals and objectives.

It is therefore important for you to design a test variation that is totally and radically different from the other. It could involve changing the wording or the style element. This will increase your chances of coming out with a test version that has a better chance of winning and thereby aiding better conversion. The same logic applies to the job of designing new pages for the website. You should again think out of the box and completely differently at least for one variant. After follow up you can zero in on one particular version that has a better conversion chances.

  1. At the end of the day when you are designing a website it should be able to meet the main needs of the users and their use cases. However, instead of trying to come out with a website which tries to solve each and every need of the visitor, you should try and create as many versions as possible which will keep your visitors engaged for a longer period of time. The thought of creating a one-size-fits-all website may not be a good idea in many such situations.

You can perhaps do this by using many popular and leading testing tools which will help you to better target specific content to visitors who belong to key groups. A few such examples are repeat or new visitors. This will over a period of time will increase your conversion rates because the visitor finds it very engaging and relevant.

  1. Lastly, one big mistake that many website designers make especially when is about testing new designs is to go by the person who is the highest paid in the organization. This is wrong because such persons try to influence the design by pushing something which they think is good instead of trying and understanding what exactly the visitors want. This is a sure shot way to committing suicide and should be avoided at all costs.

A good way to avoid it is to go in for a testing using web analytics tools and also taking feedback from visitors through usability tools and surveys. This approach will help you to come out with better tests and this will lead to better conversion rates.

Conclusion:

At the end of the day, you have to bear in mind that website designing is a complex and challenging job and needs to be thought through from as many angles as possible. The visitor is the kind and you should take all steps to satisfy him or her under all circumstances.…

What are Extensions?

What are Extensions?

Extensions are the general term for mini-programs, i.e. additional functionality, available to extend the basic functionality of the Joomla Core.

What is the Joomla Core?

The Joomla Core is the term used to describe the functionality that is available within Joomla when you first install it. As Joomla grows and evolves, the team developing it continues to expand the functionality that is available in the core program. When you install Extensions onto your Joomla site, you are customizing your site by extending the functionality that is available.

Extensions are classified into 3 types:

  • components
  • modules
  • plug-ins

How do I choose which Extensions I need?

Before you can choose your extensions, you need to determine the content required on your site. Once you have defined the content, then you can determine if groups of content will be better managed by an Extension. Section 3: Creating the Framework, gives an overview of how to define the content for your site.

 

There are over 6,000 Joomla extensions

Because Joomla is open source, Extensions are developed by literally hundreds of developers worldwide. At last count there were over 6,000 extensions in the Joomla Extension Directory.

Joomla Extension Directory

This directory provides a listing of all components, modules and plug-ins that have met the development standards for Joomla, and each extension is reviewed before it is added to the list. In addition, if there are complaints about an extension, it may be removed from the official Joomla extensions page.

In the listing of each extension, users are able to rate a component for its ease of use and whether it provides the functionality a user expected. This allows you to screen which extensions you use and lessen the amount of time you spend in development. See the sidebar for the extension categories listed in the Joomla Extensions Directory.

What if I cannot find an Extension for the functionality I need?

There are developers who specialize in creating custom extensions. They can take an existing extension and add on to it, or create one from scratch. In the instance where you need functionality that you cannot find within the Joomla Extension Directory, you can hire a Joomla developer to assist you.

To hire a developer, you can put a post in the online forum at Joomla.org, or you can search in Google for “freelance joomla developer” to find sites that list profiles of potential developers. We have found some great developers using the following sites:…

4 Essential Elementary Typography Tips for Beginners

4 Essential Elementary Typography Tips for Beginners

It is often said that letters are boring and text is static. Both neither tickle nor moves other senses apart from our eyes. But how to renovate the letters and the texts to make them interesting? As a beginner, does it sound complicated? Well, let me inform that, you can easily convert a boring text and letters to your advantage and achieve your goal. But how will you make these texts, mainly used to convey detail message use for the design function? Is that possible? Yes, it is possible through typography.

You must be well acquainted with the term typography. It is the technique to put texts and types in an orderly manner to make it visible, readable and appealing. In short, it is the art of graphically working with texts. So without wasting much time, let me help you with this art of playing with the texts and letters while designing websites.

Let us first begin with:

Creating Photoshop typographies:

To understand the whole concept you need to learn about a few Type tools in Photoshop that will help you to customize the types according to your choice.

Vertical Type tool:

This sub tool allows you to type text from top to bottom.

Horizontal Type tool:

This sub tool allows you to type from left to write.

Vertical mask tool:

This sub tool allows you to use your Type in picture background and enable you to type vertically in a mask.

Horizontal mask tool:

It is the same as the vertical tool mask except for the orientation of the type.

Therefore, the liberty to decide whether your texts will expand or shrink down horizontally or vertically will depend on the horizontal and vertical setting.

The legibility of letter and word spacing and line heights:

To keep your design relevant, you need to be mindful regarding the letter and work spacing. The white spacing between the lines of the type plays an important role in the readability of the web designing especially when there is a large chunk of text for the users to read.

Similarly, the spacing between the lines of text is also important. As far as spacing adjustment is concerned your type should use a line-height to about 140% for maximum readability.

The fount of Fonts:

There are 7 font categories in designing. Take a look at them:

Modern style:

They are produced digitally and do not have root traces on print fonts. They are commonly used for movies, events, shows and posters.

Example- Avengance, Bauhaus 93

Old style:

They are the parent fonts that are popularly known for their serifs with flag-like ending. They are composed of thin and thick parts and often used in designs which require formality, simplicity and credibility such as books and newspaper.

Example- Book Antiqua, Times New Roman

Ornaments:

They are based on pictures and symbols and used in logos and messages.

Example- symbol

Decorative:

They are thematic in nature and often used to imply any specific event or occasion. These fonts are often used in branding.

Example- dripping marker

Script:

They have ornaments and curves and are calligraphic in nature. They are commonly used in wedding and other formal occasion.

Example- ANGEL TEARS

Sans serif:

They have no flag like ends and are used in the main texts for print output and web texts.

Example- Calibri

Slabs:

They are wide fonts with slab serif- a thick horizontal ending positioned on the letters.

Example- Blackoak Std

Fonts provide you flexibility in your design. To present your writing in the best way possible, you need to choose the right font. However, the type of fonts chosen depends on the mood of the content and the design. Whatever fonts you may choose, make sure that the texts are readable.

The power of colors:

A website is identified by its presentation. It has been observed that the majority of the people remember a website by its color. Here is a list of a few colors you can apply while designing a website:

Use RED when you want to highlight any urgency

Used GREEN while highlighting relaxation

Use YELLOW when you intend to grab eye’s attention

Use BLUE to gain the trust of the site visitor

Use BLACK to highlight luxury

Use ORANGE for call to action or call to move

However, to keep the design simple use

Light background with dark text

Dark background with light text

Color contrast plays an important role to make your text and other elements in your site prominent.

Is your typography interactive?

There are few other elements that impact and interact with the Type on the web. To ensure that the typographical elements play nicely with the rest of the web group, you need to check with certain elements such as padding, navigation and margin. Therefore, if you design without considering the important elements that will successfully engage your typography than you run the risk of compromising its effectiveness.

There should be enough room for your typography to breathe and speak.

To implement all the important typographical factors, use the following tools for making your life as a designer easier. Utilizing the following tools will help you to stay ahead of the game-

Font stack builder is used to build CSS font-family

Typester, an online application for comparing fonts for the screen

EM calculator helps in making scalable and manageable CSS design

HTML Ipsum is used to type testing needs and suite your entire place holding.

Typography is everywhere in the web. Incorporating these basic elements will help you to engage your visitors, allow them to interact with your website and most importantly, will earn you appreciation as a beginner.…

3 Tips on making an income off your website

3 Tips on making an income off your website

Most of us would love to earn an income from our website, but don’t know where to start. In this article we’ll go through 3 ideas you can use to start making money from your website!

Banner Advertising

If your website is getting a reasonable amount of traffic, you can have ad spaces up on your site for people to pay to place their advert on your website. If you are getting 50,000 hits per month you can charge $50 per ad a month. The more visitors you get a month the more you can charge for your ad spaces.

Paid Content

If your content is interesting and beneficial to people you should consider having paid content on your website. By charging just a small amount you can start earning from your website.

If you decide to take this route you should have some free content as well as the paid.

Online Products

Consider selling some online products on your website, make sure people be interested in your products and will want to purchase them. You can sell e-books, tutorials or video lessons. Something that will benefit the visitor.…

Fixing Line Break Problems in Joomla Articles


One of the issues we’ve seen repeatedly in Joomla is a challenge with line breaks. What this means is you’re editing an article, and you cannot remove a line break that is there. Like the display conflict (what you’re editing doesn’t looking like your actual site page), this is one of the little annoyances we put up with because everything else in Joomla is so excellent.

How do you know if you have a line break issue?

You put your cursor after the line break, and you hit delete, and nothing happens. This tells you the system is being stubborn and won’t remove your line break.

How to add a line break:

There are three ways of adding a line break in text:

  1. Create a headline out of text
    If you highlight a portion of text and select a headline style from the format menu, you will create a line break before and after this text. Type that is in two different styles cannot reside on the same line.
  2. Hard Return
    Click your cursor when you want to create a line break, then hit the return button. This is called a hard return, which creates a new paragraph.
  3. Soft Return
    Click your cursor where you want a line break, hold down the shift key, and then hit return. This is called a soft return. If your template is set up to put spaces after paragraphs, you would want to use a soft return when you want there to be a line break but you don’t want the extra gap between the lines.

How to remove a stubborn line break:

  1. Close the article
    Save your article so it will close, then open it again and try to remove the line break.
  2. Delete the text and retype
    Highlight the text before and after your line break, hit delete, and retype your text.
  3. Go into the HTML code and delete the line break. 
  4. You would click the HTML icon  on the tool bar, and then search for the area where you are having the line break problem (use your browser’s find feature and type in a word or two of the text you are seeking).
  5. You will see <p> tags, which are hard returns or paragraph marks. You may also see <br /> tags, which are soft returns. Deleting these marks where you are having trouble should remove the line break.
  6. There may be other tags you don’t recognize that are creating the problem. All tags would be displayed between < > marks. If removing the <p> and <br /> tags doesn’t work, removing any other tags in the area may solve the problem.
  7. Remember that you can always cancel out of an article so the article will close without saving changes, so no worries about making a mistake.