Tampilkan postingan dengan label web tips. Tampilkan semua postingan
Tampilkan postingan dengan label web tips. Tampilkan semua postingan

Senin, 30 Mei 2016

Top 5 Web Design Tips

1.What's The Point?

What's the point of your website
What's the point of your website? That must be your first decision

Believe it or not there are only 3 types of websites - information, entertainment and transaction.

  • Information websites provide information- obvious example is Wikipedia
  • Entertainment website provide entertainment- obvious example is YouTube.
  • Transaction websites will either buy goods from you and/or sell goods to you - obvious example is eBay.

Every website falls into one or more of these categories. The first thing you need to decide before designing your website is what is  its purpose? Secondly who is it aimed at? Once you have made those decisions you can more easily design your website to meet the demands associated with that website category and that target audience.

2. Mobile Is Bigger Than Desktop*

Internet usage is now greatest on mobile device
Internet usage is now greatest on mobile device

It goes without saying nowadays that your website should be responsive but I have found that people tend to create the desktop design and then use media queries to work down to tablet device design and finally mobile design. This is the wrong approach. Why?

*For the first time more people now access the internet using mobile devices than desktops or tablets so it makes sense to prioritise your websites mobile design then scale up using a fluid design and/or media queries.


3. Show The Way

An organised, obvious and functional menu
An organised, obvious and functional menu is key to a successful website

Web navigation has many well established and functioning characteristics and you should not stray away from them,; there is no need to reinvent the wheel and if you try it will likely confuse your visitors and spoil their browsing experience. On the flip side, an effective navigation system encourages browsing within the website which can in turn increase revenue.

Your menu is obviously the main navigation device for your website and it should be immediately obvious when the webpage launches, ideally fixed at the top of the page with no surrounding elements to distract from it. This also makes the links easier to click on a mobile device. If the website's style allows it then perhaps add an additional (relevant) icon with each menu link, this creates an immediate association for the visitor with the purpose of the link.

Links within the body text should at least be a different colour than the body text and you should retain the default link underline as without it the links may just look like bold text. Ideally all links should have a hover effect added using CSS and a title attribute using HTML.



4. Nobody Reads

nobody reads text any more
If nobody reads text any more then how do you get your message across

Let's face facts, nobody reads all the text on a website, in fact I don't even know if anyone will read this sentence. What people do is scan the page for what they want, when they do this images, headings, sub-headings and links are what they notice (in that order).

Just checking if you are reading or scanning...

With this knowledge in mind you should provide images and/or icons to go with all key links/points and break any large areas of text into sections, each with a heading and possibly sub headings also like I have tried to do with this article. As a general rule in terms of website text, just get to the point.


5. Optimise, Optimise, Optimise**

website optimisation
There are 3 key areas of your website to be optimised

**I wasn't repeating the word optimise for fun or even for emphasis. I actually want to advise that you optimise 3 keys areas of your website: the layout, the loading speed and the content.

The layout optimisation should focus on utilising one of the recognised web layout techniques such as the F layout or the Z layout. The purpose of which is to direct visitors to the outcome that you want such as clicking on a link, signing up to a newsletter or buying a product. An optimal layout will result in optimal outcomes.

The loading speed can be optimised by removing unnecessary content, minifying you HTML and CSS, keeping slow loading content below the fold, optimising images for web viewing etc. Our tips to improve website loading speed and the Google page speed insights tool is a great help. Faster loading is not just appreciated by your visitors but also the search engines who now factor it into their indexing algorithms.

Optimising content is old news but remains an important activity which still makes lots of companies lots of money. The reality is that it is actually a relatively simple but highly tedious process, so if you got the time then you can save the money. Learn more about SEO here.

You may also be interested in the web design process and our 10 steps to designing and creating a website.


Baca selengkapnya

Senin, 14 Maret 2016

The Best Web Development Resources

The Best Web Development Resources
There are a wide variety of quality free web resources available online

Here we are at the the final stage of our 10 step guide to learning HTML. If you have landed here without having gone through the previous 9 steps you have missed out! Although there is still a treat in store for you here with this list of recommended web resources. These web dev resources have been carefully selected and will be useful to both web design novices as well as web development experts. All the resources, tools and software listed are both easy to use and highly effective and, in my opinion, are the best free resources in their web category/area.

You will find more extensive lists than this but we have tried to weed out the junk and only recommend what we think are the single best and most useful web development resource in each area. Hope you enjoy.

Google Account accounts.google.com/SignUp

Always create a Google account with your website to allow you to use YouTube, Google places, Google maps, Blogger, webmaster tools, Google analytics and more! SEO and tracking the SEO success of your website is only properly possible using the Google webmaster and analytics tools.


Online Photo Editor www.pixlr.com

In order to design a good, visually appealing website you need to use images and graphics and to edit,manipulate and resize these files you will need a Photo Editor. PhotoShop is the best and most renowned but is also very expensive. Pixlr offers a free solution with most of the same tools available in Photoshop.


Offline Photo Editor www.gimpshop.com

There's no question that Adobe Photoshop is excellent image editing software. But for those of us that can't afford up to seven hundred dollars or more to buy it, we now have the same image manipulation power at our fingertips as the high-priced, closed-source programs. In fact, with the release of 2.8, Gimpshop has become preferred software for photo & image editing among more professionals than ever. Layers, channels, masks, filters, levels, advanced pattern matching—the remarkable feature list of Gimp is equal to Photoshop in every way except one: the price.


Copyright Free Images www.pixabay.com

