Updates from November, 2011 Toggle Comment Threads | Keyboard Shortcuts

  • admin 10:38 am on November 8, 2011 Permalink | Reply  

    Website Navigation 

    To correctly describe web site navigation, we need to know the meaning of navigation. The word is derived from naus /nautes (Greek), which relate to sea and sailors. In addition to navigation, these roots have also given us other words like Nautical (relating to the sea), Astronaut (a sailor of the stars – Aster means a star), Cosmonaut (a sailor of the cosmos) etc. Closing our brief English language discussion, "navigation" is the science and skill of moving from one place to another.

    Website Navigation Web site navigation is the science and skill which you apply to a web site that helps visitors move from one page to another.

    Creating good web site navigation is the most important task a web designer has to accomplish in the web design process. Web site navigation is the pathway people take to navigate through sites. It must be well constructed, easy to use and intuitive. Poor navigation does not help users and often, your site can prove to be less accessible than others.

    The most frequent issue in web design is that designers do not act and do not try to experience web sites from the user perspective. They are often misled to think that their web site’s navigation is the best when in fact it might not be. They might only have that impression for the simple fact that they’re familiar with it. It would be useful to open up a few sites and take a look at the web site navigation, how it’s positioned, how easy it is to go through etc. Consider how many pages you can access from any page. Can you go to related pages? Are there hints to help users navigate? Is there a site map with all the pages in the website? Can you figure out where you are at any time?

    Good navigation is fundamental to good web design – in both business and informational sites – users should be able to find information easily. If the navigation is not easy to use or intuitive users will quickly go elsewhere in search of information. We often see ourselves in front of web sites without knowing what to do next. The navigation is so well hidden or disguised that the some users simply don’t know how to use it. Navigation is the single most important element in creating accessible and usable web sites.

     

  • admin 10:27 am on November 8, 2011 Permalink | Reply  

    Using Colors on a Website 

    Choosing the right colors for your website is just as important as selecting graphics and content. This article discusses what factors to consider when selecting your website colors. Color on the Web is an excellent way to improve your Web designs. Colors have many effects on people. Certain colors can invoke specific emotions in people. Emotional reactions can affect the image of your company in the visitors mind and can have a major effect or your company’s “brand”.

    Using Colors on a Website When choosing the colors for your site, you need to first (as always) think of your audience. Is it a global audience? Is it primarily Western? Eastern? Are they older? Younger? Male? Female? All of these things and more can affect the color choices for your site. If you doubt color evokes emotion, consider the phrases, “green eyed monster” “seeing red” or “in a black mood”. The green-eyed monster is a reference to jealousy, seeing red means a person is angry and a black mood refers to depression. People do associate colors with specific moods. Scientific texts have proven that different colors can make people happy, sad, relaxed, excited, angry or afraid. Color is vital to the repertoire of your average Web designer, and yet many designers don’t realize that the colors they choose may be having more of an effect than they realize. Colors are an element of design that people react to on a visceral level. Often, they don’t realize they are reacting to it

    Anything that can evoke those responses in people needs to be looked at carefully when designing your website. Colors tend to be classified as “neutral, “warm” or “cool”. So, let’s take a look at some of them. An impressive color way is your invitation to your buyer to enter your site. If your colors are not pleasing to the eye, purchasers will simply skip your site in favor one which looks professional and inviting. If your colors are garish or too strong they will turn off many consumers. Before you decide, may I suggest you browse the top 30 sites for your category and analyze their color choices? Don’t select colors simply because they appeal to you – mimic the professionals? This is an inexpensive and easy solution for selecting a professional and inviting color palette for your site.

     

  • admin 10:26 am on November 8, 2011 Permalink | Reply  

    HTML Editor 

    An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version management systems such as CVS or Subversion.

    There are various types of html editors Text editors, Object editors, WYSIWYG editors.

    Text Editor :Text editors require user understanding of HTML and any other web technologies the designer wishes to use like CSS, JavaScript and server-side scripting languages. They were also referred to A Simple HTML Editor (ASHE).

    HTML Editor WYSIWYG Editor: WYSIWYG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. Some editors, such as ones in the form of browser extensions allow editing within a web browser. Because using a WYSIWYG editor does not require any HTML knowledge, they are easier for an average computer user to get started with.

    The WYSIWYG view is achieved by embedding a layout engine based upon that used in a web browser. The layout engine will have been considerably enhanced by the editor’s developers to allow for typing, pasting, deleting and moving the content. The goal is that, at all times during editing, the rendered result should represent what will be seen later in a typical web browser.

    What You See Is What You Mean (WYSIWYM) is an alternative paradigm to the WYSIWYG editors. Instead of focusing on the format or presentation of the document, it preserves the intended meaning of each element. For example, page headers, sections, paragraphs, etc. are labeled as such in the editing program, and displayed appropriately in the browser.

    List of editors are as follows:

    ASP.NET Web Matrix, Adobe Dreamweaver (formerly Macromedia Dreamweaver), Amaya, BlueGriffon, CoffeeCup HTML Editor, EZGenerator, Firefox, FirstPage, Freeway, Hyper Publish, iWeb, Jimdo, KompoZer, Microsoft Expression Web, Microsoft SharePoint Designer, Microsoft Visual Studio, Microsoft Visual Web Developer Express, Microsoft Publisher, NetObjects Fusion, OpenBEXI, Opera Dragonfly, Quanta Plus, RapidWeaver, Sandvox , SeaMonkey ,Composer, SiteGrinder, tkWWW, WebPlus, WordPress WorldWideWeb, ActiveState Komodo, Alleycode HTML Editor, Aptana, Arachnophilia, BBEdit, BlueFish Coda,E Text Editor, Eclipse with the Web Tools Platform, EditPlus, Emacs, EmEditor, Geany, HTML-Kit HomeSite, Notepad++, NetBeans IDE, NoteTab, PHPEdit, PhpStorm IDE, PSPad, RJ TextEd, Scintilla Smultron, skEdit ,TED.

     

  • admin 10:24 am on November 8, 2011 Permalink | Reply  

    Website Templates 

    Website templates are pre-designed websites all you need to do is add your own personal content and you’re ready to jump start your own website. You can customize the website templates any way you like. A web template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system. Web templates can be used to set up any type of website. In its simplest sense, a web template operates similarly to a form letter for use in setting up a website.

    Website Templates Web templates can be used by any individual or organization to set up their website. Once a template is purchased or downloaded, the user will replace all generic information included in the web template with their personal, organizational or product information. Templates can be used to Display personal information or daily activities as in a blog, Sell products on-line, Display information about a company or organization, Display family history, Display a gallery of photos, Place music files such as MP3 files on-line for play through a web browser, Place videos on-line for public viewing, To setup a private login area on-line.

    Not all potential users of web templates have the willingness and ability to hire developers to design a system for their needs. Additionally, some may wish to use the web but have limited or no technical proficiency. For these reasons, a number of developers and vendors have released web templates specifically for reuse by non-technical people. Although web template reusability is also important for even highly-skilled and technically experienced developers, it is especially critical to those who rely on simplicity and "ready-made" web solutions.

    Such "ready-made" web templates are sometimes free and easily made by an individual domestically. However, specialized web templates are sometimes sold online. Although there are numerous commercial sites that offer web templates for a licensing fee, there are also free and "open-source" sources as well.

    There are many public software and commercial packages promoted as being web templates and template engines, but there are a high diversity of disperse kinds of solutions. To select and group them in a systematic way, the first step is to characterize them as template systems. Various agencies and organizations use web template systems for mass-production of content when slower production alternatives prove unfeasible

     

  • admin 10:23 am on November 8, 2011 Permalink | Reply  

    W3C and Validation 

    The World Wide Web Consortium (W3C) was founded by Tim Berners-Lee after he left the European Organization for Nuclear Research (CERN) in October, 1994. It was founded at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) with support from the European Commission and the Defense Advanced Research Projects Agency (DARPA), which had pioneered the Internet.

    W3C was created to ensure compatibility and agreement among industry members in the adoption of new standards. Prior to its creation, incompatible versions of HTML were offered by different vendors, increasing the potential for inconsistency between web pages. The consortium was created to get all those vendors to agree on a set of core principles and components which would be supported by everyone.

    W3C and Validation It was originally intended that CERN host the European branch of W3C; however, CERN wished to focus on particle physics, not information technology. In April 1995 the Institut national de recherche en informatique et en automatique (INRIA) became the European host of W3C, with Keio University becoming the Japanese branch in September 1996. Starting in 1997, W3C created regional offices around the world; as of September 2009, it has eighteen World Offices covering Australia, the Benelux countries (Netherlands, Luxembourg, and Belgium), Brazil, China, Finland, Germany, Austria, Greece, Hong Kong, Hungary, India, Israel, Italy, South Korea, Morocco, South Africa, Spain, Sweden, and the United Kingdom and Ireland.

    In January 2003, the European host was transferred from INRIA to the European Research Consortium for Informatics and Mathematics (ERCIM), an organization that represents European national computer science laboratories.

    The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML and XHTML documents for well-formed markup. Markup validation is an important step towards ensuring the technical quality of web pages; however, is not a complete measure of Web standards conformance.

    The Markup Validation Service began as The Kinder, Gentler HTML Validator, a project by Gerald Oskoboiny. It was developed to be a more intuitive version of the first online HTML validator written by Dan Connolly and Mark Gaither, which was announced on July 13, 1994.

    In September 1997, Oskoboiny began working for the W3C, and on December 18, 1997, the W3C announced its W3C HTML Validator based upon his work.

    W3C also offers validation tools for web technologies other than HTML/XHTML, such as MathML or CSS.

     

  • admin 10:19 am on November 8, 2011 Permalink | Reply  

    Multimedia is media and content that uses a combination of different content forms. The term can be used as a noun (a medium with multiple content forms) or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which only use traditional forms of printed or hand-produced material. Multimedia includes a combination of text, audio, still images, animation, video, and interactivity content forms.

    Multimedia is usually recorded and played, displayed or accessed by information content processing devices, such as computerized and electronic devices, but can also be part of a live performance. Multimedia (as an adjective) also describes electronic media devices used to store and experience multimedia content. Multimedia is distinguished from mixed media in fine art; by including audio, for example, it has a broader scope. The term "rich media" is synonymous for interactive multimedia. Hypermedia can be considered one particular multimedia application.

    Multimedia Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more.

    On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats.

    The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color. Then came browsers with support for colors, fonts and text styles, and the support for pictures was added.

    The support for sounds, animations and videos is handled in different ways by different browsers. Some elements can be handled inline, and some requires an extra helper program (a plug-in).

    Enhanced levels of interactivity are made possible by combining multiple forms of media content. Online multimedia is increasingly becoming object-oriented and data-driven, enabling applications with collaborative end-user innovation and personalization on multiple forms of content over time. Examples of these range from multiple forms of content on Web sites like photo galleries with both images (pictures) and title (text) user-updated, to simulations whose co-efficient, events, illustrations, animations or videos are modifiable, allowing the multimedia "experience" to be altered without reprogramming. In addition to seeing and hearing, Haptic technology enables virtual objects to be felt. Emerging technology involving illusions of taste and smell may also enhance the multimedia experience.

     

  • admin 10:16 am on November 8, 2011 Permalink | Reply  

    Website Wireframe 

    A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, colour, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.

    Website Wireframe The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.” Within the process of building a website, wire framing is where thinking becomes tangible.

    Elements of wireframes

    The skeleton plan of a website can be broken down into three components: information design, navigation design, and interface design. Page layout is where these components come together, while wireframing is what depicts the relationship between these components.

    Information design: Information design is the presentation—placement and prioritization of information in a way that facilitates understanding. Information design is an area of graphic design, meant to display information effectively for clear communication. For websites, information elements should be arranged in a way that reflects the goals and tasks of the user.

    Navigation design: The navigation system provides a set of screen elements that allow the user to move page to page through a website. The navigation design should communicate the relationship between the links it contains so that users understand the options they have for navigating the site. Often, websites contain multiple navigation systems such as a global navigation, local navigation, supplementary navigation, contextual navigation, and courtesy navigation.

    Interface design: User interface design includes selecting and arranging interface elements to enable users to interact with the functionality of the system. The goal is to facilitate usability and efficiency as much as possible. Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop-down menus.

     

  • admin 10:14 am on November 8, 2011 Permalink | Reply  

    Common Mistakes in Web Designing 

    Typography: You must understand how fonts affect the design of a page, and your readers. Unfortunately, you are restricted to using only a few web safe fonts that are available on most operating systems. Even with this small list, it can be challenging to manage them in the right way for the best user experience.

    Don’t mix too many fonts: Choose one font for headings, and another for the body. DO NOT use more then two different fonts in the body text! Consider this to be a general rule. For example, you could use “IMPACT” for headings and then “ARIAL” for the body.

    Common Mistakes in Web Designing Choosing the right font size: We usually determine our font size with CSS by either using percentages, ems, or pixels. It should be usually defined on the body’s font-size as 62.5%.

    Alignment: Alignment is the adjustment of an object in relation with other objects, or a static orientation of some object or set of objects in relation to others. Alignment provides the structural framework of a design. The alignment can affect the mood of your page as well as how effective it is at getting its message across.

    Be consistent: Be consistent with your alignment. Don’t align one element to the left and another to the right; this will only cause more confusion. If you align all of your text to the left, then align the headings and other elements in the same manner

    Spacing (Padding): According to the W3C, the CSS padding properties define the spacing between the element’s border and its content. Spacing, padding, or even white space helps you to create a balanced layout.

    Don’t squeeze elements: Give your elements space. Allow a minimum of 10px padding between content boxes or individual elements – as a rule of thumb.

    Be consistent with spacing: If you choose to give all your elements padding of 10px, then great. But do not give your sidebar 10px padding, and the main content 30px padding.

    Don’t stretch elements: Also, try not to distance elements too far from each other – as you can end up having holes in your design. Your layout should look full and consistent.

     

  • admin 10:11 am on November 8, 2011 Permalink | Reply  

    Web Designing Process 

    Building a website consists of a process that most designers use. This process covers all the steps from deciding on a website to building it and putting them live.

    Project Definition: The most critical step in the web design process is creating an accurate project definition. A project definition includes a project brief and a project plan. The client survey is used to gather the information needed to develop the project brief and plan.

    Web Designing Process Site Structure: Good web design requires solid site architecture based on the site’s goals and target audience established in the project brief. The deliverables from this phase are:

    • Content Outline

    • Site Diagram

    • Page Description Diagrams

    • Wireframes

    Visual Design: "Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience."

    Site Development: This is the time to actually build the site. There are two major steps during this stage:

    • Confirm and Refine Technical/Functional Plan

    • Build and Integrate the Site

    Testing: The original project plan should always allocate time for formal testing. Ideally, you should identify a person to serve as the Quality Assurance Lead. This individual’s priority will be to create a realistic QA plan, manage the testing process, prioritize issues, insure that high priority issues are solved and conduct the final review and release of the site.

    Launch the Site: Plan the best date to go live. Consider your current web site traffic patterns and attempt to launch in a way that minimizes downtime. Make sure that everyone on the team is on call for any challenges that might occur during launch. If possible, consider a soft launch (a quiet beta launch that allows you to confirm everything is up and running before the official launch date).

    Conduct one final stage of quality assurance testing on the live site after it is fully in production to make sure everything is running smoothly.

    Maintain Your Website: The best websites are changing all the time. The owners pay attention to them and add new content as well as keeping the existing content up-to-date. Plus, eventually you will probably want to do a redesign, to keep the design up-to-date as well.

     

  • admin 10:10 am on November 8, 2011 Permalink | Reply  

    Web Designing Tools 

    As far as web development tools and platforms are concerned, there are many systems available to the public free of charge to aid in development. A popular example is the LAMP (Linux, Apache,MySQL, PHP) stack, which is usually distributed free of charge. This fact alone has manifested into many people around the globe setting up new Web sites daily and thus contributing to increase in web development popularity. Another contributing factor has been the rise of easy to use WYSIWYG web development software, most prominently Adobe Dreamweaver, Netbeans, WebDev, or Microsoft Expression Studio, Adobe Flex. Using such software, virtually anyone can develop a Web page in a matter of minutes. Knowledge of HyperText Markup Language (HTML) or other programming languages is not required, but recommended for professional results.

    Web Designing Tools The next generation of web development tools uses the strong growth in LAMP, Java Platform, Enterprise Edition technologies and Microsoft .NET technologies to provide the Web as a way to run applications online. Web developers now help to deliver applications as Web services which were traditionally only available as applications on a desk based computer. Instead of running executable code on a local computer, users are interacting with online applications to create new content. This has created new methods in communication and allowed for many opportunities to decentralize information and media distribution. Users are now able to interact with applications from many locations, instead of being tied to a specific workstation for their application environment.

    There are lots of web design tools available on internet, which will help you accomplish your tasks easily and quickly, and still more are coming. A web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some that just stand out from the crowd.

    Here are some popular tools using which can make designing websites a cakewalk and a rich experience for the users who later use it. These are Firebug, Photoshop, Panic Coda, Dreamweaver ,Fireworks, Adobe Flash, Web Developer (Firefox extension),Aptana paper and pen/pencil (for paper prototyping/sketching),CSSEdit,Notepad++,GIMP.

     

← Older posts

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel