Category: Web design

Be it a small-scale or large-scale, every business has the dependency on an appealing website. Whether you want to convey a message or deal to sell products and services, a website bridges the gap lying between your business and potential customers. It would not be wrong to say that a web design holds a significant value in defining success or failure of any business.

If you are a newbie business owner, you might be wondering what this is all about. Don’t panic even  I have been through the same phase. This is the reason, I felt compelled to write this article. The objective here is to throw light on the critical aspects of website designing and its interrelations with success so that the upcoming businesses don’t lose out their potential edge in the modern competitive market.

Insights into the term Website Designing

Website Designing is often referred as a stream that pulls together the creative intuition and expert technical skills into an impressive layout.

And, the person(s) who knows how to make best of this stream keeping all the aesthetics into consideration is known as Designer(s). They possess a sharp eye for impacting online presentation along with a skilled ability of programming that helps them to execute designing.

With the use of extensive tools and visual messaging methodologies, designers help their clients to achieve their business goals within a specific timeframe. And, a précised analysis of target audience is a pre-requisite for them prior to working on any aspect of the design. In fact, it is the most critical consideration that draws a line of difference among businesses. The professionals who gain a basic understanding about the marketing principles like branding, merchandising, advertising etc. can turn out to be Design Experts of Digital Marketing.

To put it simple, we can say web designers are the creative individuals who create striking web pages and layouts.

Now, when you are aware with the most relevant designing terminologies, you might want to get a website for your business too. For this, you need to hire a designer at your end or outsource your design assignment from some reputed company in the town.

Whether you want to hire a designer in your team or get the design work done from some external source, it is quite important that you know the traits of a good web design. This knowledge is worth for both who want a new website and who want to redesign their existing website.

1. Logo ⇒

It is one of the most critical yet ignored aspects of the web design. A logo is often referred as the brand identifier. Think of any reputed name in the industry such as Apple, Microsoft, Blackberry, you can recognise such brands simply with their logo imprint. So, there is a need of a unique yet impressive logo that make people think of your brand every time they just have a glance of it. If you are not creative enough, you can tweak out some best ideas from numerous platforms available online. Do extensive of research work and you will surely realise the worth in the long-term.

2. Design Should Be Responsive ⇒

Responsiveness of a design deserves to be discussed prior any other aspect. It is more an indispensable aspect than just a need. The trend of responsive design has widespread strengthening its roots even in the websites existing since a long. The concept of responsive design can be understood better with the instance of chameleon that changes its colour according to the surroundings. Similarly, a design should possess expandability on the basis of the screen size it has been viewed upon. The design that lacks responsiveness tends to lose user attention much more quickly as everyone carries a different sized mobile device and wants to access or make searches on the go. Hence, make sure your business website design is responsive enough to make user experience smooth and happy.

3. Colour Combination and Theme ⇒

Infusing colours is more like infusing life; it should be done with utmost care. Decide on the colours keeping end-user in the mind. Gone is the time of too flashy colour trends, keep it simple as the users today prefer smart things wrapped up in simplicity. Even a theme comprising two colours are enough to create something out-of-the-ordinary. But, be sure to maintain consistency throughout the theme as this also impacts your brand value to a great extent. Hence, the look and feel of the website should be catchy.

4. Content Quality Should Never Be Understated ⇒

If you also follow the myth that only look matters, you are not on the right path. Once the user gets attracted with your brand’s first appearance, it is the content that compels him/her to stay on your website. Though the consistency in the theme has a vital role, you cannot ignore the content’s part to express or convey your business idea. You need to put a brief story about yourself, reflecting your business value and prospects in an effective manner. Here, it is important that you use crisp and unique content – be it is about elaborating about yourself or your products and services so that visitors get a reason to stick around.

5. Animations and Other Media ⇒

Ask designer about his strategy for integrating relevant media files- be it audio, video, images or other graphics. Representing content with relevant media is no doubt a great idea. But, don’t get rushed with the idea of including too much of anything as excess always worsens. Make sure each element is included aptly with the content (wherever required). In fact, it is a good idea to include all sort of media taking care of their proportion as too many heavy files together can make your website respond slower. Slower will be the page load time; higher will be the probability of losing potential customers.

6. Reachability to the Customers ⇒

Waiting is no more an option to the visitors due to the availability of alternatives. It is sensible to be attentive towards the contact details you are providing on your website. If any number or e-mail id does not exist, it’s better to remove it as it is not necessary that customer will try the other number. He or she can probably try another service provider once experiencing such disappointment.

