Browsing about numerous sites to see what is going on from other design agenies is always fun, and sometimes you come across real little ‘gems’.
This is certainly one - a little stick man killing a dinosaur may not sound like much, but the programming and testing gone into this would have been very time consuming to say the least. Its the physics of it that makes it so impressive.
Thanks guys you have wasted another 10 minutes of our time !
A short trip over the beautiful area of Bavaria, Germany, last month turned out to be a very expensive trip indeed! It wasn’t the cost of the flight, the cost of the hotel or even the cost of food and drink!
The culprit was the handy, yet too handy, Apple I-Phone. Browsing Google maps and keeping up with news from the British Isles cost an astonishing £280! At £7.05/MB that works out at measly 40 megabits of data! Browing one Google map of the area is about 300k of data and represents £2.35 of British currency.
The I-phone is very handy bit of kit, being able to check emails just about anywhere and view any website( well close - any website without Flash) on the go is what people have dreamt about for a good while. Off course mobile phones have had the ability to get online for a number of years, however its the I-Phones touch screen and fantastic usabilty that makes it a “joy” to use, rather than “fiddly” when comparing it to previous mobile browing experiences.
The Edge network is of course, free to use if you are within the boundaries of the North and Irish seas, but be very aware if you happen to turn “Data Roaming On” when travelling out with the United Kingdom.
Last week (Tuesday 26th February) BBC took their Beta version of the homepage into live production. As its my Firefox home page which i view many times a day, i thought id give my thoughts on it and 5 ways how id improve it.
First off i think the BBC (or the hired team) has done a great job. The site makes extensive use of AJAX and clever Javascript’ing which allows user customisation. The clock is a clever addition and the natural way the second tick round by adding a slight fade is a nice touch. Its these little, subtle additions and thats add to the users perception of quality of a brand / business.
I love the way i can choose what content appears on my screen. I quickly got rid of the Children, Radio, TV ( which ill get onto ) and I-Player sections and adding in sections such as business, technology news and a few others. Dragging those content sections into my prefered locations was a breeze and highly intuitive, in the way the cross hair appears when hovering over the top of the rounded box, housing each content area. There are numerous other things i could i go into detail about it works but i highly recommend you try it out for yourself. Here is what id do to improve it.
1.) Implement a Login system: If you change computers, change locations, swap web browsers or clear your cookies, then unfortunately all the fun of creating your own little personalized BBC homepage has been wasted! The website stores your customized details in a cookie. A simple way round this would be to implement a log in system which would allow you to login within a standardised user name and password. Then users would be able to view their on own settings anywhere, on any device. Some of you may think it only takes a few minutes (or seconds depending on the extent of the customization) to the edit the page options each time. If your someone like me however that uses multiple computers and devices in different locations, frequently, it becomes a bit of a pain. The BBC may have a security / privacy issue with this solution ( which im sure they would have thought about. This login system however, would improve the experience for a number of users.
2.) The size of the BBC main advert. Unfortunately this section, in the top right of the web page, cannot be customized as it hard wired into the design. As the main computer i use has a 1024 x 768 screen, this part of the web page takes up about half the screen height and more about 3/4 of the screen width. Its obtrusive and takes away importance from the other sections i pay more attention too. I can live with it, sure, but it would improve things and allow me to access the information iv carefully customized to my preferences.
3.) Lovely shop window but: The design, look and feel of the front page is great, however when you click on any of links to the news stories, the old, outdated website appears in all its glory (or not). Its like having a fantastic shop window with intriguing products, but when you look further into the shop it has poorly maintained facilities. I’m guessing the BBC will be updating these inner pages at some point, but i think it would have been better to wait ( depending on how long its going to take ) and launch it all at once.
4.) TV listings. While i watch selected BBC viewed programmes, it would have been a welcome addition to have competing broadcasters programme listings. As this is the BBC’s own site they have omitted these for obvious reasons however from a users point of view i don’t just view their channels. For this reason i turned off that section in my customisation. I could even live with it if they had their own channels heavily promoted compared to others, but for now ill look for all TV listings from other available media.
5.) CodeWise - From a web designers point of view: Much of a what a web designers / developers does goes on in the background (and what 95% of everyday, general web users don’t see ) and that is the code. This can be viewed from Page > View Source (in IE7 :: The browser which the majority of people will be viewing this article from.) It uses some on page styling, which would be better put in one of the already used standalone CSS files. It also fails with the CSS validation, on a tiny matter which is due to the lazyness of the design team.
Well that’s 5 of ways id improve the new, exciting and modern BBC homepage, which i really like on the whole and i commend them for doing a great job. As with any website ( and i mean any on the entire web) however, there is always room for improvement.
Please post any comments you may have.
A very quick post today but this might be helpful to fellow Flash’rs.
I couldn’t get the controls of FLVPlayback to show when uploaded on a live server.
After an hour or so of looking for the solution, i worked it out.
The skin / controls are published in its own .swf, that is quite straight forward.
What you need to do however, is place the MojaveExternallAll.swf ( in my case, but can be any skin ) in the same directory as the file producing the swf code. This was showreel.php found in the root directory. By simply moving your skin file in there ( the root directory), will solve the problem and the FLVPlayback controls will now show. This is because of the way SWF Object works. There is a method that you can edit the component file, but for the sake of one tiny .swf file in the wrong directory, i dont think its worth the hassle. I hope this is helpful, if anyone is having the same problem.
At this time of year we get numerous job applications and students looking to submit their CV’s. Here is a huge tip that may just tip your job entry over the others.
We specialise in web design. Therefore a CV with a link to a live website would be highly advisable. We aren’t looking for a winning submission to The FWA but something that shows you have a clear interest and passion in the subject would give the submission extra merit. When i got my first web space 7 years ago i was excited just by having my own little place on the web, even though it was quite ugly. Web Space has decreased in price since then and you can now buy your own domain name and webspace for under £30 a year. From there you can then experiment with all types of media. Just about all web servers will accept Flash files, Quicktime Movies and even dynamic scripting such as PHP. A portfolio site would be the best bet, this will allow you to upload your college / university projects. A section for experimental work would also be great to see, showing that you have a strong interest in design and multimedia after the set projects.
Now this may seem like a lot of hassle or bother to you. If it does, unfortunately web design may not be for you. You should be excited and enthuasiastic with the freedom that a little web space gives you. As i’m sure you have worked out through your studies, design is a highly competitive field. However with a little web space and passion you can give your CV a kickstart, that may just land you that first job.
Just a quick post today.
Testing one of my latest sites threw up a strange problem. In FireFox. when clicking on an CSS styled link a dotted border appeared. Testing in all other browsers were fine.
After a Google search, I came across this written by Nathan Smith back in January 2006.
By using: a{ outline:none;} in the css that sorts it. For maximum accessibility he recommends using a:active{outline:none;}, but for some reason I couldnt get that to work. Thats all for now.
A UK Physio directory will be launched by us soon.
A local Physiotherapist asked us to make a databased list, so he can add newly qualified members.
Universal Selector - This sets ALL html tags to have zero border and padding. You then build your css up from there:
*{padding:0; margin:0; }
Image Replacement is the process of using images instead of text yet still using semantic html code. Whilst image replacement is great for static sites, the SiFR method is better for dynamic sites. Sifr uses a mix of Javascript and Flash to produce the text in any font. Both are great methods of making your site and typography more attractive and “designed”.
Comment tags are a great way of organising your CSS. Comments are inserted like
/* Details about the Css are help within is very useful tag */
They are very useful for breaking up sections of your CSS code. For instance you could have
/* ...All link styles ...*/
a:link, a:hover{ color:#f00; }
a:visited{ color#000; }
/*...Below is the left nav system section ...*/
#nav{ clear:both: float:left; }
Im sure you get the idea
Structure of the file ( the order in which selectors come etc ). There are many methods of doing this but the way I work is generally from the top of the page to the bottom. So the top divs and everything within those divs such as list items progress down the page. I tend to put generic html tags such as the links and list items before the main stucture:
*{padding:0; margin:0; }
a:link, a:hover{ color:#f00; }
a:visited{ color#000; }
li{ padding:5px; }
#nav {clear:both; float:left;}
#content{ width: 550px; padding: 5px 15px;}
..............
#footer{clear:both;}
This method is logical and therefore you can find things easily.
Shorthand:- This is a code saver and is quicker to type when you get used to it. Instead of
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
You can have:
background:#f00 url(background.gif) no-repeat fixed 0 0;
Another quick shortcut is for colours “#f00″ is short for “#ff0000″.
Centreing:- ( I’m from the UK) elements is very easy with CSS, simply give a width and a margin of “auto” to the left and right margins:
#div-id{width:550px; margin 0 auto;}
Font Sizes:- For accessiblility its better to use ems instead of pixels for font sizes. Simply set:
body{font-size:62.5%;}
p{font-size:1em;}
Setting the body to 62.5% rounds 1em off to 10px in most browsers. That allows you give almost pixel perfect measures, for example 1.3 em would be equal to 13 pixels.
Conditional Statements:- Internet Explorer is the enemy of most CSS designers and while version 7 is a lot more standards compliant, many users are still using version 6 and some are still using IE5. These browsers can easily be targeted by using Conditional Statements though.
I highly recommend you read this article about conditional statements if you are serious about web design!
DIVS:- Don’t be diagnosed with “Divitus”! While divisional (div) tags are great - don’t over use them
Larger Font size goes here as a heading
Smaller text goes in here, bla bla bla, like a paragraph
Can be rewritten as:
Larger Font size goes here as a heading
Smaller text goes in here, bla bla bla, like a paragraph
The 1st (the h2) and the 2nd ( the p) tag can then be targetted like this:
#mainholder h2{ font-size: 1.3em;} #mainholder p{ font-size: 1em;}
DIVS - Tip 2
CSS classes can be used twice for instance you could have:
Red Text class="warning underlined">Red Text and underlined'; ?>
At then this CSS:
.warning color:#f00; font-size: 1.3em;}
.underlined {text-decoration: underline;}
This keeps our stylesheet tidy and clean, which is never a bad thing.
ZERO equals ZERO:- Short and sweet for the last tip: There is no need to use any px or % when stating zero. For instance:
#divname{padding: 0px 4px;}
Can be replaced with:
#divname{padding:0 4px;}
Ok its not going to halve your CSS load time but every little helps.
SummaryHopefully these CSS Web Design Tips will help you order and code your web pages that bit cleaner. If you have anything to add or know of an ever better method please leave a comment.
You will need two main qualities if you want to do your own search engine optimisation. Time and the ability to learn and adapt quickly.
A lot of time will be required. Its not just the initial work of keyword research, competition, setting targets, link building and the actual editing that will have to be taken into account. Looking at industry trends, testing, monitoring results and adding new products or services will all have to be done after the first stage of search engine optimisation.
To learn the basics of seo will take a very minimum of a week of reading and understanding of the system. To carry out all the changes, updates and settings will take a minimum of 2 weeks. You will also need to add time for monitoring and adjusting the site after the initial seo updates.
Many people / businesses take on their own search engine optimisation to save money. However if you add up all the time, it may in most cases cost more to carry out seo in house.
There are other attributes though that you will need.
Patience - results will NOT take effect overnight. For a new site to just be listed can take anywhere up to 6 months. Changes that are made to the site can take up to a month to take effect.
A neutral and sensible thought process has to be understood. You have to look from within your business and look into your business. The site will have to read and present itself well, to both actual visitors and the search engines.
Some search engine optimisation work carried out internally by some businesses has been very successful, but there have also been some campaigns that have failed miserably. For every business or site that we know that has taken on its own successful seo campaign, unfortunately we know one that has failed. If you or an employee of yours intends in taking on your search engine work, be aware that sometimes they can put your sites rankings at a worse situation that currently exists.
Summary
If you have a lot of time and excellent business skills, there is a good chance that you will be be able to carry out a successful search engine optimisation campaign.
Why have we made available a completely free web design contract? We feel it will be useful to any design / marketing agency who wants a water tight contract which should exempt you and your business from any legal issues that may arise.
What do we ask for?
While donations would be great we would appreciate if you could link back to our site.
This contract cost us many hundreds of pounds to produce and by linking back to us, you give as many people as possible the opportunity to benefit from it. We feel it would be a waste, to just limit the contract to ourselves.
The 3 documents included:
* The terms: the actual terms which you and your client agree to.
* The works: the work that has been agreed to do.
* The contract: ties everything together.
The web design contract document samples are very easy to edit. Every thing that needs to be changed is in highlighted in colour and will only take minutes to edit.
You have a choice of Open Office documents or Microsoft Word format. The three documents are contained within a ZIP file.
Please download:
* OPEN OFFICE format
* Microsoft Word Format
While these documents have been written and checked in February 2006 by a fully qualified law firm, Media Surgery cannot accept any responsibility whatsoever from any matters that may arise. Please contact us if you have any queries.
