Workless: A Clean & Classy HTML5, CSS3 Framework

Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily.

You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.

Requirements: CSS3 / HTML5
Demo: http://workless.ikreativ.com/

Web Development Tools Work On Mac

Mac OS X, well know for their simplicity and performance.

If you’re a web developer using a Mac you may have used many applications. Finding the best Apps for Freelance Web Designers is one challenging task. So in this post I have listed best Mac Apps designed for code editing, file and data transfer, database management, image editing etc. Some of them are free and most of them are relatively inexpensive.

1.VirtualHostX – VirtualHostX is the best way to host multiple websites on your Mac. It lets you easily create Apache virtual hosts on Mac OS X.

2. MAMP – MAMP is a quick and painless way to set up Macintosh, Apache, MySQL and PHP in the same environment. Instantly you’ve got a fully-functional web testing environment for your PHP applications.

3. phpMyAdmin – phpMyAdmin is the kindly old grandfather of database management scripts. Not necessarily hip to an attractive user interface, phpMyAdmin still has the skills to pay the bills.

4. Yummy FTP – Yummy FTP is an FTP and SFTP client application for the Apple Macintosh, built as native Mac OS X software from the ground up, with the goal of providing a reliable, powerful, yet easy to use file transfer utility.

5. Transmit - It offers almost all of the same functionality as Cyberduck, but adds a little more robustness for advanced user. For example, you can edit any remote file (even a picture or graphic) in any software using Transmit.

6. Coda – It is a complete web development solutions that fulfills all your coding needs, you will love to use its code editor that has support for various programming languages like HTML, XHTML, CSS, PHP, ASP, Ruby, Java and XML etc.

7. CSSEdit - cssedit is a CSS editor with a fantastic user interface. It has the look and feel of a Mac application, which makes the experience of editing CSS much more enjoyable.

8. Changes – Changes is a nifty application that lets you visually browse changes to your code base. Instead of having to use a subversion to manage your code base (though Changes works with svn and other repository software), you can use Changes.

9. TextExpander - TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings, code snippets and images.

10. TextMate - A popular text-editing tool for Apple Mac OS. It offers number of useful features, like search and replaces text, clipboard history, file tabs when working with projects.

Five free ebooks of webdesign you dont want to miss

Whenever i had a free time , i always look for the ebooks in the web.Here i have collected some ebooks which are specially focused for the web designer . Being a designer you always have to keep the idea about the current trends . Some of these books are online books and some can be downloaded in the pdf format.Reading books is one of the best habit.

1.The Webbook

If you are a new beginner for web, you can start with this book. This Book contains all the information that is needed to create a Web site , registering a domain name and renting some hosting space, creating your first HTML page, building full online database applications with PHP and MySQL. It also tells about CSS and Javascript.

2.Designing for the web

This book contains five sections, : Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one. and it covers a core aspect of graphic design.

3.Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition

This book contains 12 sections which covers the basic design principles and most of the aspect of the webdesign. The form designs and applications,multimedia,typography are clearly explained.

4.Dive into HTML 5

This book is written by MARK PILGRIM.If you can get to the idea about the HTML 5 , this book can be one of the good option.It starts with the history of HTML 5 to the all the standard .

5.Taking your talent to the web

This book was written in 2001 and was rated top five book by amazon.com.This book was written for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

These all books are yours,Enjoy it.

HTML 5 and Cheatsheet

HTML5 is a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007. This working group published the First Public Working Draft of the specification on January 22, 2008. The specification is an ongoing work, and is expected to remain so for many years, although parts of HTML5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. read more

5 Easy Ways to Improve website’s legibility

Making website’s content more legible is not a hard task. It doesn’t take a lot of time, mainly common sense. Microscopic fonts, text in colors that make it hard to see against the background color, and lines that are piled on top of each other are problems, but they’re easy to correct.
read more

RIP IE6: Is this Microsoft’s baby dead?

A site ‘ripie6.com‘ with the title “IE6 Bugs, Problems, Fixes, Solutions, Tips & Tricks, Hints? NO MORE!” has the following message:-

RIPIE6 is the obituary notice of Internet Explorer 6′s death. It’s a message for all users who still use that “browser”. RIPIE6 is designed exactly for those old-fashioned people who don’t see the point of updating their software.

Another site ‘ie6funeral.com‘ has the following message:-

Internet Explorer Six, resident of the interwebs for over 8 years, died the morning of March 1, 2010 in Mountain View, California, as a result of a workplace injury sustained at the headquarters of Google, Inc. Internet Explorer Six, known to friends and family as “IE6,” is survived by son Internet Explorer Seven, and grand-daughter Internet Explorer Eight.

read more

8 Tips to make Webpage Accessible

Simple things are most often unnoted by web developers during web development process. So, here is a list of the things web developers should take care of during the development.

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.
Excerpts taken from Wikipedia

1. Structural HTML

Most developers pay attention to the graphical presentation and often neglect the structure of document. An HTML document marked up structurally can adapt to different environments. Hence, an HTML document must be structured in such a way that it can be read without stylesheet.

2. Anchors and Links

Links are what made the web The Web. One should provide meaningful links and should make sure that links are accessible in text based browsers as well.

e.g