7. Inappropriate Typography Can Become A Destructor ⇒

It is not-so-commonly discussed aspect, but again a highly impacting one. Imagine you have a decent web design, good quality content and relevant media files, but still you are not able to attract the target audience. What can be the reason? Bad Typography! Yes, it can be a reason as inadequate typography impacts the readability, which can ruin even the superior-quality content.

8. Quick Call-to-Actions ⇒

Every button that you provide on your website should work flawlessly. Think of it as a scenario where the user clicks on the button ‘know more’ of a product and gets redirected to the homepage. In fact, none of us likes to explore such erroneous websites. Provide visitors with properly functioning CTA buttons (for exploring, selecting, making a purchase or the cancellations) so that they will remember your website for the smooth functionality.

9. Website’s Optimisation over Search Engines ⇒

Having a full-fledged website that is not optimised over search engines is a sure-shot hit for the failure. With the proper techniques of SEO, you can improve your website’s interaction with the search engines and can rank on the top positions. This will help you reach the maximum of visitors organically, making your website more effective and productive. You can witness the impact through conversion rates.

Hope you have understood all the basic things and will make an informed choice now. Always remember – your web design is yours and your business’s outlook to the potential customers.

Sure, if you wanted to design a new webpage you could just use your own imagination as a source of inspiration. That does come with a few dangers, however. For example, you might find that what you think is cool isn’t what the mainstream think of as super-duper. In fact, there’s a good chance that you’ll end up running up against convention, which is what people expect.

It’s a much better idea, for that reason, to check out what other people are doing and take those elements that you think are most pertinent for your webpage and throw those up. The thing is, where do you see what other people are doing? Do you just surf at random and hope for the best?

That could work. You might run into some really wacky designs that way. At the same time, you’re going to find a lot of mediocre pages as well. And that’s just a waste of time. Instead, why not go and look at what the industry thinks are some of the biggest and the best? Then you’ll not only be aware of what is going on right now, but also what we’ll see happening in the days to come.

And then you’ll be ahead of the curve, which is a great place to be.

Awwwards

The website Awwwards always have to go on the top of any such list, as this is where the design community gives out prizes for creativity, design and inspiration on the internet. It’s a great source of inspiration, full of pages that do things just that bit differently.

Here you can see what is coming, which you can then incorporate into your webpage to make it look like you’re the genius that came up with it. After all, how many people actually look at these kinds of sites, right?

The Design Inspiration

These guys pride themselves on selecting web pages that do things differently and creatively. You’ll never see websites that just repeat the same old on The Design Inspiration. Instead, it’s all about designs that are left-field and different.

Now, you might not agree with their selection in all cases. Some might go too far for you. That, however, is not the point. You’re looking here to be inspired by things that really fit you and your audience. And though that might not be everything that’s being offered on this website, you’re sure to find some examples that fit like a glove.

SiteInspire

What really makes SiteInspire work is that they don’t just offer you inspiring websites, but they offer you all kinds of filters so that you can find the website that you really want to look for. In this way, they make sure that you don’t waste your time looking at, say, children’s websites when you’re trying to set something up for your plumbing business.

It’s also great that you can go straight to the website without having to pass through any intermediary pages, as that is going to save you time especially on those days where the internet is slow.

Pinterest

If you want to try something a little bit different, then look through pinterest. The great thing here is that you might find things that the snobs that do design find beneath their notice, but for you is exactly right and perfect.

That’s because pinterest is socially curated, with no single group of people in control. This has another advantage and that is that they can curate far more content then the other websites. This, aided with their great search system, where you can look at hundreds of pages at the same time, makes this a great one if you really want to explore alternative ideas.

Little Big Details

This one’s a little bit different from the rest. Here the idea is to give you insights into how you can build great user interfaces.

In this way, when you’ve selected the basic idea from the pages I outlined already, you can then decide how you’re going to put up the interface by looking at what Little Big Details has highlighted for you some of the great options out there, so that you can skip all the mistakes that you’re likely to make if you don’t have that much experience and move straight to the good stuff.

Of course, they don’t have any content for you. You’ll still have to work on that yourself, though there are plenty of services out there that can help. Personally I quite like essay republic, but you should really shop around.

Flickr

Another great website to get good ideas is Flickr. Why, you ask? Because it’s all about photos and photographers. Often, these types of people have some great creative insights that are right at the cutting edge of what’s going on out there.

The downside is that you can’t just see a page straightaway. Instead, you’ve got to drill down through a bunch of links to get to where they’re housing their content. That can be really annoying and time consuming and that’s why it goes way down on my list. Still, it’s on my list for a reason. So if you don’t find what you’re looking for on any of the other pages, go here.

