Me, Myself and Mayvelous

Archive for the ‘Html’ Category

Interesting Contest: CSS Off

Here is one interesting contest I come across.

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?

Dashes in Rad Files

This is one of the most frustrating errors I’ve got to fix. I’m using rad editor for my aspx pages and in some pages, it works like a charm but some just doesn’t. Whenever I tried to update the page, it threw this error, “An error has occurred. Refresh the screen and try again”, in the rad editor content area.

My first thought was, the files much be read-only and hence to make writable to the files but it wasn’t the case. So I checked my code, cross check with another working page, recheck again and again, but I found no difference in code and doesn’t work. Then I created a new “test.aspx” file and pasted the same code and tested it. Strange enough, it works!

So I thought may be my page got corrupted, so I deleted that page and recreated a new page with the same name, paste the code back in. Then it’s not working again. The same god damn code in “test.aspx” is working and not in the other page.

Something was really fishily wrong! Since they are the exact same code, the only difference I can think of now is the file name. But I can’t change all the file names without knowing whether that’s the actual cause of the problem. So my final option, turn to google for help and there it was!

(ID#250) “An error has ocurred. Refresh the screen and try again”

When saving the content from r.a.d.editor directly in the ASPX/ASCX the following error appears:
An error has ocurred. Refresh the screen and try again.

When saving the r.a.d.editor content directly in the ASPX/ASCX the page name should not contain “(“, “)”, “-”, or ” ‘ “. If such names are obligatory, r.a.d.editor’s content should be saved in a database.

Link: Telerik KB Article

So stupid error. My error files are named using the “-” dash. Once I removed the dash, all working. It’s just so lame error message and even in the KB no explanation about why it cannot use a dash in the file names. Well you can use dash if you saving content in DB, but why not in the actual file? I just not satisfy with that KB solution explanation. Nevertheless, it solved my problem and thank god for that. Took hell lotta time from me. I guess next time, I better google first then check on my code. Hmm.

Every time a customer asks you a question like “How much going to cost to make a website?” or “How much for a design?”, I got a problem answering and most of the time I say, “It depends…”. And most of the time I transfer the call to my senior colleagues or project manager.

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 : 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 – 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”; }

Pain In The Ads

I was reading about this lipstick article (Feel Naked Without LipSticks) on 9rules which actually got some quotes from this lovely site, “Meriyas Lounge”, so I thought of checking it out for more articles.

I was expecting to find some female fashion shop or rather, female accessories and widget review blog. Whoa! It just took my breath away. Seriously!

“Meriyas Lounge”

I’m looking for something to read or click on. I don’t know which one is the site content or site logo or heading at all. I’m seeing… Ads, ads, ads, and ADSSSS! I have no idea where exactly they got that lipstick quotes from, may be some sub pages but from the very look of the main page, it just taking me off from browsing farther. It took me a couple of minutes to find the actual site menus, oh yah; they are right at the top-left corner. Kind of lost in the overall ads contexts.

I guess the site is seriously after afflicted $$$, and yes, it’s good for them. But as for the site visitors…I doubt if they wanna revisit the site for the second time. I wish they added some information about the site in the main page and reduce some ads or move a few to sub pages. In that way, visitors can easily make out what the site is about and the content is more accessible. The site designer should reorganize the ads placements and layouts to blend in with the content rather than using too obvious packs which everyone might tend to ignore. But then I don’t know much about online ads business so who knows their ads placing suit their purpose. I’m just talking from the user perspective as it’s very hard to browse the site and the main content is lost in the ads.

For my own satisfaction, I’ve clean up the site to see the relevant content. I blocked up all those ads and finally got this very clean site. Lovely!

Blocked Ads from Main Page
blocked ads

Clean Site
meriya clean

Now…what was I come here for again? Oh rite, cos’ of that lipstick article.

  • Comments Off
  • Filed under: Design, Html, Life Style, Site Reviews, Web
  • In WSS, there is no default header or whatsoever, it only has “Top Menu Bar” with those main navigations like “Settings”, “Document Libraries”, etc.
    My understanding of the “Header” is the image that go on top of the “Top Menu Bar” which span through out the site.

    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.

    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
    3 2 1

    My Style effect: Theme1, Theme2, Default Theme
    good-temp1 good-temp2 good-tempDefault

    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: , , , , ,

  • Comments Off
  • Filed under: CSS, Design, Development, Html, Project Notes, WSS
  • New Web Resources Sites

    So am I imagining or lately people tend to get hungry alot? I’m seeing two new cool sites and they both using food stuff in their logo.

    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?

    I was just thinking about April Fool idea and this is way more interesting.
    Think about it, browsing the web and every single sites will be stripped off the cover.
    Fully raw content…I like that!

    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. :P

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

    Link: First Annual Naked Day

    Flickr Photos


    Twitter Status

    Goodie Links

    Mayvelous Friends

    I'm an Author for Global Voices