<a title="My Page" href="mypage.html">My Page</a>

3. Alternative text for non-textual data

To provide text alternative for non-text data like images you can use ALT attribute for briefly describing meaning. You can also make use of LONGDESC attribute for long descriptions.

e.g

<img longdesc="long desc" src="banner.gif" alt="Alt Text" />

Similarly, one should be careful using Image links. Without text equivalent, screen readers will not be able to display the link. Son Use of ALT attribute can allow screen readers to access link text.

4. Tables

Following tips should be kept in mind when using tables for layout:

1. The WIDTH attribute on TABLE, TD, or TH elements is usually unnecessary and can hinder a document’s accessibility. So, one should control all attributes using CSS.
2. Row and column headers should be distinctly visible. For column headers, TH is preferred rather than TD. Providing CAPTION or TITLE to describe the contents of table makes more meaningful.

5. Client Side Scripting

Client Side Scripting like JavaScript is not supported by all browsers and sometimes users can disable it. Hence one should make sure that web page is usable even scripts are not supported or turned off.
One should not rely on Client side scripting to navigate or view content. When JavaScript is used, it should not be relied upon.

6. Colors

Some old browsers do not support color names. Colors should always be specified with a hexadecimal triplet in the form #rrggbb or #RRGGBB. We should make sure that information presented through the use of color is available without it.

e.g

<!--
 body{
   color: #000000;
   background: #ffffff;
}
-->

7. Text-based browsers

Simulate the web page on text-based browser such as Lynx to see how document would look like in absence of graphics.

8. Validation

Validation of HTML documents is most important part. A validator checks the document’s HTML against a document type definition to ensure that the syntax of the HTML is correct. Validate your document to check for errors.

1. Webpage Validation Service by W3C
2. Section 508 Web Accessibilty

Why Follow Web Standards?

While discussing about Web Standards, most web developer’s cliche is “Who Cares Standards?”, “Too Difficult to understand, let’s forget” and “It worked anyway”.

Always be listed on side to follow web standards. It’s easy to build a website with good looking graphics and best functionality but why they just don’t add up a little effort to make a site follow standards. We must remember that, we are targeting visitors of site, and pages should be accessible irrespective of OS, Browser used by visitor. Using web standards offer much benefit to us.

• Separation of HTML semantics (structure) from design confirms better accessibility.
• Pages sizes are less and results in quick downloads. Browsers render pages faster when pages confirm standards.
• Following standard ensures that documents will be compatible in future browsers. There is no risk of browser not understanding your documents. Interpretation and rendering is easy for browser.
• Different CSS files can be created and adopted accordingly. Adaptation of document to print media, mobile devices is easy just by creating alternative style sheets and linking to particular CSS file.

The bottom line is: use web standards. It’s the future of web. If you are new and haven’t yet followed then start from this point upwards. And, after all this; its you to choose and follow and how you perceives.

Framework for Web Application Development

Logical tier (coding) and presentation tier (design) in a web development is common process where logical tier has collection of classes with its function and presentation tier has design issue of a website. But separation of these tiers is merely done. Currently We have a solution, via template system where logical tier throws/sends a lists of messages and presentation tier assembles or arranges these messages. The result is shown in web browser.

There exists many application that share common features, e.g. e-commerce application, bulletin board, news etc.
A common practice is; we just write/rewrite the logical tier and place the codes within the same server for all the application having common features.

Application shares a common feature but in general they are implemented separately. More precisely, codes for each and every application are placed in their respective server.
During this process, the class/method that may or may not be needed to particular application is also used and shipped which is obviously an overhead.

read more

Building Web with Web Standards

Quite a few people in Nepal are following a web standards to build web application. Whether be it small or large web application, no one cares about the web standards. The web standard has been there for a long time and its been continuously upgrading and updating. But, here people, company, designers, (whoever) are still developing web with HTML 4.

Why are we being like an ostrich? Is it because, we just wanted to earn money and forget all the things behind? Or Is it because clients here are unaware of the web standards? Or no one knows about the benefits that we could achieve with building web with web standards? Or there are other factors or reasons?
Even most popular and mostly viewed site do not follow web standards. For example
1. eKantipur, claims oneself as number one news site uses frame and heavy graphics.
2. Cyber Sansar, a popular entertainment site has heavy graphics and is built with HTML 4.0 transistional.

There are numerous other popular sites that does not even passes the W3C validation. A lot of work is yet to be done. These site has to come with as an example for others. Other follows these popular sites.
So, lets not use deprecated features. Lets upgrade and update ourselves. Lets build web applications that meet web standards.
What is Web Standards?

The W3C along with other groups and standards bodies, established a framework for creating and interpreting web-based content. These framework are web standards. These are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. Designing and building with these standards simplifies and makes site accessible to more people and more types of Internet devices.

We should follow the basic guidelines of W3C. Its not compulsory that you should build sites with XHTML Strict and CSS 2.0. But make sure to follow primary rules to build pages.
Most of us Ignores

1. Declaration of doctype at the beginning of page
2. capitalizing of HTML tags
3. missing of proper alt and longdesc attribute in image tag.
4. Improper nesting of HTML tags

and other follows………. (if you know please state others mistakes we commit as well)