Last words

If you want to design a webpage, take your time. A lot of the ideas that are being presented on these websites take a bit of time to digest. Sure, you’ll understand the superficial ideas well enough pretty quickly, but what it is really about is the underlying concepts.

Those take a few sessions to actually internalize. So, I’m hoping for your sake that your website doesn’t have to go up next week. Because then you can take the time to see what are the underlying elements that really make a website tick. And that will make it far more likely that your website is as cool and original as you’ll want it to be while still being functional and enjoyable to surf through.

Studies are showing how consumers are spending more time connecting to the Internet through mobile devices compared to desktop computers. This trend has already been taken into consideration by internet giants, opting them to advise that mobile-friendly websites are going to get more ranking points. This mobile-first index is an important shift in search engine optimization, and must really be taken into consideration by businesses as they maintain and develop their websites.

To help you in ensuring that you do not get left behind on this shift in website development, we will be sharing 6 effective ways on how to make your WordPress website mobile-friendly. The following tips can help you easily make your site significantly friendlier for mobile users.

#1. Images, CSS, and HTML optimization

There are basically two primary considerations in making your site mobile-friendly: designing your site to fit a smaller screen while keeping it visually delightful and making the most out of objects without causing performance issues on less capable devices – in short, it’s balancing user experience and site performance.

Images, an important element for any website, should be optimized for mobile. Of course, images should be smaller to ensure that it will look fine on a small screen. There are tools that can help compress images to a smaller file size. You should also control the use of images, and that you should remove photos that do not exactly add value to your pages. Remove unnecessary photos that could just weigh your website down. and Even then, the photos that will stay on the site should be lightweight. You should also consider that most users browsing through mobile would more often use cellular data, and it would cost them a huge amount of their data allocation if you retain a number of high-resolution images.

It’s also recommended that you compress the HTML and the CSS of your website in order to keep your page running smoothly on mobile. If not optimized for mobile, the page would have design and performance issues on handheld devices. Make sure that you tweak your settings so that everything works perfectly. It would be great if you make use of a trusty cashing plugin that can help you out.

#2. The Help of Responsive Plugins

There’s a wide range of plugins that can help improve your site’s functionality on mobile devices. Here are some plug-ins that you should consider using to improve your site’s mobile-responsiveness:

Any Mobile Theme Switcher

This plug-in helps provide themes for your mobile website that is different from what would appear on desktop web browsers. First, it detects whether the visitor is using a mobile device or not, and would alter the design to your desired theme.

Call Now Button

A straightforward plugin, it adds a mobile-integrated call button on your website, which can really capture the attention of mobile users. This is very helpful in raising customer call-ins for inquiries, setting appointments, or basically just to bring customers in touch with your business.

Cornerstone Page Builder

This plug-in provides a lot of ways to include various elements to your website.

Dynamic Widgets

It helps you manage widgets on mobile sites and allows you to choose for what pages on your site these widgets would appear so that the overall performance of your clients’ phone won’t be affected

Favicon by Real Favicon Generator

This makes your mobile site flexible to the screen size to make sure that it runs smoothly across various mobile devices.

Max Mega Menu

This plug-in manages the menu of your mobile website. This feature helps make your mobile site easy to navigate, considerably improving the experience of your site’s visitors.

Mobile app Plugin

If you want to easily transform your website into a mobile website or create mobile app out of your website, this is an excellent plug-in that you should consider using.

Smush Image Compression and Optimization

This keeps your photos looking great while keeping file size manageable, ensuring that your images would load quickly on mobile devices without compromising quality.

WordPress Mobile Pack

This plugin helps you come up with a great mobile website and has a number of themes that can help you set up your mobile website.

WP Touch

It ensures that visitors using mobile devices will be directed to your mobile site. Your mobile site would also adjust to the screen size of the device that being used.

Plugins are very helpful especially when keeping a mobile website smart. Make sure that you make use of decent plugins and that your site works smoothly.

#3. Pop-ups are a no!

While it is understandable that popups are marketing strategies, they must not lead to a bad user experience, especially on mobile sites. That is why these should be taken down for mobile websites. Popups and interstitials that cover the whole screen are already bothersome for desktop computers, but it is even worse if on mobile. Sites that make use of pop-ups and interstitials loses points from Google, so make sure that you avoid making use of these in your mobile website.

#4. The use of AMP (Accelerated Mobile Pages)

