I always have a problem with world time zones. I had to ask two of my friends from US to check for the time. But their times are also different so they can only tell me the estimates. I did sent the entry a few hours before due time (I hope).

I don’t care whether it went in on-time or not; I’m just satisfied with myself that I’ve done something on my weekend and enjoyed it. It was interesting; took me a couple of hours to think the possible ways to slice and shape it up. I got bored on half way but my bro said I should finish up and done with it, so I did.

I’m not that satisfy with my CSS structure but I think I tried my best. It’s valid xhtml transitional. I don’t know why I didn’t make it xhtml strict…I guess I forgot and used to with my normal xhtml transitional Doctype. I thought of asking a friend to recheck my code but I dismissed that thought cos’ it’s a competition and I should participate it fair and square to find out what I’m capable of. I’ll upload my entry on my site soon.

Here is my entry: CSSOFF – Jabroni (2007-06-01)

Anyways, my weekend was meaningful and busy one…yah not bad. How’s your weekend go? Oh, Do you know any good world time site/application that list different types of time zones and country times? I’m too lazy to google.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?

Every month, we’ll design a web page in Photoshop and host a competition to see who can turn it into the best web page. The designs we release will present specific markup challenges, along with design and coding considerations for everyone from web newbies to experienced developers.

The point of CSS Off is to make you think critically about web design, and then execute it on a dime. You’ve got 12 24 hours to take our design and slice it up.

The first contest starts at 1st June 2007. Can’t wait to see how it turn out. If time favors, I like to give it a try too.
To do so…I need to install Photoshop. I’ve been using Firework too much that I’m forgetting how to use Photoshop.
May be I’ll convert their .psd file into .png and slice it up. Will see their design first. Read details here.
Join along?

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?
• Rotten Service at ANZ Suva

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your body.

So join the gang, get ready to strip and drop your style sheets on April the 5th.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

No related posts.

Welcome to the World’s Highest Website! Currently, it’s 18.939 kilometers high (that’s about 11.769 miles), and an enormous pleasure to scroll.

What exactly are they trying to prove or what exactly is the purpose of that website? Ok so it is very tall. It’s valid and accessible. I checked the code, it’s sweet and simple…but I still don’t get the point. Am I missing something?

div#whws { font-size: 100cm; height: 18939em; line-height: 1.0; }

div#whws { background: url(../../img/tape.gif) repeat-y top center; margin: 42px 0; }

div#whws + div { position: relative; }

So with that CSS, all they did was use this div tag, and it generated that long repeated images.O…K!!! So…what? What is it exactly? Is there any hidden meaning that I’m missing? Or it’s just that some people with lots of time in their hand having fun?
Hmmm…makes me think, wanna know proper answer.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

No related posts.

I like the very idea of in progress sites for:

• you got to see how actual work (layout, design, typography, ideas, structures, etc) is done,
• you got to study how developer/designer plan things through,
• you got to learn some tips and tricks along the site progress,
• you got to observe lots of things such as
  - how developer handle each task,
  - how much time/effort he put on the site,
  - how dedicated he is to the site,
• and many other professional and personality aspect of the developer and the whole site development.

I also was thinking of posting site development in progress posts as I work on a few site but doing things in your head is alot easier than actually putting them down and working on it.

I guess some great minds think alike but when it’s with a role model like simplebits, it spread alot faster. You bet, I’ll be checking those sites regularly on their progress.

I hope Sarnil find some time to work on his site again soon as I heard he is very busy and on business trip. That reminds me, I’m still waiting for Jachin new posts.
Man, these guys are just so busy…or rather lazy?

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• SDLC – Software Development Lifecycle

Seriously, I don’t know the exact figure and I don’t want to talk about money matter first. Most of the time, I ask why they want the website for, what are they going to do with it, get to know a bit of their requirements and general site audience. Depending on those, you start slicing your time against the tasks and provide the figure. So there is no set price for a website.

Some people think making/getting a website is so easy as 1 2 3. May be so. But it depends alot on how well you want your website to be, what platform or technology to use and many many factors.

I got this article a few weeks back from a friend and I thought of writing about it. Things are so busy this week and just now I can get back to my deferred posts. There is a great article and a good discussion at personified.com : How much should a design cost?, that you should check out for more understanding of how they decide on the cost factor.

One thing to note is that, the author is talking about the design cost based on ready-made CMS platform such as (WordPress, MoveableType etc) and not custom made CMS. More like the whole website functionalities part is not included as it’s open source and free of charge. His figures are only on DESIGN part such as creating CSS, valid code and abit of customizations. Plus he is concentrating mainly on Blog design. For those it costs around US$ 1500 – 2500. That would be around Fj$ 5000.

A blog is quite different from a website in terms of functionalities as well as a requirements. Blogs are more like news post or articles based publishing whereas website are different nature such as ecommerce site, portfolio site, portal site etc. For those kind of site, the cost will go higher because of custom made functionalities and you cannot use wordpress for that (well you can, but not advisable…so I think).