The online image stock exchange is getting larger thanks to great websites like the ones listed who give away quality images for free. You do need to create a free user account but it takes mere seconds and you don't get plagued with junk e-mail after, All they offer is a ridiculously large collection of quality, copyright free images.


Textures and Patterns www.textures.com

Textures.com is a website that offers digital pictures of all sorts of materials. We have pictures of fabrics, wood, metal, bricks, plastic, and many more. These images are called textures and can be used for graphic design, visual effects, in computer games and any other situation where you need a nice pattern or background image. You can download up to 15 images for free every day

RSS Feeds www.rssinclude.com

Integrate information from other websites, your own blog, Facebook, Twitter or YouTube directly into your website in an easily customisable widget.


Slideshows http://flickrit.com

Flickrit is a free slideshow maker that creates online photo slideshows from your Flickr and Instagram photos.


Galleries www.dynamicdrive.com

Dynmaic Drive offers a wide variety of free to use scripts but the most useful are their easy to use slideshows and image galleries. Some samples may not look the best but that is just the small uninteresting images being used.


Online Forms www.jotform.com

Jotform offers hundreds of form templates which can all be modified to suit your needs in terms of both content and style. From basic contact us forms to payment collections forms they have it all covered. you can also create a free user account to track all the form details and usage stats.


Create Favicon Icons www.favicon.cc

Ever wonder what the little image icons in the tab of your browser are called? or how they get there? Well they're called favicons and you can make your own with ease at www.favicon.cc by using their favicon editor or uploading an existing photo or graphic for conversion.

Visitor Comments www.htmlcommentbox.com

The HTML comment box is the simplest way to allows viewers to post comments about your web content on the website itself. Its a useful tools to get immediate feedback on an article and create a discussion place which keeps visitors returning to your website with the hassle of a full blown forum.


Newsletters mailchimp.com

Create automated newsletters for your business/website and allow visitors to signup online using Mail Chimps customisable signup widget. Users who sign up get added to your online database and once you create and send an e-mail or online newsletter it automatically gets sent to them all.


Code Validator validator.w3.org

Once you think you are finished the website or if you are just having trouble with an aspect of your web code you can use this validator. You can submit code as a file, as text or from a url and each time the code is checked and all errors are noted. Better still however - you can set an option to repair all code errors fro you too! Cool or what.


FTP filezilla-project.org

Filezilla is an open-source (GNU GPL) FTP client for Windows, Mac OS X and GNU/Linux. The Site contains a documentation wiki and a forum to help you get up to speed with using the software but to be honest it's pretty easy to use anyway.


Social Media Sharing www.addthis.com

Allow users to share your website info/articles with friends through social sites.


Converting Files www.online-convert.com

This free online file converter lets you convert media easy and fast from one format to another. We support a lot of different source formats, just try.


Website Templates designrazzi.com

Huge collections of premium and free website templates across a range of web development platforms.


That concludes our list of recommended list of online web design and development resources but I will finish with an important reminder that one of the very best resources to assists you in creating a quality website is, and always will be, the web design process.

If you know of any more then please contact us via the form below and we might include them in our next list.



Baca selengkapnya

Senin, 29 Februari 2016

SEO For Images

SEO for images
Screenshot from the Google search results page


If your web graphics are optimized for Image search engines like Google they will help to generate an alternate source of traffic to your website. But unlike regular web search where we are more familiar with how search engines rank content, the rules associated with Image search rankings are very different and often based on assumptions.

Why do I say this ? Try a search for "Google" on Google Image Search. None of the top results show images from the actual Google websites or even associated websites. Now if you repeat the search for Amazon, none of the top 5 images displayed are from the official Amazon website. So how do individuals and small companies manage to stay ahead of corporate giants in Image search results? It's to do with image optimization techniques like the ones discussed below.

Regarding optimization, here are 6 simple things that you should keep in mind for getting good rankings in Google Images Search:

1. Image File Name

Use a descriptive image file name which includes keywords related to the content of the image. If your webpage has pictures of an old country farm house - use file names like 'old-country-farm-house.jpg' instead of the default camera file name like IMG_401.jpg. In this way you are providing relevant information about the image to Google rather than just a string of meaningless numbers or letters.


2. Alt and Title

Attach a 7-8 word description with both the ALT and TITLE attributes of the IMG tag. Make it a habit to use these attributes. An example could be...

<img src="old-country-house.jpg" alt="dilapidated old county farmhouse in countryside" title="country style farm house ageing and run down">

3. Discuss The Image

A short two line description of the image just beneath the graphic is the best way to describe an image. It can work wonders for your image search rankings as well. For a live example, read any news story on the BBC websiteThe HTML tags enclosing the image descriptions will also matter. A description alongside a heading enclosed in H3 or Bold tag will have more weight than the one with just a description enclosed in the paragraph tag.

4. Wrapping Text

If possible, try to wrap text around your images using the CSS code of "float", like the old country farmhouse image above. If you site design won't allow wrapping text or if the image is large in size, try to place the images near text that describes the context of your image. Web Photo Galleries which have no text on the page can make use of the Title and Meta tags to insert information about the images.

5. Image Position On Page

From personal observation Web Images placed at the top of the page are more likely to appear in search results than the ones which are at the bottom. They do not have to be at the very top of the page but certainly 'above the fold' images tend to perform better than those below the fold.

6. Image Size

Another personal observation is that images which are very large or very small tend not to do very well in the search results. Try to keep images at sizes which will be useful to others who may be looking for them. In my experience images around 600px x 400px tend to do well.


If you do decide to use some or all of these tips, please keep an eye on your image performance and let us know how you get on.


Baca selengkapnya