Home / web development
Tampilkan postingan dengan label web development. Tampilkan semua postingan
Tampilkan postingan dengan label web development. Tampilkan semua postingan

Kamis, 16 Juni 2016

Web Design Process

Komentar
Web Design Process
The Web Design Process

1. The project brief

It is very important to meet with the client, either in person, over the phone or through e-mail or Skype in order to create the project brief for the website or so you can analyse and discuss the brief the client had already created. The brief should be detailed and specific and must be documented and agreed upon in order to allow it to be referred to later in the process. As a web designer you can also state your price and outline a time frame based on the brief. Without a detailed brief these things would not be possible.


2. Identify key requirements

Based on the brief and your discussion with the client, you should first identify the key requirements that the website must meet. Is it an e-commerce website? Does the client require a content management system? Does it require special effects? Factors like these would decide the design approach you take and these should be allocated the most time in your time-frame and they should be the central features around which the site is designed.


3. Research existing websites

If the website is to be a business venture it is important to first assess the competition. Sometimes a client may request that their new site appears higher in search engine rankings than a competitors or that it have extra or additional features therefore it is important to assess what you are up against, so to speak. It is also important to be aware of what the industry standards are for a particular type of website if you are not familiar with them. As a designer constantly browsing, reviewing and analysing new websites is good practice and can provide a source of inspiration for your future designs.


4. Develop the basic website structure

Before you begin the technical design and programming of the website you should first develop ideas for the basic site structure and layout through sketching and drawing. Ideas can be developed quickly and easily in this manner, much quicker than through Dreamweaver or Photoshop, and 'boxing out' the design will make the actual creation of the website a simpler process further down the line. Refer to the web design tips section for guidance in how best to layout your website. At this stage a quick check-in with the client would be recommended before you progress to the next stage.


5. Create the website graphics

Once you have identified the layout and style you want for your site you can begin to create the graphics you will need for the website. This may include the website logo, banner, buttons, image maps, resizing and formatting pictures etc. All these should be designed with consideration to the style and colour scheme of the website. There are a variety of file formats you can use for your graphics, the most common being .gif and .jpg. To help you choose the format which is best for you see the common file formats section. For help and assistance with the creating the graphics you may find our Photoshop and illustrator tutorials useful.


6. Create and program the website

With the layout decided upon and the graphics ready to be put in place you can now begin creating the basic site structure. Begin with the HTML template and use it to create a site master page which will be the starting point for creating all your web pages. Ideally you you should use CSS media queries to make this template responsive. In most cases the majority of your web pages will have the same basic layout so creating a 'master page' first, which can be the template for all other pages, is an approach which will save you time. Once the template is set the graphics and content created earlier can be inserted into the relevant pages easily and quickly completing the website. Once again this would be a good time to get feedback from the client so they can review the design.


7. Refine the website design

Based on the clients feedback and having reflected on the design yourself, make any necessary changes to the website. This may involve subtle changes to the colours, editing or changing images, changing the font style or small layout changes and spacing. Search Engine Optimisation (S.E.O.) should also be part of this process where including certain keywords, tagging images and using meta-tags are all part of the process. For more in depth information see the section on SEO.


8. Website testing and QA

This is a simple task that involves proofreading all the website content, testing all the links and any interactive features of the website. It may also be suitable to get feedback from a select group of people matching the demographic of the website's target audience to test the suitability of the website design and functionality.


9. Launch the website

Getting the website online is the culmination of the process but the old adage of 'build it and they will come' is certainly not applicable to websites. It is vital to index the website in as many search engine directories as possible to ensure visitors can find the website, advertising the site across a variety of media is also useful. On-line advertising through methods like Google Adwords is a recommended approach as well as using social media like Facebook, twitter, Google+ and others will also increase your websites online presence as well as driving traffic to the site.

If you enjoyed this article then perhaps our articles on the graphic, interior, games or furniture design processes may also be of interest.



Baca selengkapnya

Rabu, 25 Mei 2016

10 Reasons Why You Should Use Blogger To Create Your Website

Komentar
Blogger is an excellent resource for creating websites

Blogger is for creating blogs not websites, right...? Wrong! Although it may have started out that way, in fact it definitely started out that way, Blogger is now an extremely effective tool to easily and freely create full blown websites. If you don't believe me look at this website ,for example, which was created using Blogger - you wouldn't think it, would you! Even the website you are on now is a Blogger hosted website.

Like WordPress (but better IMHO) it is also an excellent Content Management System (CMS) tool which is just one of the many reasons why web designers should be using it. Unlike WordPress it is totally free with no hosting costs and a free sub-domain name given, there is also no charges or fees for using plugins or connecting to a custom domain. I use it regularly and there are really very few situations where it is not capable of meeting the needs of a client and more often than not it is a better, or at least simpler, option for both me and the client. So before I give away everything in the introduction and here's 10 reasons why Blogger is great for creating websites.