For those kind of websites, you have to start from scratch. Requirement gathering, specifying technology to use, database design schema, layout design, the backend codes, front-end codes, graphics…etc etc etc. Every steps require time and time is money. So the more requirements you have, the more steps involved, the more time you need and the more it’s going to cost you.

I think I’m not the right person to talk about it as I don’t involve in cost decision making but I only involved for specifying tasks and adding time against it. But you get the general idea of how we charge for website design and development. So comparing our (Fiji) design prices with overseas (US – personified.com) prices, we are way cheaper. We make custom content management systems, we use expensive and latest technology – MS SQL + .Net platform. Ofcos’ there are quality factor to consider too. If I must say and be fair about it, we are a bit lack in design quality factor cos’ most of our sites are not valid standards yet. But it’s only a matter of time we improve our quality…ie. our developers’ responsibilities.

You should check this article for more detail explanations: How much going to cost to make a website.

I like the first comment. I must add if (($CMS != “Word Press”) || ($CMS != “PHP/Open Source”)) { echo “price goes up”; }

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• SDLC – Software Development Lifecycle

The widely accepted rule was to let the users decide the layout; after all why should we need to download the same design over and over? Design was something the user decided, not the author.

But those content-only sites didn’t live long. First tables, then CSS, enabled users to make sites more interesting and in many cases easier to read.

Everything has pro and con. Sometimes it’s so hard to take sides.

Myself as a user, I like the idea of reading full feed from various site content through feed reader for faster and easier (no need to remember all site urls) accessibilities.

But then again, you lost track of the site look and feel aspect as well as some other factors like aside links, photo galleries, no-feed related content pages such as “about page”, “portfolio”, others articles and even a good comments discussion. You become very unfamiliar with the site and sometimes you don’t even recognize the site that you roll the feed from when you happen to came across.

Not too long ago feeds were introduced. Feeds make it easier to subscribe to websites by separating content from all the “design stuff”. This enables users to decide how your content should look. Proponents often talk about how much faster it is to read content from different sites when they all look the same. No time is lost trying to understand a new design.

Apart from having a great content, site aesthetics is also one of the essential factors of web medium.
So, myself as a designer/site owner, I published partial feed only.
Why? Becos’ I got alot more stuffs to show off than just feed content.
I prefer varieties of stylish medium than a dull unstyled web.
I want my readers not only to taste my writing but also to feel my overall site identity.

What kind of web do we want? What kind of web do you want? Should we go back to an unstyled web where content is the only thing that matters? Did the “content only”-proponents win after all? Is it a “feeds only” web what we want?

In the case of “Users should decide VS Webmasters should decide”, I take it as webmasters are the advanced users and hence they have a chance to change the direction in which they prefer best. ie. If you favor unstlyed web, go ahead and publish full feed. Otherwise, support the effectivness of design aesthetics and force trick the users to the direction by publishing a partial feed.

Oh yes, LONG LIVE DESIGN!

Read Emil’s full article on “Feed – a threat to design on the web” here.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?

Header image is the first thing you set to customise your WSS sites. There are numbers of CSS files for you to play with for the look and feel of the whole site.

For this header part can be manipulated from OWS.css file, which sits at
c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES

Place your header image here: c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES

For WSS adding the header image tips, you must read this first two articles. #1 A Quick Way to Add/Change the SharePoint Header Area Graphic and #2 Adventures in CSS: Putting a banner image above the menubar in WSS

My version include abit of adjustment from the second article. The main difference between #2 and mine is that, #2 made use of second table’s CSS ie. .ms-bannerframe to apply the header image whereas in mine, I’ve use the first table’s CSS – .ms-main as you seen in the following code.

The image is added in .ms-main as followed. Once you add the image, the top menu bar still sit on top. To move the top bar down, you have to add margin-top space to .ms-bannerframe.

.ms-main{
background-image: url(“/_layouts/images/ats_intranet_header.jpg”);
height: 170px;
background-repeat: no-repeat;
}

.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
margin-top: 170px;
background-image: url(“/_layouts/images/topgrad.gif”);
background-color: #002d96;
background-repeat: repeat-x;
}

The method in #2 is mainly for default theme sites but once you apply it with different themes, the top-menu bar appear out of control. It is due to the image height set in .ms-bannerframe which is applied to second table and it acts as a background image for top-menu bar as well.

margin-top: 170px; this leave the space for the header image. The height of your header image should go there, ie. the one you use in .ms-main class. In my case it’s 170px.

.ms-bannerframe, .ms-grheaderbackground, .ms-stormefree {
background-image: url(sitelogo.jpg);
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 72px;
}

Article 2 style effect: Theme1, Theme2, Default Theme

My Style effect: Theme1, Theme2, Default Theme

The disadvantage of my method is that, you need a fix image width. You cannot apply background color to it cos’ it will cover the whole page background as well. Also it doesnt work for individual webpart pages ie. a separate webpart .aspx pages that you created in document library. I’m yet to figure that out.
What is the advantage? hehe well it serves my purpose cos’ none of #1 and #2 work with my requirement.

This is just an extra note added to the first two articles, so that whoever with similar to my case can make use of it.

Thanks Ian for the articles.
Links: A Quick Way to Add/Change the SharePoint Header Area Graphic
Adventures in CSS: Putting a banner image above the menubar in WSS

Technorati Tags: WSS, Windows Sharepoint Services, Banner, Header, Menubar, OWS.css

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

No related posts.

Check these out:
# Think Vitamin – Orange,

Vitamin is a brand new online magazine dedicated to that new web industry.

Vitamin will inspire you, teach you, advise you and sometimes test you with its in-depth features, audio interviews, training sessions and reviews.

It’s updated every week, and it’s free!

# Bite Size Standards – Cookie!

Bite Size Standards aims to offer concise web development tutorials, tips and tricks. Written by designers and developers who are passionate about web standards.

P.S: Thx Jason for link.

Better grab their feeds.
Oh by the way, what’s those letters in bite size standards logo? I can read the big “B” and “S” but what’s that down below? “I-T-E”, “I-S-E”?? What’s that mean?

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?
• SDLC – Software Development Lifecycle

Updated

OH GOSH!!
I have no idea it’s so hard to get naked.
I thought I’ll just comment out a few style links and done with it but nooo…
It has to go grab a style from default theme and I tried to rename the files n folder names as well but still mayvelous won’t go naked. LOL

I guess nothing seem that easy untill and unless you’ve tried it. What an experience it is. I’ve discover something today about wp themes especially the squible theme.
Worth stripping.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

No related posts.

First Annual Naked Day April 5th will be a day of nakedness for all webmasters to remove their style sheets from their website for one day.

The fact of the matter is, if you’re writing good solid markup to begin with, it shouldn’t be all that bad anyway. It will be a test case to see how usable your website is to others without a design. So in the meantime, don’t hesitate to prepare your site for the big day.

What the hell, I’m IN!, strip it off.
Mine is not really my design but who cares, good to practice for future naked days for my own design.

So on 5th April, you’ll see Mayvelous naked.

Link: First Annual Naked Day

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?

What’s New in Version 2.0

• Image Sets: group related images and navigate through them with ease
• Visual Effects: fancy pants transitions
• Backwards Compatibility: yes!

Very light, fast and way better than flash image effect(don’t start Min Thu).
I mean I prefer this over flash gallery effects.

Check out the “Image Set”, click one image and hover over it to browse forward or backward.
Very cool isn’t it?

So better get one copy and test it yourself. I got to too, I’m abit behind with it.
Download Link Here: Lightbox JS V2.

Technorati Tags: JS, LightBox V2, Image Effect, Scripts

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• New Regulations on Credit Card Usage Overseas

a set of 40 layouts that have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2.

Download the entire collection, 40 HTML pages in a single zip file.

Link: Layout Gala
Via: Web Graphics

Technorati Tags: Layouts, Resources, Reference, Webdesign, CSS

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Be a Web Designer?

Lightbox JS is a simple piece of JavaScript that allows you to place images above the page rather than within. A thumbnail image can be clicked on to show the full size image ontop of the page which remains darkened in the background. Closing the overlayed image brings the webpage back to normal, the user never leaves the current page.

I got an idea to use this lightbox in a new section that I’m planning to add here. At the moment I’m a bit lazy to test it yet but one of our very own developer has already used that in the new revamp of FijiTimes site and it’s working like a charm. You can have a look at in the story section. Click on the story image to enlarge and see how it go. Cool huh!

Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).

More info on what/how to use LightBox JS can be find as follows:
# Lightbox JS by Lokesh Dhakar
# LightBox Gone Wild at particletree
# Working Samples at FijiTimes.com

Technorati Tags: LightBox JS, Development, Scripts

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

Related Posts:

• Rotten Service at ANZ Suva

I would expect a bit more from web+interactive company like theirs to show more professionalism in their site. After all the first impression sometime counts and in this case the company portfolio site would determine the reputation and skills behind it. Anyway I like the design, very artistic with interesting decay looking text and I like the left menu. The only problem I see is Drop Cap characters.

If I have to do drop cap I would rather use css for that. I’ve tested it and it’s really easy. You need only 3 lines or so.
Well for my own note as well as for you (if you wanna know) the CSS code for Drop Cap effect and implementation as shown below.

#dropcap
{
	float: left;
        font-size:300%;
        font-weight: bold;
        line-height:50px;
}

<p><span id="dropcap">W</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

There see short and sweet. No need to create image characters everytime you wanna make that effect. Ok you just have to adjust font size and line height according to your need.
That’s it, I gotta sleep.
Cheers.

Sponsor: (yet to be): Dreamhost: Get $50 Off with Discount Code: 50MV

No related posts.