This book gave me a more in-depth look at web design:
1. Just because you can doesn’t mean you should
2. There is almost always an exception
3. Users are the ultimate judge
4. Crossover experience is something a designer needs to always strive for: know both the technical and aesthetic
a. Download time should always be as minimal as possible.
b. Navigation should be intuitive.
c. Consistent Web terminology and metaphors, such as the shopping cart system, should be used (unless there is a valid reason for an exception).
d. Writing should be clear and concise to expedite use.
e. Sites should always be tested by a variety of users in a variety of browser environments.
f. Accessibility for users with disabilities should be accounted for.
5. Humility is the best approach: learn from others
6. It is impossible to please everyone
7. Try to stay on top of specifications and standards
3 Web-Design Philosophies
1. Us ability – function
- strips down site to bare essentials (no images)
- usable in all browsers
2. Multimedia – form
- uses animation, audio and video
- many called flash sites
Pros:
- much of the technology is vector/mathematics-based which allows for higher compression w/out loss of quality
- reasonably easy to learn
- communicates multi-dimensionally with graphics, animation and audio
Cons:
- browsers must have a plug-in for the user to view the graphics or site (now less important)
- Multimedia software does not integrate with databases as easily as existing Web technology, such as .NET, Cold Fusion, and JavaServer Pages.
- do not add many compression benefits for bitmap images, such as GIFs.
- usually more cost-prohibitive to the designer and to the client
- can be overpowering to use
3. Mortised – combo
- piecing two images together by using a table (traditional)
- piecing together graphics, text and functionality to build striking, graphically appealing sites that are fist, highly usable and flexible
- knowledge-driven rather than purely software-driven
- takes skill and creativity to produce faster, more customized designs with less code
- use existing XHTML and CSS technology and can be easily customized to work with Microsoft .NET, Adobe ColdFusion technology, PHP technology, or Java technology, specifically JavaServer Pages.
- can be designed to be scalable, database-drived sites
- are modular: can use technology only in specific portions of site
Pro’s and con’s of each philosophy depend on:
a. Aesthetics— How professional is the look and feel of the site? Is it is consistent with the desired branding of the business or individual?
b. Usability— How quickly and easily can a user find and process information while being able to perform necessary tasks?
c. Functionality— Programming should enable the functional aspects of the site, such as forms and database-driven content.
4 Ways graphics increase usability:
1. The impression of a site, thus the identity of a business or individual is first judged visually
2. The brain processes images more quickly than text: can communicate more ideas more quickly (may actually conserve technical time and space)
3. Graphics and color help lead a person’s eye: indicate more pertinent information and can be used to organize information
4. Graphic technology can enhance functionality
a. Ex: 360 images (real estate)
1990s browsersà Mosaic, Netscape, Lynx (text only)
* global usage statistics- allows designer to know how most users view the internet so they can design for the majority. Statistics include:
- Which version of JavaScript does the browser support, and does the user have JavaScript turned on in the browser?
- What is the operating system of the user?
- What is the resolution of the user’s monitor?
- windows servers log user information once site is created: collects data that includes everything from browser used to the individual pages visited
- windows software used to analyze data (most common is number of page visits)
à WebTrends, SmarterStats
- can also used free/ fee-based online applications: site provides JavaScript code that is added to the bottom of one or more pages in a site. Data is sent to the tracking site when page is hit. Designer can log in to view the statistics à www.extremetracking.com
Branching- once a user hits a pages, a basic JavaScript code is used to determine a user’s software information, (which browser is being used, what version of JavaScript it supports). Then uses different pieces of script for different browsers
- good for techniques that only function in certain browsers
- increase download time of page
- increase amount of work necessary to maintain a site
DOM – Document Object Model
Bandwidth - the amount of data that is either uploaded or downloaded over a specified time.
- modems: 9600bpsà 14.4Kbps à 28.8Kbpsà 56Kbpsà 256Kbps (DSL)
Weight of a page = amount of kilobytes
è Standard weight from 20KB to 300KB
Output HTML- eventual XHTML a database-driven site returns to the browser
· Keep a download size goal in mind when creating site (50KB)
Iframe – an individual frame that can be placed anywhere in a page, controlling how long a page could be (box w/scrollbar in middle of page)
4 Reasons not to use traditional framed sites:
1. Allowing a user to bookmark a site is impossible unless JavaScript is used. The problem is that when a user bookmarks a page, only one frame is bookmarked (usually, it is the last frame that was clicked in) rather than all the frames. As mentioned previously, though, this can be a benefit in some circumstances.
2. Targeting frames and passing programming variables is considerably more complicated than when using Include files (that is, SSI, or Server Side Includes).
3. Increasing the number of scrollbars decreases the amount of space a designer has to work with
4. Search engines do not like frames. Therefore the site will suffer in search engine rankings, if it’s ranked at all.
Image buttons – impractical:
- Increases download time (moseover images as menu items)
- Maintenance (creation, editing, addition)
- Dynamic functionality: database- driven sites must create pages as well as menus on the fly (can’t use static menus)
- Search engines can’t read text saved as an image
Requirements:
1. Look and feel requirements— These include content placement, how the site conveys the company’s message, the color palette, and font and image concepts to be presented.
2. Bandwidth requirements— The way a site is designed will determine how large of a download the site will require. By understanding the bandwidth (download size) requirements, a designer can determine the balance between graphics and text to be used.
3. Resolution requirements— A site with improper resolution can hinder its usability and/or credibility.
4. Scalability requirements— Because nearly all sites are in continual evolution, it is important for the designer to consider how the site can be expanded and/or changed in the future.
5. Content requirements— The content volume of a site will influence nearly all other requirements, including the look and feel, and the bandwidth, resolution, and scalability.
* should have official requirements doc for sites over 15 pages
Scope creep- edits continually coming in with no foreseeable end
In-depth Requirement Doc Should Include:
1. Site/Client name— Not all sites have the same name as the company they are designed for. Therefore, this is important to know before beginning a design.
2. Prepared by— It is always helpful for your client to know who prepared the document and how to get in touch with that person.
3. Date— While it might seem obvious, knowing the date helps the designer write future summary reports and/or track site-design efficiency.
4. Client contact(s)—The more contacts the better. A designer can never have too many people to call when various questions arise during development.
5. Version— While the version of the requirements document should also be covered with the naming convention of the document (for example, requirements_v3.doc), it is also wise to include it in the document itself. Sometimes the version number will remind the designer to save the current document as a new document.
6. Executive summary— This summary gives the designer and/or design team the gist of the site. Half the battle of designing a site is getting “the big picture.” An executive summary helps make more sense of the specifics.
7. Assumptions— Many times the designer and client do not share the same assumptions. For example, the designer might not know that an intranet site also needs to serve as an extranet site, which could change the technical requirements. The fewer the presumptions, the more effective and efficient the development will be.
8. Dependencies— While not all sites have dependencies, it is important to know if any exist. An example of one possible dependency could be if the site must rely on another company or site for live content, such as an RSS (Really Simple Syndication) feed.
9. Objectives— It is easy for a designer to lose focus when getting into a project. Being able to revisit the objectives of a site can be helpful in regaining and clarifying that focus.
10. Action items— Action items provide more detailed information on what specific steps need to be taken to accomplish various tasks
11. Detailed requirements (includes front-end questions, functional requirements, and a site map/flowchart)—These are the heart of a requirements document, at least for a designer. They give the specific details on design, content, and functionality that a designer needs to include when creating the site. An example of such a requirement might read, “Include login form area on the homepage that includes the User ID and Password fields, along with a Submit button.”
12. Proposed solution(s)—Talking about and documenting solutions are two different things. While the client may think one thing after a phone conversation, the solution actually written out may present another picture. Such documentation helps to prevent misunderstandings.
13. Possible future site considerations— Because sites are in continual evolution, it is important to create a scalable design that can handle future additions. In other words, the client may say, “We need only 15 pages for this phase; however, the design will need to accommodate another 20 pages in phase 2.”
14. Sign-off section— Signing off on a document provides closure for the client and assurance for the designer, signifying that both sides are in agreement on the road map of a site.
Front-end requirements and flowchart- determine the design, site architecture and navigation
Basic Important info before beginning:
1. Who is the audience, and what is the purpose of the site?
2. What is the feeling you want to convey to your audience with your Web site?
3. Will the site need to be expandable, in terms of sections, in the future?
4. What browser platform and resolution (for example, Internet Explorer/Firefox or 1024 × 768 or higher) do you require?
5. How many levels, or “clicks,” can the deepest information be?
6. What is the most important information that should be put on the home page?
7. When can text and graphics (logo) samples be supplied for designing the comp?
8. Do the images and colors on the site need to be consistent with any existing branding?
9. Does it matter if the site scrolls vertically?
10. What kind of functionality (for example, forms, dynamic text, or multimedia elements) does your site need to have?
11. What is the desired download size of the home page?
12. Does your company have a tagline?
13. What is the proposed deadline(s)?
Flowcharts-
- Can use Microsoft Visio or PowerPoint
- Can be used to create a site map (take out lines, comments and back-end stuff)
Bandwidth not a problem when…
1. Inranet vs internet site – internal business networks (less variables)
2. Corporate vs general audience – users more likely to have higher bandwidth
3. High-bandwidth functionality vs content-driven – online music store
Relative pages- use relative resizing to fit a screen
-layout may be compromised: allows less control
Color Depth –
- 8-bit (256 colors), 16-bit (65,536 colors), 32-bit (16.7 million colors)
Scalability – easily expandable/editable
1. Editable sites— A designer should be able to edit pages and sections of a site without any major rework of the design.
2. Modular sites— A homepage, for example, should be comprised of several files, or pieces put together, that can be easily replaced or edited.
Include files- used by developers to call code that is used repeatedly throughout a site (footer information for site). * can break down home pages into include files that can be used to build other pages
- can be called into ColdFusion, PHP, .NET or SDP pages
- To use include files, all a designer needs is to host a site on a server that offers server-side processing, such as Microsoft (.NET pages), Apache HTTP Server (SHTML pages), Adobe ColdFusion server (CFM pages), JSP server (JSP pages), or a opensource server that runs PHP pages.
Examples of code that used to include files into other files:
- NET page:
- SHTML page:
- ColdFusion page:
- PHP page:
- JSP page:
3 parts of site must be flexible:
1. Menu navigation
2. Content layout
3. Title areas: second and third level pages must be identifiable – include heading with enough room for longer titles
Site Architecture- the way a site is constructed and flows in terms of sections and pages
à site map (contents page): a visual representation of site’s architecture
- use a consistent naming convention
- limit the clicking: make everything reachable within 3 clicks
- avoid linking the user out of the section/ circular hyperlinks
- cascading versus flat architecture (putting
à cascading
- organizes similar types of content on their own subpages (min-home pages)
à flat architecture
- fits as much info on homepage as possible
- overload of information , difficult to navigate (news sites)
Layout- positioning of elements
- scrolling
- pros:
1. The design can fit more content on one page.
2. The user does not have to click and wait for another page to load. This not only takes time, but the user must also refocus her eyes on a new area, most likely at or near the top of the screen.
3. It is easy to quickly navigate if the user has a mouse with a scroller wheel or a stylus, which also allows for easy cursor movement.
- cons:
1. It takes less effort to click on a link that opens a new page than to mouse over to the scrollbar, click on it, and drag it up or down.
2. Because scrollable pages are longer, their download is typically larger.
** NO HORIZONTAL SCROLLING
- positioning content
- menu can be placed anywhere but standard is left or top
1. do not move menu
2. do not change the menu on different pages
3. limit the number of menus (no more than 2)
- header:
1. logo
2. advertisements
3. external links
4. company tagline
5. hyperlinks that do not belong in menu
6. content
* use as much content as can be cached by the browser
- body: standard is upper center or upper-left
* TO CONFUSE IS TO LOSE A USER
5 Menu Types
1. JavaScript or Java applets—
- can expand and contract when items are clicked.
- allow the user to view the entire site by quickly scanning the navigation on one page, and they can be cached.
- more difficult to maintain (unless dynamically built on the fly using data from the database)
- they may need to be programmed for the two different DOMs
- generally have a sizable initial download.
2. Macromedia Flash—
- for building more creative menus
- allows a designer with limited programming experience to build graphically animated menus,
- also allows MP3 and WAV audio to be added when a user mouses over or clicks on menu items.
- the user must have the Flash plugin, these menus are more difficult to maintain, and they can annoy the user if not designed correctly.
- The wow factor is great the first time, but quickly loses its appeal thereafter.
3. Image-mapped graphic—
- can make any section of an image clickable allowing more creativity with menus.
- well-supported by older browsers and can be cached.
- have a higher download because of the image, additional code is necessary, and both the image and code must be maintained, which is considerably more time-consuming.
- For the most part, these types of menus are no longer used.
4. HTML text with mouseover—
- supported by all browsers, require only a small download, and can be dynamic.
- let the user know when an item has been selected, and they are extremely easy to maintain.
- though allowing for creativity, the font types are limited to Web text unless embedded fonts are used, which requires a plug-in and the download of the font.
- can be dynamically created with a database driven site, but each time a new menu is created, the user’s browser cannot take advantage of caching the menu.
5. CSS—
- One of the most simple menu options
- easy to update, while also being search-engine friendly, not to mention that they also don’t require JavaScript code that can be more complicated and code-intensive. Stuart Nicholls with CSSplay (www.cssplay.co.uk/menus/simple_vertical.html) has come up with an incredibly flexible and easy-to-use system that is well supported.
10 Steps to Building a Mortised Site:
1. Gather and base site on requirements—how many graphics to use, what colors to use, how fast the site must be, what future growth or changes the design must accommodate, and what content and functionality will be included on the homepage and subsequent pages.
2. Create comp(s) for the client— build in Photoshop they can define many of the styles that are cascaded throughout the site.
3. Receive decision on the chosen comp, make edits then resubmit for approval
4. Break up the comp into XHTML, graphics, and CSS then bring them together
5. Test the homepage in most commonly used browsers— IE (6 and 7), Firefox, Opera, and Safari as elements are added to it.
6. Save components of the page as include files and test again—decreases the download time for subsequent pages and make maintenance considerably easier (menu, header, and footer) as test design again
7. Build second and third-level pages—homepage design can be taken and reused as the general template structure for subsequent pages if it makes use of cached images and include files, which decrease download time. Enter content into the body of each page of the site.
8. Work with the client as the site is built
9. Test the entire site
10. Implement the site- upload to live server
! use CSS to position the majority of content, rather than XHTML tables
! properly compress and saving images.
Creating a Source Directory: (use a consistent naming sytem
1. Web project name folder
2. Image folder
3. Sources Folder – for PSD and other source docs (sometimes subdirectory in images folder)
4. Stock Photo Folder—can buy stock photos individually or in bundles. Record each image you by (use identifier number in text file in sources folder
d. www.comstock.com
Royalty free- unlimited use of image once purchased
Color Schemes:
- black and white with 1 or 2 spot colors
- monochromatic (different shades of one color)
- complementary (2 colors)
- split-complimentary (2 colors that are “one off” of the color that complements an opposite color)
Layout:
1. vertical versus horizontal space: choose orientation of the menu, compensate for empty space with fixed content
2. menu width: try to make each listing only one line
3. height of header ( make it the proper size to compensate for secondary pages with more or less content)
4. placement of rounded edges and corners
tag: block-level tag
- used as a “box” to place content in, position and style, similar to a table
- defines logical divisions in your Web page, acting a lot like a paragraph tag, but divides the page up into larger sections.
- gives you the chance to define the style of whole sections of HTML. Can define a section of your page as a call out giving it a different style from the surrounding text.
- gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.
- breaks paragraphs, acting as a paragraph end/beginningà can have paragraphs within a
· style: formats the contents of the element according to the listed style
· class: assigns a class name or names to the element. Typically used with CSS
· id: formats contents of the tag according to the style ID
<span> tag: inline-level tag
- used to style individual elements inside a block-level tag (
- tells the browser to apply the style rules to whatever is within the .
Mortising:
- “float” element allows for seamless mortising: reverse order of images in code then float them to correct position. No spaces in code
- advantages:
• can save parts of images in their best respective image formats. any of three mortised images could be saved as a GIF and placed among the other two JPG images, if such flexibility is necessary
· can have more freedom with layouts. Although everything is saved and structured in rigid, linear shapes in CSS Web design, the design does not have to appear that way. Instead, text, colors, and images can flow through a page, leading the user’s eyes and creating a sense of motion and/or emotion with the design (
· can be guaranteed of content and image placement because positioning is fixed.
· Can control placement of an image by wrapping a container (w/ different color background than page to distinguish) around it and assigning the position top, left and right properties to it
Container code:
Print Style Sheet:
- add to page’s code:
media="print" />
- browser will call a separate style sheet that it will use for printing purposes (can be edited directly with specific changes)
- to make a page more printer friendly:
§ Change font size to points ( may not print sizes, such as pixels, clearly)
§ Can turn off any section by replacing all navigation rules in a
§ resize text to desired screen fit
§ change colors that do not print well (yellow) to darker color
Scalable Vector Graphics (SVG) - language that allows you to create vector-based images, vector shapes and text
- allows search engines to index text
- require a plug in
- GIFS (PNG) and JPGS most commonly used bitmap formats in mortised sites
GIF Advantages:
1. do a better job of compressing large areas of solid color
2. support animation (animated GIFS): can use to generate a “loading” icon when not using Flash
3. **allow s for one color in an image to be transparent: beneficial when layering an image over various background images. PNG is same with less jagged-edges (GIFs don’t display anti-aliasing well)
4. Allow resizable color palettes (can toss colors not used in image)
5. Maintain original colors better than JPGs
- best used when:
1. image has a limited number of solid colors
2. image has no effects
3. image is a line drawing
4. text saved as image with no complex background
5. image is a thumbnail photo
6. amall graphics are used (bullets, buttons, mouseovers)
Dithering: process in which bands of color are broken into different patterns of tiny dots to imitate shades of color by placing certain colors beside one another
No comments:
Post a Comment