Blogger Is Free

It's free, totally free, ad free, no hosting cost, free sub-domain name provided and is therefore cheaper than everything else. The sub-domain name provided will be yourwebsite.blogspot.com which is fine for a blog but for a professional website it doesn't quite cut it right? Well that brings me to my next point...

Easy Custom Domain Integration

You cannot purchase a domain name directly through Blogger but you can connect your Blogger website with any domain name in a few simple steps, Blogger are even kind enough to provide you with instructions. The old .blogspot address will also redirect to the new domain with the content from your blogger website being displayed under your chosen domain without a visitor being any the wiser. Search engines will use the custom domain name to index the site, meaning it appears as a fully fledged professional website and not a run of the mill blog.

Although domain names are generally quite cheap, as low as $5 for an annual .com license, hosting on the other hand is not as cheap. I have seen hosting costs range anywhere from $50 to $500 a year depending on the amount of space, level of security and other features that a client can require. Blogger, as already mentioned, has no hosting costs. Where's the catch you ask? 

Free Unlimited Hosting

Well, one that used to stop me from using Blogger was that it does not support PHP. But nowadays for contact forms and other standard PHP things there are ways around it such as using JotForm to create and host your form, then embedding it into your Blogger site. Another big one that used to be a problem was that there used to be a limit of 20 static pages per site, but that has since been removed, so there is now unlimited space available which most paid hosting services can't offer. How is this possible you ask, well that brings us nicely to the next point.

It is Run By Google

Blogger is part of the Google family so you are guaranteed a quality and reliable service. But returning to the previous point about storage what a Blogger account also gives you is a Google account and with that comes lots of other free stuff. You see when you set up your blog you will need to create an account, which is actually a Google account (unless you already had one of course) and therefore you simultaneously set up a YouTube account, a Google Drive account, a Google + account, a Gmail account, a Google Calendar account, a Google Places account and much more besides. All of these tools can be used to expand the possibilities for your Blogger website like storing documents (Google Drive), hosting videos (YouTube), arranging or displaying events (Google Calendar) or literally putting your business on the map (Google Maps).

Easy SEO

(SEO is Search Engine Optimisation ) Within Blogger you can also label your blog posts with keywords and submit a specific description to be used by search engines while indexing your website. As a Google product it is also very well coded and hosted on a Google owned server so speed performance is usually very good. As mentioned above a Blogger account comes hand in hand with a Google account and 2 more SEO related tools called Google Webmaster and Google Analytics. Google webmaster allows you to index your Blogger website in the Google search listings and then control various aspects of that listing such as geographic targeting, robots.txt and sitemap.xml settings all the while receiving basic data about your websites performance. Google analytics takes performance data to the next level and allows you to monitor every conceivable detail about your websites performance.


Easy To Learn & Use

Blogger is genuinely very easy to learn and easy to use. It took me about 30 mins to get up to speed with all the main features of Blogger and I honestly could not say the same for WordPress, although that may say more about me as WordPress isn't popular for no reason. But I'm entitled to my opinion, and my opinion is that Blogger is easier to use than WordPress. There are also a wide selection of templates built in to help get you started as well as thousands available for free online from very talented and generous web designers. The layout is clean and simple with the ability to drag and drop the default sections around as well as the numerous widgets which can then be added to personalise your website.

Loads Of Gadgets

There are a wide selection of gadgets within Blogger that can be added to the default header, body, footer sections. Things like site search, follow by e-mail and Ad-sense can simply be selected, edited to suit your needs and then dragged and dropped into the site layout as you see fit. As well as these relatively standard gadgets there is one gadget simply called the HTML/JavaScript Gadget. If you are a web designer or coder and feel restricted by all the templates and standard gadgets this simply allows you to code anything at all to appear in your website. I use it mainly for slideshows and custom menus. Currently there are around 1,000 widgets/gadgets to choose from so there is plenty of choice.

More Than Just Templates

The 'customise' section within Blogger allows you to customise all the default elements of your website, on desktop or mobile, using a WYSIWYG system so even without any coding knowledge you can still personalise your website to the way you want it. As I touched on in the previous point if you don't like templates and standard web gadgets you can still edit the site H.T.M.L. and C.S.S. code of your Blogger website directly to create a unique and original design or just to tweak an existing template or gadget. Within the HTML code there are even 'conditional' sections such as (without the HTML to avoid confusion), if displaying on a mobile device then do x, y and z. This makes it really easy to customise the look of the mobile site option, which I just realised I forgot to mention as another great built in feature of Blogger websites!

Can Be Used As A CMS

