I think that both Javascript and Web Fundamentals are very crucial to help design a website because the different tasks cover many areas on where to place images and even links to different sections/pages of the websites. A bland website will not attract customers and would also be criticised. That is why a good website design is so important in any business, because if you have no customers, you would have no sales.
JavaScript is what is called a Client-side Scripting Language. That means that it is a computer programming language that runs inside an Internet browser (a browser is also known as a Web client because it connects to a Web server to download pages).
The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code (SeeHow Web Pages Work for details on Web pages). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.
Web page designers use JavaScript in many different ways. One of the most common is to do field validation in a form. Many Web sites gather information from users in online forms, and JavaScript can help validate entries. For example, the programmer might validate that a person's age entered into a form falls between 1 and 120.
Web design research
If you want
to promote your organisation or your project, you have to be on the web.
Nowadays, it is the first resource that people turn to for information. These
10 useful tips can help you communicate what you want to say.
- 1. Define your audience: Fundamental, but many people forget it. What audience to you wan to reach? Fellow scientists? Consortium partners? Potential investors? Journalists? Institutional bodies? The target audience determines what content you present.
- 2. Think about your content: Most of your visitors won’t know the subject as well as you do, and have little time to spend reading. So keep it simple and short. Avoid jargon, be concise, focus on the successes and attract your audience by announcing exploitable developments or technologies and their potential benefits.
- 3. Plan a clear structure: This step is vital. The site should be easy to navigate. Produce a sitemap of your proposed web content. Visitors should ideally find information in 2-3 clicks maximum.
- 4. Make it look good: It sounds so basic, yet it matters. If it looks nice, people tend to give it more value. A good design reflects well on your organisation or project.
- 5. Limit graphic content: Multimedia can make your content more attractive, but don’t overdo it. Use graphics only if they support your message – whitespace has proven to be important in communications. Too large images also slow page loading for people with poor connections.
- 6. Offer easily searchable content: Have a ‘search engine’ box on the front page. A number of tools can be found on the web to help you do this, including Google.
- 7. Update your content regularly: Sites with regularly changing content attract more visitors. Archive what’s out-of-date, update with new content, ensure that you don’t have broken links and add new functions.
- 8. Be media-friendly: Be ready to feed content to the media by preparing press releases, brochures, CVs of relevant contact people, info about key partners and addresses to be contacted. Put them in a ‘Press’ section on your site, and don’t forget images also.
- 9. Make it interactive: Allow visitors to interact with the content author or producer. Host a discussion forum or start a blog – it may encourage visitors to drop in more often.
- 10.Domain name is important: Today we remember website names as we used to remember phone numbers. So make sure that your domain name is easy to remember.
Different examples of web programming/publishing
Hypertext Markup Language (HTML)
HTML is the underlying language of Web site coding. This workshop is designed to introduce you to the fundamental concepts of HTML. Knowing HTML allows you create your Web site exactly how you want it. The first day covers basic xHTML syntax for the document, lists, links, and images. The second day covers the HTML needed for tables, forms, and CSS. Knowledge from Technologies for Web Site Construction is assumed.
Cascading Style Sheets (CSS)
CSS controls how HTML elements are displayed on your Web browser and other mediums. They allow a Web designer to control the style and layout of multiple pages all at once. You will learn the basic syntax for defining styles and how to use classes, IDs, and the hierarchical nature of HTML inheritance. The first day focuses on basic CSS syntax and properties related to text formatting. The second day covers advanced selectors and properties related to page layout. Knowledge from HTML is assumed.
Adobe Dreamweaver I
In this introductory workshop, you will learn how to use Dreamweaver to assist you in building the HTML and CSS for your Web site. This industry-leading Web development tool enables users to efficiently design, develop, and maintain standards-based Web sites and Web applications. You can also use it to quickly integrate XHTML, CSS, JavaScript and other Web languages into your site. Knowledge from Technologies for Web Site Constructionis assumed. Knowledge of HTML and CSS is not assumed, but it can be helpful.
Adobe Dreamweaver II
Once you understand the basics of the Dreamweaver workspace, making full-fledged Web site in Dreamweaver can seem daunting. In this workshop, you will learn how to use Dreamweaver's layout and formatting tools to design a functional layout from scratch (or how to change an existing one--whether it came from Dreamweaver or not). This will then allow you to use Dreamweaver to easily add and change content without worrying about the HTML or layout for every edit. Knowledge fromDreamweaver I is assumed. Knowledge of HTML and CSS is very helpful.
Podcasting
Podcasting provides an easy method to deliver digital content -- from audio and video clips to text documents -- via the Web using RSS technologies. The primary focus of this hands-on workshop is the method for distributing existing audio/video content via the Web. To learn how to create digital audio and video content, you can attend the Catalyst workshops on Apple iMovie and Apple GarageBand for Mac users, and Digital Audio Workstation Overview for PC users. Knowledge from Web Publishing at the UW is not assumed.
JavaScript
JavaScript is an easy way to make your Web site interactive. It allows the browser to make decisions about how to display content based on user input. You will learn how to create image rollovers and how to use the document object model to dynamically control the content and display of your Web site. This workshop focuses on the document object model, which is used to make your pages come alive. The second day continues and combines features from the popular Prototype.js framework. Knowledge from Programming for the Web and CSS is assumed.
jQuery
jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. As of November 2012 it is used by over 55% of the 10,000 most visited websites. jQuery is the most popular JavaScript library in use today. It allows web programmers to target HTML elements through Javascript, and to create dynamic web applications that update content without refreshing the page.
Different examples of good web design
Research Web Design Issues
- Aesthetic qualities: Concerned with beauty or the appreciation of beauty
- Access Speed: The speed of your connection to the Internet, determined by your modem speed
- Content is King: The things that are held or included in something
- Web Standards: Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web.
- Websafe colours: This term means that the colours used are Netscape and Internet Explorer Palette Compatible.
- Image formats: Image file formats are standardized means of organizing and storing digital images.
- Font Families: A set of fonts all with the same typeface, but with different sizes, weights and slants.
- Fluid vs Fixed: Able to flow easily (Fluid), Remaining in the same place with respect to another object (Fixed).
- Responsive Web Design: A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design.
- Layout eg HTML divs, tables, layers, CSS positioning: The way in which text or pictures are set out on a page.
- Advantages of HTML5 over older HTML versions:
- Defines a single language called HTML which can be written in HTML syntax and in XML syntax.
- Defines detailed processing models to foster interoperable implementations.
- Improves markup for documents.
- Introduces markup and APIs for emerging idioms, such as Web applications.
- Readability: the quality of written language that makes it easy to read and understand.
- Usability: the quality of being able to provide good service.
- Consistency: The achievement of a level of performance that does not vary greatly in quality over time.
- Navigation: The process or activity of accurately ascertaining one's position and planning and following a route.
- Accessibility eg colours, navigation, target audience, fonts: handiness: the quality of being at hand when needed.
- Cross browser compliance: Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
6 Good different web designs
Facebook:
Aesthetic qualities: Fairly simple but well organised.Access Speed: Full access takes about 3 seconds max
Content is King: Many different content available
Web Standards: Makes good use of web standards since its social networking site
Websafe colours: Does use some colours, but mainly uses blue and white
Image formats: Sets images to fixed size but once click on is set to it's full size
Font Families: Uses same font, size can't be altered but can use bold and italic
Fluid vs Fixed: Fixed
Responsive Web Design: Very responsive, can access other sites and links
Layout eg HTML divs, tables, layers, CSS positioning: Simple but clear layout
Advantages of HTML5 over older HTML versions: Uses HTML5
Readability: Very clear, easy to read
Usability: Produces okay service, could be a little quicker
Consistency: Very consistent
Navigation: Okay navigation, can be complex if you have too many files
accessibility eg colours, navigation, target audience, fonts: Accessibility is good if given
Cross browser compliance: Could be better
Google:
Aesthetic qualities: Extremely simple layout
Access Speed: Very quick, almost less for a second
Content is King: Content is arguably the best available
Web Standards: Again, web standards is probably the best available
Websafe colours: Doesn't use colours except on logo
Image formats: Image formats is the best available
Font Families: Uses same font-family for images and links
Fluid vs Fixed: Fluid
Responsive Web Design: Organisation is good despite many different links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is good despite different image sizes
Advantages of HTML5 over older HTML versions: Google uses HTML5
Readability: Very clear and easy to read
Usability: Usability is outstanding
Consistency: Very consistent in links and images despite sizes
Navigation: Very easy to navigate
accessibility eg colours, navigation, target audience, fonts: White background with blue links, easy to see
Cross browser compliance: Doesn't lack much in terms in what you want to find
Access Speed: Very quick, almost less for a second
Content is King: Content is arguably the best available
Web Standards: Again, web standards is probably the best available
Websafe colours: Doesn't use colours except on logo
Image formats: Image formats is the best available
Font Families: Uses same font-family for images and links
Fluid vs Fixed: Fluid
Responsive Web Design: Organisation is good despite many different links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is good despite different image sizes
Advantages of HTML5 over older HTML versions: Google uses HTML5
Readability: Very clear and easy to read
Usability: Usability is outstanding
Consistency: Very consistent in links and images despite sizes
Navigation: Very easy to navigate
accessibility eg colours, navigation, target audience, fonts: White background with blue links, easy to see
Cross browser compliance: Doesn't lack much in terms in what you want to find
Youtube:
Aesthetic qualities: Good layout. Nice ideas with recommendations etc
Access Speed: Speed is good, 2 seconds max
Content is King: Very good content
Web Standards: Excellent web standards
Websafe colours: Simple colours used, mainly red with a white background
Image formats: Doesn't really use images, uses videos instead
Font Families: Uses same font
Fluid vs Fixed: Fluid, but again, it doesn't use images
Responsive Web Design: Good if used correctly, if not, difficult to access
Layout eg HTML divs, tables, layers, CSS positioning: Good layout and organisation
Advantages of HTML5 over older HTML versions: Youtube does use HTML5
Readability: Clear and easy to read due to colour choice for background and font
Usability: Usability is very good, though video could take some time to load
Consistency: Consistency is poor, since website keeps changing design
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very easy to understand and get around
Cross browser compliance: Cross browser compliance is tested on youtube, since it could be difficult to use
Access Speed: Speed is good, 2 seconds max
Content is King: Very good content
Web Standards: Excellent web standards
Websafe colours: Simple colours used, mainly red with a white background
Image formats: Doesn't really use images, uses videos instead
Font Families: Uses same font
Fluid vs Fixed: Fluid, but again, it doesn't use images
Responsive Web Design: Good if used correctly, if not, difficult to access
Layout eg HTML divs, tables, layers, CSS positioning: Good layout and organisation
Advantages of HTML5 over older HTML versions: Youtube does use HTML5
Readability: Clear and easy to read due to colour choice for background and font
Usability: Usability is very good, though video could take some time to load
Consistency: Consistency is poor, since website keeps changing design
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very easy to understand and get around
Cross browser compliance: Cross browser compliance is tested on youtube, since it could be difficult to use
Yahoo:
Aesthetic qualities: Good website design, has more features then google
Access Speed: Takes longer to load then google, mostly due to more features though
Content is King: Content is very good as well
Web Standards: Web standards are very good as well
Websafe colours: Uses a lot of different colours compared to google or youtube
Image formats: Image formats are excellent due to more features
Font Families: Font families are different
Fluid vs Fixed: Mix of fluid and fixed
Responsive Web Design: Response is very good, can go onto other links easily
Layout eg HTML divs, tables, layers, CSS positioning: Layout is superb, everything is nicely placed
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Like youtube, yahoo is clear and easy to read
Usability: Usability is also good, though takes some time to load
Consistency: Consistency is decent, but changes features every day (the news, sports etc)
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Accessibility is good, no major complaints
Cross browser compliance: Cross browser is good
Access Speed: Takes longer to load then google, mostly due to more features though
Content is King: Content is very good as well
Web Standards: Web standards are very good as well
Websafe colours: Uses a lot of different colours compared to google or youtube
Image formats: Image formats are excellent due to more features
Font Families: Font families are different
Fluid vs Fixed: Mix of fluid and fixed
Responsive Web Design: Response is very good, can go onto other links easily
Layout eg HTML divs, tables, layers, CSS positioning: Layout is superb, everything is nicely placed
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Like youtube, yahoo is clear and easy to read
Usability: Usability is also good, though takes some time to load
Consistency: Consistency is decent, but changes features every day (the news, sports etc)
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Accessibility is good, no major complaints
Cross browser compliance: Cross browser is good
Wikipedia:
Aesthetic qualities: Decent web design
Access Speed: Depends on what you are researching for
Content is King: Content is very good, very specific
Web Standards: Doesn't really use web standards due to it being a website designed for researching
Websafe colours: Doesn't use a huge range of colours except for images
Image formats: Images are placed on certain places on the website
Font Families: Uses same font family
Fluid vs Fixed: More fixed then fluid but varies due to different research
Responsive Web Design: Very responsive, can go onto other links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is similar on all research but varies
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Easy to read
Usability: Usability is decent
Consistency: Website is consistent in layout
Navigation: Fairly easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very accessible and easy to use
Cross browser compliance: Cross browser is not tested
Amazon:
Aesthetic qualities: Excellent web design, very organised
Access Speed: Access speed is decent despite high amount of content
Content is king: Content is superb, best online shopping website currently
Web Standards: Web Standards are good, crucial for searching at what you want to buy
Websafe colours: Uses about 4-5 different colours, not massively important
Image formats: Uses many different images for each different product
Font families: Uses 2 different fonts which are both easy to read
Fluid vs Fixed: Mix of both
Responsive Web Design: Very responsive, which is important for a online shopping website
Layout eg HTML divs, tables, layers, CSS positioning: Layout is very good, well organised
Advantages of HTML5 over older HTML versions: Amazon doesn't use HTML5
Readability: Website is easy to read and understand, which is an obvious positive
Usability: Usability is superb, easy to get around to search for products
Consistency: Extremely consistent, especially in layout and search results
Navigation: Fairly easy to navigate around, can become a little confusing
accessibility eg colours, navigation, target audience, fonts: Accessibility is all good, simple and easy to use
Cross browser compliance: Cross browser is tested and works successfully under it
Access Speed: Depends on what you are researching for
Content is King: Content is very good, very specific
Web Standards: Doesn't really use web standards due to it being a website designed for researching
Websafe colours: Doesn't use a huge range of colours except for images
Image formats: Images are placed on certain places on the website
Font Families: Uses same font family
Fluid vs Fixed: More fixed then fluid but varies due to different research
Responsive Web Design: Very responsive, can go onto other links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is similar on all research but varies
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Easy to read
Usability: Usability is decent
Consistency: Website is consistent in layout
Navigation: Fairly easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very accessible and easy to use
Cross browser compliance: Cross browser is not tested
Amazon:
Aesthetic qualities: Excellent web design, very organised
Access Speed: Access speed is decent despite high amount of content
Content is king: Content is superb, best online shopping website currently
Web Standards: Web Standards are good, crucial for searching at what you want to buy
Websafe colours: Uses about 4-5 different colours, not massively important
Image formats: Uses many different images for each different product
Font families: Uses 2 different fonts which are both easy to read
Fluid vs Fixed: Mix of both
Responsive Web Design: Very responsive, which is important for a online shopping website
Layout eg HTML divs, tables, layers, CSS positioning: Layout is very good, well organised
Advantages of HTML5 over older HTML versions: Amazon doesn't use HTML5
Readability: Website is easy to read and understand, which is an obvious positive
Usability: Usability is superb, easy to get around to search for products
Consistency: Extremely consistent, especially in layout and search results
Navigation: Fairly easy to navigate around, can become a little confusing
accessibility eg colours, navigation, target audience, fonts: Accessibility is all good, simple and easy to use
Cross browser compliance: Cross browser is tested and works successfully under it
6 Bad different web designs
Aesthetic qualities: Website design is the worst at the present
Access Speed: Access is slow takes around ten seconds to load up fully
Content is King: There is no accessible content
Web Standards: Web standards are also very poor
Websafe colours: Uses an array of colours, but that isn't always a good thing
Image formats: Uses a huge amount of content, which is why it is slow to load up
Font Families: Doesn't use font families
Fluid vs Fixed: Fixed
Responsive Web Design: Website is not really responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is the worst for a website at present
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Doesn't have any fonts, so you can't read it
Usability: Can't use the website
Consistency: Consistency is very poor
Navigation: Can't move around, only goes up and can't move down
accessibility eg colours, navigation, target audience, fonts: Accessibility is poor, can't navigate etc
Cross browser compliance: Cross browser is not tested
Don Swanson Racing School:
Aesthetic qualities: Untidy layout, poor colour choice
Access Speed: Access speed is slow
Content is King: Content is very poor
Web Standards: Web standards are poor
Websafe colours: Colour choice is wrong, doesn't work well with background
Image formats: Doesn't use images
Font Families: Font is clear and easy to read
Fluid vs Fixed: Fixed
Responsive Web Design: Website is not very responsive
Layout eg HTML divs, tables, layers, CSS positioning: all text set in align centre
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Is easy to read, but colour choice puts the text off
Usability: Usability is not good
Consistency: Consistent, but still poor
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are poor, difficult to navigate
Cross browser compliance: Cross browser is not tested
Hyperbubble:
Aesthetic qualities: Very simple web design
Access Speed: Takes 2 seconds to load, which is slow considering the content available
Content is King: Small amount of content
Web Standards: Web standards are not good
Websafe colours: Flat, simple colours used
Image formats: Few images used
Font Families: Uses different fonts, which are somewhat clear
Fluid vs Fixed: Mix of both
Responsive Web Design: Responsive, but due to lack of content. Web design is very simple
Layout eg HTML divs, tables, layers, CSS positioning: Layout is boring, uses no imagination
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Easy to read
Usability: Usability is of average standard
Consistency: Very consistent
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are flat, navigation is easy
Cross browser compliance: Cross browser is not tested
The Bombshell Manual Of Style:
Aesthetic qualities: Website design is ugly, flat and disappointing
Access Speed: Access speed is average, then is slow
Content is King: Little amount of content available
Web Standards: Web standards are not there
Websafe colours: Colour choice is wrong, doesn't look good
Image formats: Images are incorrectly placed and are pix-elated
Font Families: Uses same font but is difficult to read
Fluid vs Fixed: Fixed
Responsive Web Design: Web design is not very responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is not good, images are pix-elated
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Difficult to read
Usability: Usability is very poor
Consistency: Not consistent at all
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Colour choice is poor, difficult to navigate around
Cross browser compliance: Cross browser is not tested
Feng Shui Interior Design:
Aesthetic qualities: Website is not good looking, uses bland colour for background
Access Speed: Access speed is average
Content is King: Decent amount of quality, could be much better though
Web Standards: Web standards are poor
Websafe colours: Colours are wrongly placed. Background colour choice is wrong
Image formats: Not great image choices
Font Families: Very clear, very simple font choice
Fluid vs Fixed: Mix of both
Responsive Web Design: Website is sort of responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is average, could be placed better
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Very easy to read
Usability: Usability is average
Consistency: Consistent, but could be better
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Too many colours, difficult to navigate around
Cross browser compliance: Cross browser is not tested
Ric Campus Store
Aesthetic qualities: Website isn't bad looking, just very flat and boring
Access Speed: Access Speed is also average considering small amount of content
Content is King: Has a decent amount of content, however it could have more
Web Standards: Web standards are poor, could be much better
Website colours: Colours are bland and boring, could have more flair to make it look appealing
Image formats: Not bad images, but could be better and have more
Font Families: Uses different fonts, but all are easy to read
Fluid vs Fixed: Fixed
Responsive Web Design: Website is actually quite responsive
Layout eg HTML5 over older HTML versions: Layout is decent, but could be tidier
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Quite easy to read due to similar fonts
Usability: Usability is quite good
Consistency: Not very consistent, but having different website designs is fine
Navigation: Quite easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are bland, other features are decent though
Cross browser compliance: Cross browser is not tested
These images above are each of the pages for my website. Overall, I am relatively happy with the overall design of my website. The positives from my website is that the colour scheme combines well together, there are not too many different colours to dazzle the eyes of the reader and make the website look simple and sharp. The font is very clear to read, giving the reader little trouble to read and the image slider is slick and clean, although it is slow to change images (due to the image size and content). The negatives are that the black lines are off-putting and are clear to see, which makes the look of the website untidy. The pages themselves have different sizes which changes the size of the font and the width itself to make it look bigger. It is unknown as to why two of the pages are slightly bigger then some of the other ones. The images need to be resized and repositioned. For example, many of the images in the image slider are too big, which slows the website down, annoying the reader. The images on the 'Other Stuff' template are perhaps too small, making it difficult for the reader to read the text on the images. Overall, for a first website design, I am slightly happy since this is not what I wish to do in the future, but I know that there are several features that needed to be improved, however time restrictions and confusion/difficulty to understand the HTML and CSS coding were the reasons why as to why the website design looks like the images above.
No comments:
Post a Comment