Google’s Accelerated Mobile Pages project makes mobile content load faster. Google sets optimization standards that greatly improve the loading speed of an optimized site. The fast loading, coupled with standardized formats, improve the customer experience to a great degree.

An “AMPed” site will surely be mobile-friendly the way Google wants a site to be. Furthermore, AMP websites are expected to rank higher in the results page. So, aim to have your website abide by AMP standards.

#5. Full-Fledged Mobile App Consideration

Earlier, a plugin that can help transform your site to an app has been discussed, which is vital because mobile apps are also evolving in a fast pace. There are mobile apps for various needs, and having a dedicated app for your site is a brilliant idea.

While some businesses only have websites, a number of businesses maintain both mobile website and mobile app. While doing the latter is an added challenge, it’s quite rewarding as the app version of websites are more engaging, and could help you improve the user experience of your customers without being limited by any web browser.

Mobile Friendly Test

Google has a mobile-friendly test which can help you assess which areas of your mobile website will need more work. You may also make use of Google Analytics which provides you with the ability to determine what kind of mobile devices your visitors use. This can help you prioritize as to what device you will need to optimize best.

Make sure to utilize this helpful tool to determine what you need to do to make your site mobile-friendly.

#6. True Shift in Search Rankings

With Google’s mobile-first index, being mobile friendly is a necessity for business that are engaged in websites. While the SEO is not revolving on only making your site mobile-friendly, it is a significant factor for ranking.

Our tips above can help you step up your mobile-friendliness game so make sure that you spend time in adding the above tips to your website management initiatives. SEO now heavily involves mobile-friendliness so make sure that you are not left behind.

Perhaps the best way to conclude this is that WordPress itself is finding ways to help WordPress sites more compatible for mobile. Your actions plus that of WordPress itself can work hand-in-hand to help you reach the desired goal in the search engine results pages.

What is hotlinking?

Pirates have long since stopped looking like Johnny Depp on an old fashioned ship.  The internet houses thieves everywhere.  Internet image piracy is known as “hotlinking” and it happens when a site unrelated to your own, links to an image or other resources, without permission, while still letting you host it on the world wide web.  Why is this bad?  When sites don’t host their own images, your bandwidth is drained by visitors who are not coming to your site.

You can check for hotlinking by looking at the source code in the developer tools on your internet browser.

Blocking the Pirates

Like most WordPress security solutions, all you need is a simple bit of .htaccess code to block outside sources from stealing your images, videos, pdfs, and other files.

First, using an FTP client navigate to your root folder and open your .htaccess file. (create one if you do not see an .htaccess file in your root directory.)

Second, copy and paste the below code into the .htaccess file. Make sure it goes above any existing rules or coding.

# STOP HOTLINKING

<IfModulemod_rewrite.c>

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?example\.com [NC]

RewriteRule\.(gif|jpe?g?|png)$ – [NC,F,L]

</IfModule>

After pasting the coding, you need to tailor the code to your specific site.

To do that, just replace the example.com with your domain. If your TLD is not .com but something else, make sure to change that. See an example below.

So, what does this code do?

It checks to see if the refer is not empty and then it determines if the refer is from your domain or not.

Finally, it checks to see if there is a request for the file types listed in the code.  In our base code, it checks for gifs, jpegs, and pngs.  This portion of the code can be altered to include any file type you want to protect from outside users. If there is a match for any of the mentioned criteria, the site stealing your resource displays a 403 Forbidden response.

Tailoring to Your Site

There are a few tweaks you need to make to the code we provided to make it work for your site.  As mentioned above, the most important change you need to make is changing the example domain to your domain name and the “top level” of your domain.  The top level is your .com, .net, .biz, etc.

This is the time you also want to add any file extensions to your coding.  For example, if you want to protect Zip files as well, you go to line five and add a forward slash followed by “.zip” into the appropriate section code.  After you have added all of your preferred extensions, save and upload the file to the server.

Checking to see if your new security measures work is easy.  All you have to do is refresh the page of the thieving website, and your browser should display a hotlink protection message.

Further customization

If you want to customize your security even further, there is a snippet of code that allows you to customize the response the pirate’s website provides when you block their hotlink.

To use this code, replace the above provided code you pasted into your .htaccess file with the code below.

# STOP HOTLINKING

<IfModulemod_rewrite.c>

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?example\.com [NC]

RewriteCond %{REQUEST_FILENAME} !hotlink.gif [NC]

RewriteRule\.(gif|jpe?g?|png)$ /hotlink.gif [NC,R,L]

</IfModule>

NOTE: do not paste under first code, but completely delete and replace it!