This point is really only relevant for web designers/developers. For me and any web designer who already knows how to code a website from scratch anyway one would think that Blogger did not hold much appeal, however the fact is that a Blogger website is easy for a client to update the pages after you have designed them and therefore lends itself very well to being used as a Content Management System. A client simply needs to log into a Google account connected, through the blog's settings, to the website and on each page of the website they will then see little wrench icons at the bottom of each section. They can then click on the icon and use the pop up editor to make the changes they need. The editor is very similar to editing a word document as well as allowing the insertion of videos, images and links with relative ease. So if the client has basic computer skills then they should be fine. It can;t get much simpler than that! And if a client is a little more tech savvy then they can just used the Blogger system directly to edit the website in the same way that you set it up. 


*If you skimmed through and noticed only 9 headings you'll have to read through to discover the hidden 10th reason included in one of the sections - I say hidden but I only remember it as I was writing the article ;)

Baca selengkapnya

Jumat, 25 Maret 2016

7 Easy Ways To Speed Up Your Website

Komentar
How to make your website load faster
Although it is unlikely you will make it to a perfect score the tips below can help you get in the green for page speed

As far back as 2010 Google admitted it uses a web pages loading speed as part of it's ranking algorithm and as the mobile web has grown so has the importance of a website's loading speed. So with that said let's get to the point. Here are my top tips to speed up your web pages...

Go Direct...

No landing page redirects please. Why? Well redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single round-trip (HTTP request-response), and in the worst it may result in multiple additional round-trips to perform the DNS lookup. So you should therefore minimize your use of redirects where possible.

Google identifies these examples of redirect patterns...
  • example.com uses responsive web design, no redirects are needed - fast and optimal!
  • example.com → m.example.com/home - multi round-trip penalty for mobile users.
  • example.com → www.example.com → m.example.com - very slow mobile experience.

Cut The Crap...

Remove any unnecessary content, especially widgets and plugins that you only put into your sidebar or footer to fill it out, yes I'm looking at you! Only present that content that is actually relevant or related to the web page's topic.

WordPress sites especially, tend to have sidebars or footers full of widgets or plugins that are serving no real purpose but yet are slowing down your webpage a lot. "But they are so easy to add and they look really pretty..." I hear you say. That may be true but are they actually serving a purpose? If not, get rid of them.

Tip: If you want/need to link to Twitter, Facebook, Google +, Pinterest etc. just use a linked icon (font awesome icons are great for this) or image as opposed to a widget or plugin.

Prioritise Above The Fold

What we mean by this is that you should limit the size of the data (HTML mark-up, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. Structure your page so the initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest. This may mean that you must split your CSS into two parts: an inline part that is responsible for styling the above the fold portion of the content, and the part that can be deferred.

Google suggests the following examples of how a site could be restructured to load faster:
  • If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first.
  • If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.

Optimise Images

It really is amazing how much you can reduce image file sizes without any loss of quality. You literally can't see any difference visually but the impact on web page loading speeds can be immense. Here are 2 options for software to help you optimise your websites images.

Minify, Minify, Minify

That heading isn't for dramatic effect as you can, and should, minify your HTML, CSS and JavaScript. This is actually a lot easier than you think. It basically means removing any unnecessary spaces from your HTML, CSS and JavaScript code. There are even lots of websites that will do it for you for free, my personal favourite due to it's beautiful simplicity is this minifier.


Enable Compression

The word compression tells you all you need to know about what this does but how does it work? All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and, most importantly, improve the time to render of your pages. See Google's explanation of text compression with GZIP to learn more.

Good News: If you have a Blogger website then you automatically have gzip compression. If you don't believe me then test your website's compression.

Bad News: Some other hosting providers' basic hosting package do not support compression so be sure to check before you waste your time and effort working on it.


Browser Caching

Caching involves storing information from your website for reuse. Fetching information over the network is both slow and expensive: large responses require many round-trips between the client and server, which delays when they are available and can be processed by the browser, and also incurs data costs for the visitor. Therefore, the ability to cache and reuse previously fetched resources will optimize performance and speed up your website. The most common way to leverage browser caching for increased page loading speed is using a .htaccess file.

Learn how to leverage browser caching.

Tip:  If your website is hosted by Blogger you cannot use browser caching through the .htaccess method as you have no access to the .htaccess file. However you can try this alternative.



Baca selengkapnya

Senin, 14 Maret 2016

The Best Web Development Resources

Komentar
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

Komentar
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 website. The 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

Selasa, 18 Agustus 2015

Layered Image Effect Using CSS

Komentar

This tutorial outlines a simple but impressive CSS effect for you to use on your website.

The effect...


  

The HTML


The CSS

div.box1
{
z-index:1;
position:relative;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg); 
-o-transform: rotate(-3deg); 
transform: rotate(-3deg);
}

div.box2
{
z-index:2;
position:relative;
left:-150px;
}

div.box3
{
z-index:3;
position:relative;
left:-350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
transform: rotate(3deg);
}
Baca selengkapnya
Langganan: Postingan (Atom)