web design, England, Britain, UK, belgium
 

Things to make remote web design easier... - Blog - General Coding Tips for Web Design

making web site design easier, tools you need your customer to use

Home Google's new search translator

Sun

11

Oct

Some tips to make the remote design easier for your web designer.

Browsers


Always use Firefox web browser. It is the most standards compatible and enables us to use some very useful plugins that go with it.

If you haven’t got it, it’s a free download from here and can happily be installed along side Internet Explorer and your Favorites (Bookmarks) etc can be easily imported during the installation.

After the design is finished all display problems in Internet Explorer 7 & 8 will be corrected.

If you still want to use Internet Explorer make sure you have the latest version (as of now Internet Explorer 8). You can download/upgrade here.

I do not support Internet Explorer 6, it is now 9 years old, totally incompatible with modern web technology, very insecure, no longer supported by Microsoft and very buggy.

If you require your site to display bug free in Internet Explorer 6 then the extra time and coding involved will be charged for. Be warned that some web technologies (Java Script, AJAX etc) will never work correctly in this browser.

Web Page width size


This is measured in pixels and is a relative size, the page will always look bigger on a larger display than a smaller.

The smallest modern screen size that is available now days is 1024 pixels wide (many are larger) but we design to this size as this is the smallest we will generally have to display to.

To ensure it is all viewable with borders and scrollbars etc, we design to a width of 940 pixels.

Of course this size is controllable by the user, in Firefox for example if you hold Ctrl and type + the display size will increase , type – and it decreases, type 0 and it returns to your default size


Useful add-ons (plugins) for Firefox - Colour


When discussing colour in web design, every shade has a hex code in the format #000000. 

#000000 is black, #ffffff is white and every other shade is something in between.

A sort of greenie orange colour is meaningless to your designer!

To measure the exact shade of colour install the plugin “ColorZilla “, go to this web address Colorzilla in your Firefox browser.

Click on the large Install button  install_colorzilla

You will normally get this message so click on “OK” then “Allow”

colorzillapop

You will get another popup where you need to click on “Install”

colorzillapop2


statusbarThe install will complete and you need to re-start your browser. When re-started look in the left lower corner (Status Bar) of Firefox .
If you can’t see your status bar enable it by the following..












There will now be a new icon so --> colorzillaicon

colorzillapalletteClick once on this and your cursor will become a set of cross hairs which as you drag across the web page , shows the colour hex in the status bar.

When you click on a colour then this colour is stored by ColorZilla.

You can access this information by right clicking on the ColorZilla Symbol and copy the value. This is then on your clipboard ready to paste into an email to me with your colour change!


colorzillapallette2There are also many other useful options within ColorZilla to find the colours you want, for example , right click on the icon and then choose “Pallette Browser”

This window will open where you can find an infinite number of shades.

colorzillapallette3





















Sizes in Web Design


All sizes in Web Design are measured in pixels, any other measurement (inches, mm etc) are meaningless because they are totally dependent on the size of the display you are using.

Especially meaningless is "a little bit more" !

A pixel is one unit on your Computer Screen which you can see if you look closely at your display.

If you want to know how large a photo is or move some text left by a certain amount then we need some way of measuring the pixels directly, no matter what size of display we are using.

To do this we install another Firefox plugin MeasureIt.

With Firefox go to MeasureIt and click on the “Add to Firefox”  measureit-add-to-firefox

Follow the same installation process as with ColorZilla.




When installed you will have another icon in the status bar.  measureit-icon



measureit_useWhen click on it your display will “grey out” slightly and you will be able to click-hold and drag out boxes on your screen which will report the exact size in pixels.


To disable it just click the icon again.



Fonts in Web Design


There are only a small number of fonts that can be used in Web Design for text.
By text I mean texts that are sent to your browser by your website to be displayed in your browser with html.

It is possible to code other non-standard fonts but the vast majority will not see them because they are not installed on their computer, therefore they will just see the browser default font, normally Arial.

All other non-standard fonts that you may see are actually images, i.e. pictures of text that have been manually produced in a graphics editor (Photoshop etc.)

This can give very attractive results but has a large number of disadvantages.

1.    Any editing of the text is very time consuming and therefore expensive.
Every edit has to be remade in a graphics editor and uploaded to the web server.


2.    The size is always static and will often break the web page layout if the user has there browser set on a higher viewing size. (i.e. Ctrl +)


3.    The text is completely invisible to Google and all other search machines. They can only see html text, not images. This will really hurt your search engine rankings.


4.    Negates the whole purpose of Content Management Systems (CMS) as none of the text is editable.


Below is a list of the fonts that can be used in Web Design

Common fonts to all versions of Windows & Mac equivalents.

web-fonts


Last Updated on Tuesday, 20 October 2009 09:08
 
VirtueMart
Your Cart is currently empty.

Showcase

  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow

Alexshop.de

News image

Private club based shopping site. 3 languages with full shop including "Back-end", order control, newsletter subscriptions and member invitations. Fully integrated "community" setup to include membership, newsletters, logins and...

Readmore

Midrangeint.com

News image

Midrangeint.com Multi-page site with Content Management System for an International IT Consulting company. Achieves top ranking search results for IBM Software Integration terms. e.g. Google results for "IBM system i"...

Readmore

Vandegaar.be

News image

Multimedia site for a Belgian stairways, doors and floors workshop. 4 languages with extensive photo galleries, flash animation and Quicktime 3D embedded views.

Readmore



Things to make remote web design easier... |Blog | General Coding Tips for Web Design



making web site design easier, tools you need your customer to use


web, size, design, click, display, browser, text, colour, firefox, fonts, pixels, explorer, colorzilla, internet, page, install, icon, bar, status, screen, meaningless, use, shade, installed, look, type, number, large, useful, sizes, user, html, non, standard, measured, graphics, width, example, images, right

|

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set.
To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.