tag:blogger.com,1999:blog-12700568675816657102024-03-08T02:24:53.508-08:00Website Design Web Development - MelbourneI hope this can be a fun an interesting blog about my role in the company and new and any interesting development we are doing. An area for to give opinions on web development techniques and new directions in the web development field.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-1270056867581665710.post-46445631209214879182009-10-05T16:26:00.000-07:002009-10-05T16:31:08.054-07:00Websites that make their customers work to read them are not the best way to get business. Miniscule 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. Let's take a look at five easy fixes:<br /><br />1. Format your text/fonts using CSS. Cascading Style Sheets (CSS) are the standard now - use one style sheet and control how text looks on your entire site. Make a change to the style sheet and your whole site is updated. It makes updating your website a lot easier.<br /><br />2. Make the font size big enough to read. Consider your audience. Even if they are a group of teenage boys looking for new motorbikes, it's never a good idea to use really small fonts. It doesn't have to be huge, but up to a point, larger type is better. 12-pt Verdana is better than 8-pt Verdana.<br /><br />3. Make the text contrast with its background. The more contrast, the better especially for people with a disability. Black-on-white or white-on-black are examples of the highest contrast you can get. Use colors if you like, but if you squint at the page and your text basically vanishes, there's not enough contrast.<br /><br />4. Give the lines room to breathe. Try not to stack lines on top of each other. If people struggle to read it they will just give up. Use the line-spacing directive in CSS and give it some padding; I'll often set line-spacing to 140% of the height of a typical line.<br /><br />5. Break text up into chunks. No matter how good a writer you are, people don't want to read endless pages of text. Break it up by using headlines that reflect the subject of the paragraph(s) to follow so people can scan down to the parts that really interest them, or use bulleted lists to change the pace of the writing and slow down the scanning.<br /><br />And finally (not one of the 5 Easy Ways to Improve Legibility but still quite important) check your spelling. While on the surface it may seem like a minimal issue it simply makes you look like you don't care enough to get it right. Use that ubiquitous spellcheck tool wherever you can.<br /><br />Making your website's content more legible is easy. It doesn't take a lot of time, mainly common sense. The payoff will be text that's more readable, customers that stick around long enough to get your message, and improved credibility with your visitors.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com0tag:blogger.com,1999:blog-1270056867581665710.post-29478940033719612502008-04-21T20:25:00.000-07:002008-04-21T20:27:11.891-07:00IMAGES IN WEB PAGES – When to use GIF, JPEG or PNGThere are three image formats widely used in web pages: GIF, JPEG and PNG. You need to choose the right format for your website images so that they will look good and still be a reasonable size.<br /><br />Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.<br /><br />Points to remember: <br />JPEG <br />Use JPEG to save photographs. <br />JPEG cannot have transparent backgrounds. <br />JPEG is not good at preserving exact colors – don’t use them for logos or text. <br /><br />GIF<br />Use GIF to save images that have sharp lines (like text) and solid colors.<br /><br />Examples: <br />A solid red square <br />A typical corporate logo <br />Use GIF to save images that need to have a transparent background. <br />GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy. <br /><br />PNG<br />Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds. <br />Use PNG if you need to create print ready high-resolution graphics. <br /><br />THEORY AND COMMENTS<br /><br />ABOUT JPEG<br />Having plenty of time to spare because they were unable to get any dates, a bunch a nerd-photographers invented the JPEG – a method of compressing/packaging photographs in a digital format. JPEG is able to compress images by dumping unneeded image information – this makes JPEG a ‘lossy’ image format.<br /><br />Because of this, with each generation that an image is saved as a JPEG, the quality gets lower since image information is getting lost with each cycle. As the quality of the image drops (information lost), the image starts to look worse and worse. <br />Don’t get me wrong; JPEG is still a great format for photographic images (widely used in high-end digital cameras like the Canon Digital Rebel,) you just need to know how to use them properly.<br /><br />ABOUT GIF<br />GIF was designed for screen graphics in the day when modems were really slow. As such, they are very limited and can only support up to 256 colors.<br /><br />GIF has a very simple one-color transparency, or as some people would describe it: an ‘on/off’ type of transparency. But, they are small in size and do a great job with images that have sharp lines … as I listed above.<br /><br />ABOUT PNG<br />PNG was designed with the web in mind and is (by far) the most flexible graphic format ready for web use. The only problem is, that images saved as PNG always seem to be larger than their GIF or JPEG counter part. As such, most web designers just use GIF or JPEG. <br /><br />PNG can do nifty things like contain gamma-correction information that automatically corrects the brightness of an image in different operating systems. <br /><br />PNG has that smooth transparency I mentioned – graphic designers would recognize this as a 16 bit alpha channel. What that means, is that every pixel in a PNG can be semi-opaque to whatever degree you want.<br /><br />PNG images come out larger because graphic design programs (Photoshop, Corel Photo Paint et cetera) are actually doing a bad job in creating PNG images. Maybe one day, they will get their act together and we can then all take advantage of PNGS. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com17tag:blogger.com,1999:blog-1270056867581665710.post-69926068865440483492007-12-30T23:23:00.000-08:002007-12-30T23:24:44.142-08:00Lite Web Design<strong>Don't Make Them Wait</strong><br />01-13-2000 by Scott Pamatat of DesignMore.com<br /> <br />I have noticed that many web sites are trying to portray themselves as if they were a TV network. They put top-notch graphics and sound into their web page. What these companies are missing is that their visitors are not watching TV. This works fine for those with broadband high speed connections. The fact is, most are viewing your web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second. <br /><br /><strong>What does all this mean?</strong><br /><br />You as a web site owner, designer, CEO, or any one who has control over a web site should follow a simple rule. Are you ready? Here is the rule: make sure you are on a 28.8 connection; type in the URL for your web page; hit enter, and hold your breath. If you needed to gasp for air before the page was fully down loaded you really need to cut down on the size of the page. I'm sure some of you can hold your breath for a long time. So I will give you all a suggestion that your web page should be no larger then 50K. I would shoot for less than 30K. The number one visited web site home page is under 21k. That's right, Yahoo's home page is only 20k. This might seem like very little but you really can do a lot within that size. <br /><br /><strong>How can I get it under 50K? 30K?</strong><br /><br />First, all your graphic images should be as small as possible. Try to get them smaller than 4k. Going up to 6k is reasonable. When designing a graphic for the web site keep in mind the number of colors being used. I know, as a graphic designer, it was hard for me to go from millions of color to only 216. Yes, 216 is the number of colors you have on a web safe color pallet. Use solid colors when designing your image. PhotoShop has made the gradient such a popular tool. It looks good to fade things in and out. I always see a background border made up of this gradient. I always right click on that image to see the size. The 8k-12k is not worth the space. The problem with the gradient is it uses many colors and dithering. Both take up big time K. The more color you have in an image the bigger it's going to be. <br />Use design more, graphics less. For a web page to be successful it needs to download quickly and look good. Here is the dilemma download quick or look good? Instead of designing graphics and taking pictures and turning them into jpgs to make your web page look good, try using color schemes. Use cell colors to make boarders. Use the negative space on your web site. What is not there is just as important as what is there. Remember sometimes less is more. When in doubt think of a typical visitor coming to your web page. Would that extra graphic sell them or keep them coming back again and again. If the answer is yes, by all means keep it. If the answer is "well maybe" or "it just looks good there", yank it. Viewers will appreciate not waiting more then they have to. The web is here to make our life easier not to sit in front of a screen waiting for heavy web pages to download.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com13tag:blogger.com,1999:blog-1270056867581665710.post-19967705537322948642007-08-05T22:51:00.000-07:002007-08-05T22:56:42.373-07:00web design - site structureGood web design requires a solid site architecture based on the site's goals and target audience established in a project brief. The deliverables from this phase most often are: <br /><br />1. Content Outline<br />2. Site Diagram<br />3. Wireframes<br /><br />These three deliverables are dependent on each other and need to be completed sequentially. <br /><br />Content Outline<br /><br />Working closely with your clients, create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Try to plan for the future and how the site content might need to grow as this will inevitably happen. Next, group your content into categories. As you categorise your content, considering getting user feedback through a card sort. Once your categories are established, create an outline of your content and review it with your target audience for accuracy. <br /><br />Site Diagram <br /><br />Take your final content outline and create a sitemap or site diagram. A site diagram is a visual representation of your content outline and site structure. You can use Excel, Visio or Smartdraw to create your site diagram.<br /><br />Wireframes<br />A wireframe is a non-graphical layout of a web page. It is a simple drawing of the blocks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.<br /><br />Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer. <br /><br /><a href="http://www.carnivalmedia.com.au/contact.aspx" title="web design company">Contact Carnival Media Group to design your website today!</a>S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com20tag:blogger.com,1999:blog-1270056867581665710.post-46209314499895168722007-07-17T17:23:00.000-07:002007-07-17T17:25:24.368-07:00website or web site?From AskOxford.com:<br /><br />Question:<br />How should the term 'website' be written in official documents and on the web? Should it be <em>website</em> or <em>web site</em>, and should there be a capital W?<br /><br />Answer:<br />It always takes a little time for new words to settle to a standardized form. Our most recent dictionary, the revised 11th edition of the Concise Oxford Dictionary, published in July 2004, shows <em>website</em> as the standard form, and future dictionaries will reflect this.<br /><br />We recommend capital initials for Internet, World Wide Web, the Web, but not for individual sites.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com3tag:blogger.com,1999:blog-1270056867581665710.post-73518341082004988702007-07-07T00:57:00.001-07:002007-07-07T00:58:15.234-07:00Your web site should be easy to readThe most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colors very carefully. You don't want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background. <br /><br />You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.<br /><br />Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com5tag:blogger.com,1999:blog-1270056867581665710.post-44802958636787442632007-06-19T19:38:00.001-07:002007-06-19T19:39:27.887-07:00Pay now or pay laterUsability isn't necessarily a new term, but when it comes to how users interact with the Web, it takes on a whole new meaning. Web usability is evolving as we learn more and more about how our users interact with our online information, how they retrieve it and use it, how they want to move on our site, what they anticipate and what they expect within the realm of their experience. <br /><br />The term 'usability' has historically involved testing how users actually get on a system and use it. With Web usability, I prefer to take it one step further and think of it in terms of how a user gets on a Web page and a) anticipates how to interact with it and b) actually interacts with it. This anticipation is what we need to test for along with use; it's the intuition and the logic involved in the Web experience that differentiates Web usability from other types of usability. Failing to rethink our approach to usability predisposes us to either success or failure—I don't know about you, but I prefer the success path. Web users are a fickle group; let's face it, if you don't anticipate what they want, give them what they want, how they want it and when they want it, you can forget the bookmark; they're not returning. <br /><br />Think of Web usability as a 'pay now or pay later' proposition. If you don't check in with users early in the development process, you run the risk that you won't meet their needs when you launch the site. When you realize their needs haven't been met, you have to go back and rethink your whole approach, rehire the web developers and get them refocused on the project so they can redevelop the site. The terms, 'rethink', 'rehire', 'refocus' and 'redevelop' should be conjuring up visions of dollar signs for you, not to mention the fact that your brand, image and credibility were damaged in the process of launching a site users weren't able to use. <br /><br />Testing for usability is a choice, not a requirement, and it is often the first step in the development process that management will scratch if time is running short. The next time you approach your web project, consider using the web usability strategy I developed to understand the scope of testing usability, how you could easily administer a test session, who you should test and what you want to test for. It may be less burdensome than you think!S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com4tag:blogger.com,1999:blog-1270056867581665710.post-62873619017744647752007-06-17T05:10:00.000-07:002007-06-17T05:12:02.858-07:00Developing a new website - PlanningTHE FIRST STEP in designing any Web site is to define your goals. Without a clearly stated mission and objectives the project will drift, bog down, or continue past an appropriate endpoint. Careful planning and a clear purpose are the keys to success in building Web sites, particularly when you are working as part of a development team.<br /><br />Planning a Web site is a two-part process: first you gather your development partners, analyze your needs and goals, and work through the development process outlined here to refine your plans. The second part is creating a site specification document that details what you intend to do and why, what technology and content you'll need, how long the process will take, what you will spend to do it, and how you will assess the results of your efforts. The site specification document is crucial to creating a successful site, as it is both the blueprint for your process and the touchstone you'll use to keep the project focused on your agreed goals and deliverables.<br /><br />Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. To create a substantial site you'll need content experts, writers, information architects, graphic designers, technical experts, and a producer or committee chair responsible for seeing the project to completion. If your site is successful it will have to be genuinely useful to your target audience, meeting their needs and expectations without being too hard to use.<br /><br />Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Remember that the site development team should always function as an active, committed advocate for the users and their needs. Experienced committee warriors may be skeptical here: these are fine sentiments, but can you really do this in the face of management pressures, budget limitations, and divergent stakeholder interests? Yes, you can — because you have no choice if you really want your Web project to succeed. If you listen only to management directives, keep the process sealed tightly within your development team, and dictate to imagined users what the team imagines is best for them, be prepared for failure. Involve real users, listen and respond to what they say, test your designs with them, and keep the site easy to use, and the project will be a success.S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com1tag:blogger.com,1999:blog-1270056867581665710.post-55176931048826651632007-06-14T19:06:00.000-07:002007-06-14T19:08:09.095-07:00Now Available: Microsoft eScrum Version 1.0If you're looking for another Scrum template to try with Team Foundation Server, consider using <a target="_blank" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=55a4bde6-10a7-4c41-9938-f388c1ed15e9&displaylang=en">eScrum</a>, which is an implementation of Scrum that's used internally by some teams within Microsoft:<br /><br />"<em>eScrum is a Web-based, end-to-end project management tool for Scrum built on the Microsoft Visual Studio Team Foundation Server platform. It provides multiple ways to interact with your Scrum project: eScrum Web-based UI, Team Explorer, and Excel or Project, via Team Foundation Office Integration. In addition, it provides a single place for all Scrum artifacts such as product backlog, sprint backlog, task management, retrospective, and reports with built-in context sensitive help."</em><br /><p>Source: <a target="_blank" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=55a4bde6-10a7-4c41-9938-f388c1ed15e9&displaylang=en">Download details: Microsoft eScrum Version 1.0</a> </p><p>In addition, take a look at the <a href="http://www.codeplex.com/vstsscrum">VSTS Scrum Process Template</a> on <a href="http://www.codeplex.com/">CodePlex</a>, which is under the guidance of several Team System MVPs.</p>S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com0tag:blogger.com,1999:blog-1270056867581665710.post-6953825669663265982007-06-14T18:42:00.000-07:002007-06-14T18:51:53.531-07:00First PostThis will be my first post starting the blog for the website and web development projects I will undertake as part of the team at <a href="http://www.carnivalmedia.com.au" target="_blank">Carnival Media Group</a>. Over the coming weeks and months I hope to cover topics such as programming and development for websites, databases, SEO, e-commerce, shopping carts, custom solutions, new techology and ASP.NET tips, tricks and other information.<br /><br />I hope this can be a fun an interesting blog about my role in the company and new and any interesting development we are doing.<br /><br />I would also like this to be an area for me to give my opinion on web development techniques and new directions in the web development field!S. Mitchellhttp://www.blogger.com/profile/05205415256870499294noreply@blogger.com0