You still need to make the same customizations with the first code as you did with second one.  Change your domain name and top-level domain.  Change or add to the file extensions to include all types of resources you want to protect.  Finally, replace the part of the code that says “hotlink.gif” with the file name you want to use in response to your pirates.  Be sure to also include the link path to this file or image on the server.

You can use any image you want; it is a perfect opportunity to get creative, and maybe even redirect those visitors to your site instead!

That is all there is to it.  Choose your preferred code snippet and protect your resources from internet pirates.

Author: 

Emin is a Los Angeles-based web designer at Amberd Web Design Studio, on his free time he enjoys writing web design related tutorials, reading books and drawing.

Favicon stands for Favorite icon. It is the tiny image which represents your website in a browser’s favorite menu, tabs and wherever else it is represented visually. Even a small detail can make a big difference in how your website is seen. Having a favicon is good for gaining brand recognition and building trust with the visitors.

In this article we will show you how to include a favicon on your website. First we will talk about why you should add as favicon and then how to add one to your WordPress site.

Why to Add a Favicon to Your website?

A Favicon is part of your website’s identity and is good for user experience. Below are some of the reasons to use Favicon to your site:-

• Easy to identify in Web Browsers

A favicon helps your site to be more recognizable in web browsers. Generally users open more than one website in their browsers. If you have used a favicon in your site then it will help the users to identify your site among many other open tabs.

In the above image you can easily identify the tab for WordPrax site by the logo alone. You can also identify the other sites from their favicons. Otherwise you have to make an effort to read the beginning of the site. Clicking on every tab is certainly not the best option.

• Looks more Professional

If you have added a favicon to your Website then it will look more professional and trustworthy. Many of the customers may be relying on this small detail to take their decision to purchase something.

Now we will discuss about how to add a favicon to your WordPress site.

How to Add a Favicon to WordPress Site

There are many ways to add a favicon to your WordPress site. Lets talk about them one by one.

Method 1: Using the Customizer

This is the most easy option to add a favicon to WordPress and has been around since WordPress 4.3. Just activate it in your theme and you can simply add favicons via:

Appearance > Customize  in WordPress backend. Here just click on the ‘Site Identity’.

Here, you can change site’s title, description and other thing related to your site including the favicon. To change this just click on the ‘Select File’ button to upload your favicon file.

If the file is too large then WordPress will ask you to crop it to the appropriate size. Otherwise just save it. Now you can preview your favicon in action. Finally just save and publish.

Method 2: Using Your Theme Options

Sometimes option to change the favicon is not present in the Customize then you can still find it in your theme settings. Now a days the themes come with lots of options and they are not standardized. Hence you should first check this option within your theme as this is one of the easy option.

Method 3: Adding a Favicon using Plugin

If your theme doesn’t have a built in option then you can also use a plugin. We are giving you some options:-

• All In One Favicon
• Favicon by RealFaviconGenerator
• Heroic Favicon Generator
• Very Simple Favicon Manager

Now we will describe how to add a favicon using the All In One Favicon which is one of the most popular solution.

Just install the plugin and go to the Settings under Settings > All in one Favicon.

This plugin provides support for GIF, ICO, PNG files and Apple Touch Icons. It will also help you to define different paths for icons used in the frontend and backend. You just need to paste the paths of your already present favicons in the WordPress media library. Otherwise you can use the buttons to upload your files and the plugin will automatically insert their paths. Then save the changes.

Method 4: Adding a Favicon using Code

If your WordPress version is old then you have to add a favicon manually. First try this in a local development site to check whether it is working fine. To do so, first you have to upload your favicon files to the site’s root folder. You can also use a subfolder but remember the file path for later use. Make sure there is no other favicon files present there.

After the upload, you can add the favicon to the WordPress site either by adding certain code in your header file i.e header.php or functions.php. We are giving a code for use in functions.php.

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/png” href=”‘.get_template_directory_uri().’/assets/favicon.png” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

If you are using an ICO file then use the below version:-

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”‘.get_template_directory_uri().’/assets/favicon.ico” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

Just replace the part after href= with the location of your favicon files and this code will work for your site.

Conclusion

Although favicons are small design details but they make a big difference in the opinion about a website. Favicon helps in making your site more professional and help it to stand out in so many browser tabs and ultimately enhancing the user experience and brand recognition.

We have discussed how adding a favicon will be beneficial and four ways to add them to your WordPress site. You can choose any options but the favicon will always have a great effect on your website’s perception. And this is one of the most important thing to get while running a business website.