Saturday, August 30, 2008

IE8 beta 2 released

Internet Explorer 8 Beta 2 Now Available

We’re excited to release IE8 Beta 2 today for public download. You can find it at http://www.microsoft.com/ie8. Please try it out!

You’ll find versions for 32- and 64-bit editions of Windows Vista, Windows XP, Windows Server 2003, and Windows Server 2008. In addition to English, IE8 Beta 2 is available in Japanese, Chinese (Simplified), and German. Additional languages will be available soon.

While Beta 1 was for developers, we think that anyone who browses or works on the web will enjoy IE8 Beta 2. Before the team blogs about our Beta 2 in detail, here’s an overview of what you’ll find in IE8.

We focused our work around three themes: everyday browsing (the things that real people do all the time), safety (the term most people use for what we’ve called ‘trustworthy’ in previous posts), and the platform (the focus of Beta 1, how developers around the world will build the next billion web pages and the next waves of great services).

Everyday Browsing

We looked very hard at how people really browse the web. We looked at a lot of data about how people browse and tried a lot of different designs in front of many kinds of people, not just technologists. As tempting as it is to list here all the changes both big and small in IE8, we’ll take a more holistic approach. That’s how we built the product and how we’d like to talk about it.

From our customer research, we saw that the bulk of user activity outside of web pages involved tabs and “navigation” – the act of getting to the site the user wants to get to. We also knew that adding features has an impact only if they’re “in the flow” of how people actually use the product. Another menu item might matter in a checklist on a blog somewhere, but won’t matter to real people browsing. That’s why IE8’s New Tab experience is so remarkable: it’s obvious – after you see it:

IE8 New Tab Page

IE8 makes bringing back tabs (and entire IE sessions) users have closed a lot easier; it’s in the natural flow of how users work. IE8 also takes into account that there are often relationships between new tabs that users open, and the browser can make it a lot easier to figure out which tabs go with which. Below, the tabs that came from the links in the search results page are grouped together and colored differently from the headlines the user followed off another page, which are different from links the user followed off other pages:

IE8 Tab Grouping

Navigation – or getting to where you want to – is a lot faster and easier too. Typing in the Smart Address Bar not only searches across Favorites, History, and RSS feeds, but provides a great experience:

IE8 Address Bar

We put a lot of different designs in front of users in order to find one that was this effective. It’s easy to scan, with the different sections marked off and one line for each item, and the highlighting is easy on the eye. Deleting typos (or other unwanted suggestions) from this list is also easy – notice the red "x" above appears when a user places his mouse over an item.

Beyond tabs and navigation, people use services all the time. When you have an address but want a map, or want to just select some text and make a blog post out of it, IE8’s Accelerators (formerly known as ‘Activities’) are handy. For Beta 2, we’ve worked with a lot of great partners to deliver a bunch of choices for users. They’re much faster and easier than the “select, copy, new tab, navigate, paste, repeat” process in today’s other browsers. We think users will enjoy the consistent experience they’ll get from service to service, and appreciate being in complete control of which are installed and are the default. We hope that websites (and enthusiasts!) write more of them and give us feedback. Staying up to date with the latest information is a lot easier with Web Slices, that put information directly in your Favorites bar where you can get at it quickly.

This is a good moment to talk about performance. We think about two kinds of performance: real world and lab. In a lab, we measure performance in milliseconds. That’s important work, and we did a lot of it since Beta 1. You’ll find IE8 is a lot faster than IE7 on many sites. We can go through and detail, for example, exactly which Gmail operations are faster in IE8 than other browsers and vice versa.

Real world performance is about how people get their tasks done, and that’s something you don’t measure in milliseconds. We think you’ll enjoy the impact of IE8’s new tabs, Smart Address Bar, Favorites bar, Search box, Accelerators, and Web Slices on your daily browsing.

Visual Search in IE8 speaks for itself. Websites can offer rich search results as you type in the Search box:

IE8 Visual Search SuggestionsIE8 Visual Search Suggestions

After installing IE8, try out Visual Search from the New York Times, Wikipedia, Amazon, or eBay. (Many other sites offer regular text suggestions as well.)

Safety

Safety isn’t about technologies and features, but two words: in control. We think users should be in control… of their settings, their information, what code runs on their machine, of their browser overall.

Previous posts have described what you’ll find in IE8 Beta 2 with respect to the SmartScreen Filter and protection from phishing and malware as well as many other defenses. The XSS Filter is particularly exciting because it offers real people a real defense from a real threat, by default and out of the box. We’ve blogged about InPrivate previously as well. Taken together, these features do a great job putting the user in control of their information.

The reliability improvements in IE8 Beta 2 are big. Crash recovery is nice, but not crashing is even better. Because in IE8 Loosely-Coupled IE (LCIE) separates the frame (the address bar, back button, etc.) from the tabs, and the tabs (mostly) from each other, crashes are more contained and affect fewer tabs than before. We think users will also appreciate having close boxes on all their toolbars so that disabling ones they don’t want – while leaving the ones they do – is easier.

Platform

IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.

After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.

Some Important Details

Anyone interested in customizing and redistributing IE8 (the way others have IE7) can find information about the IEAK here. (We’ll have a more detailed post about IEAK and group policy soon.) One important aspect of a beta release is getting feedback; we’re using the same channels as described in this Beta 1 post (for example, this IE Beta newsgroup).

Read more about guidelines for upgrading to IE8 Beta 2 today. Also, If you are currently using IE8 Beta 1 on Windows XP or Windows Server 2003 with Automatic Updates turned on, you will receive IE8 Beta 2 through Windows Update.

Download IE8 Beta 2, use it – the browser itself, the developer tools, writing an Accelerator, marking part of your page as a Web Slice – and let us know what you think.

Labels: ,



Test a site on a mobile device?

Just curious if anyone had a mobile device with web access and is willing to check the mobile version of our website. If you go to www.abwebsitedesign.com with any mobile browser, it should seamlessly redirect to the mobile version. Please let me know your thoughts.

My Thoughts
I don't have a mobile device with Web access, but when I need to test pages, I use Opera in small screen mode. To get into that open Opera, browse to the page, and then in the View menu, choose "Small screen".

The drawback here is that because Opera is not running on a mobile device, it won't automatically switch. But AbWeb has placed a link at the very top to switch to the mobile site. The mobile site is nice - clean and easy to follow. The only thing I don't really like is that it seems like most of the content is missing. But I suppose that's okay to assume that people wouldn't need all of it from their cellphone.

More Help with Designing Mobile Sites

What do you think?
Do you have a cell phone or mobile device you can test this page in? What do you think of it? Even if you don't have a device, what do you think of the mobile pages in your standard browser? Let us know by posting in the comments or answering the post.

via:about.com



20 Websites To Help You Learn and Master CSS

CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand.

This article features 20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.

1. A List Apart CSS Topics

A List Apart CSS Topics - screen shot.

A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of CSS dating back to 1999. Most articles are geared towards intermediate to advanced developers who put a strong emphasize on standards-compliant designs.

2. CSS Help Pile

CSS Help Pile - screen shot.

CSS Help Pile is an aggregate of CSS resources, tips, and how-to’s. The site is well-organized and a wonderful resource for any level of expertise. There’s a category for beginners, browser bugs, and short reviews of CSS books.

3. CSS Basics

CSS Basics - screen shot.

CSS Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental CSS concepts. The writing is clear and succinct - making it a great resource for those just starting out. All 18 chapters can be printed or downloaded in PDF format.

4. Holy CSS Zeldman!

Holy CSS Zeldman! - screen shot.

Holy CSS Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based CSS tutorials, tools, and layouts.

5. Eric Meyer: CSS

Eric Meyer: CSS - screen shot.

Here’s a collection of works by Eric Meyer (acclaimed web professional and author). Some resources you’ll find on this page are css/edge (Eric Meyers experiments on CSS) and CSS reference.

6. 456 Berea Street – CSS category

456 Berea Street – CSS category - screen shot.

Roger Johansson’s 456 Berea Street has over 300 posts under the CSS category. Some posts talk choosing an image replacement method while others teach you CSS techniques.

7. /* Position Is Everything */

/* Position Is Everything */ - screen shot.

Those just getting their hands around authoring CSS code will quickly realize that a significant chunk of time (and frustration) stems from getting rid of browser bugs. Position Is Everything discusses known browser bugs and shares CSS methods that work across browsers. Here, you can read about the one true layout or learn what happens when you nest absolutely-positioned div’s.

8. HTML Dog CSS Tutorials

HTML Dog CSS Tutorials - screen shot.

HTML Dog is a tutorial website dedicated to teaching XHTML and CSS best practices. There’s three CSS tutorial sections: Beginner, Intermediate, and Advanced.

9. Learn CSS Positioning in Ten Steps

Learn CSS Positioning in Ten Steps - screen shot.

Positioning elements using CSS can be a tricky concept at first. If you’re having a hard time understanding the fundamentals of CSS positioning, check out this 10-step tutorial to get you positioning stuff in no time!

10. Andy Budd CSS/Web Standards Links

Andy Budd CSS/Web Standards Links - screen shot.

Andy Budd (directory of Clearleft, CSS guru, and author of one of my favorite books – CSS Mastery) has a set of CSS/web standards links to help you find reliable, useful information about CSS.

11. W3CSchools CSS Tutorial

W3CSchools CSS Tutorial - screen shot.

W3CSchools has a CSS section that covers the very basics of CSS up to more advanced topics.

12. css Zen Garden

css Zen Garden - screen shot.

css Zen Garden is a showcase of the things you can do CSS. Most importantly, it highlights the concept of separating content from presentation. Using the same HTML file, designers submit external stylesheets to style the HTML file. I suggest using the Web Developer Tool to inspect how the layouts work and what styles affect certain elements of the page.

13. CSS at MaxDesign

CSS at MaxDesign - screen shot.

At MaxDesign, you can find Russ Weakley’s brilliant set of CSS-related tutorials. Some things to expect here are: Listmatic – which shows you a variety of ways you can use CSS to style lists, and Floatutorial – which goes through the fundamentals of floating elements.

14. CSSeasy.com

CSSeasy.com - screen shot.

CSSEasy.com’s slogan is "learn CSS the modern way". The site promotes learning by experience, with the idea that if you inspect the source code and see how things fit together as a whole, you’ll gain a better understanding of CSS. The Web Developer Tool will also come in handy on this website.

15. CSS-Discuss

CSS-Discuss - screen shot.

CSS-Discuss is a community of CSS enthusiasts. The CSS-Discuss Wiki is a comprehensive collection of real-world usage of CSS.

16. Web Design from Scratch: CSS

Web Design from Scratch: CSS - screen shot.

Ben Hunt’s Web Design from Scratch has an excellent section on CSS that covers basic concepts about CSS. I highly recommend beginners start off with Introduction to CSS, a quick but very informative starting point to getting your hands dirty with CSS.

17.CSS-Tricks

CSS-Tricks - screen shot.

CSS-Tricks is a blog dedicated to the topic of CSS. You’ll find helpful posts such as what CSS Sprites are (in a nut shell), techniques for image replacements, and even screencasts on topics like conditional stylesheets.

18.CSS on Delicious

CSS on Delicious - screen shot.

The CSS tag on Delicious is a great way to find popular links that relate to CSS. It allows you to see what people are currently reading.

19. SitePoint CSS Reference

SitePoint CSS Reference - screen shot.

SitePoint has a CSS reference section that discusses introductory level CSS topics. You can get a crash course on general CSS syntax and nomenclature onto slightly more advanced topics such as CSS hacks and filters.

20. CSSDog

CSSDog - screen shot.

CSSDog has a section for both beginners and more advanced developers. Aside from CSS lessons, their CSS Reference section - which lists quick guides and color references - are very helpful.

via : sixrevision

Labels: ,



6 Ideas for Viral Marketing

Here are six ideas to help you start your viral marketing campaign:

Purchase the branding rights to a viral E-book. Allow people to give away your free E-book to their visitors. Then, their visitors will also give it away. This will just continue to spread your ad all over the Internet.

If you have the ability to set up a forum or other bulletin board, you really have a great tool. Allow people to use your online discussion board for their own website. Some people don't have one. Just include your banner ad at the top of the board.

Do you have a knack for web design? Create some templates, graphics, etc. and upload them to your site. Then, allow people to give away your free web design graphics, fonts, templates, etc. Just include your ad on them or require people to link directly to your web site. Make sure that you include a link back to your site in the copyright notice and require them to keep your copyright notice in tact.

Write an E-book. Allow people to place an advertisement in your free E-book if, in exchange, they give away the E-book to their web visitors or E-zine subscribers.

Write articles that pertain to your product or service. Allow people to reprint your articles on their website, in their E-zine, newsletter, magazine or E-books. Include your resource box and the option for article reprints at the bottom of each article.

You can easily find products on the Internet that will sell you a license allowing you to distribute the product free of charge to other people. Look for those products that provide "branding rights". That is where you can include your own name, website, and contact information.

Labels:



Wednesday, August 27, 2008

Photoshop Tutorial: Create glossy button for web 2.0

web 2.0 button

This tutorial will show you how to create some of the more popular Web 2.0 style button using Photoshop CS. Full tutorial after jump.

1. Creating the base

Fire up a new canvas and adjust the following settings (marked in yellow) according to the image below. The rest should come as default. You might want to double check with the defaults too.

web 2.0 button

Create a new layer call ‘Button’

web 2.0 button

On layer ‘Button’, select the Rounded rectangle tool

web 2.0 button

give it a radius of 7px

web 2.0 button

and draw a rectangle similar to the image below.

web 2.0 button

2. Red button

Right click on the Blending Options for ‘Button’ layer

web 2.0 button

and tweak the following settings for

Drop Shadow

web 2.0 button

Inner Shadow

web 2.0 button

Bevel and Emboss

web 2.0 button

Gradiant Overlay

web 2.0 button

web 2.0 button

Your button should look something like this

web 2.0 button

3. Glossy and a little tweak

Create a new layer call ‘Glass’

web 2.0 button

Select Retangular marquee tool, make sure you are selecting ‘Button’ layer. HOLD your key and click on layer ‘Buttons’’s layer thumbnail. Your button should now be highlighted.

Select ‘Glass’ button now, hold the key with Retangular marquee tool selected. Draw(cut) across the lower half of the button like the image below.

web 2.0 button

Fill the selected area with white color #ffffff using Paint Bucket Tool

web 2.0 button

Adjust the opacity to 18%

web 2.0 button

and you should have glossy button looking like this.

web 2.0 button

4. Pattern Overlay

Lets give the button some slight pattern overlay. I’ll be using the custom stripe5px created earlier. Click here to read “How to create custom pattern“. Create a new layer call ‘Pattern’ in between ‘Button’ and ‘Glass’ and proceed with Blending Options.

web 2.0 button

Select Pattern Overlay, choose Stripe5px (or any pattern you’ve created) and click OK then close the dialogue.

web 2.0 button

Make sure you are still on Rectangular Marquee tool, hold and click on Button’s layer thumbnail to get the buttons shape. Fill up the selected area in ‘Pattern’ layer with Paint Bucket tool and adjust the layer opacity to 5%

5. Inserting Text

I’ll throw in some random text in white #ffffff color with the following settings

web 2.0 button

and the following blending effects on my text’s layer.

Drop Shadow

web 2.0 button

Output

You should get an image like this.

web 2.0 button

Labels:



30 Impressive Colour Spectrum and Rainbow Wallpapers

color spectrum and rainbow wallpapers

Colour spectrum in technical, are visible colours from red to violet that made up the white light. They are also the reason why rainbows are so interestingly beautiful. When they are correctly applied on the web, it too gives a pleasant look. MSNBC’s latest web header is a good example.

If your desktop wallpaper is looking a bit dull, perhaps it’s time to add a little spice, make it something more cheerful. Here’s some really Impressive Colour Spectrum and Rainbow Wallpapers we’ve found. We find it not only inspires, also brighten up the desktop. Full list after jump.

Additional: For more wallpapers, check out our gallery.

Rainbow by dardan

Rainbowfest by manicho

4 wallpapers zipped, wide/full ratios for displays up to 30"/19".

Colours of the Rainbow by mallorcaa

Rainbow Bolt Wallpaper Pack by SemanticOne

The Wack Twister by DJ-Takahashi

Rainbow by nathan

Wallpaper colorful by payalnic

Rainbow licks WP by SfinxMagnum

Colorful Desktop Candy by alsnd12

Colorful World 01 by mediablade

Rainbow by Dipschmidt

Spectrum by GRlMGOR

Radial Rainbow by skepnaden

The wallpapers comes in 1600×1200 (4:3) and 1600×9000 (16:9) resolutions.

Accidents Happens 2 by iixo

Rainbow on a Evening Shower by Almighty-Bazaa

Rainbow by dewaynesmith

To-Be-Free-Wallpaper- by silwenk

Spektra & Spektra2 by hypoxic

Specktra widescreen wallpaper pack.

Specktra 2 widescreen wallpaper pack.

Colorful by souhail88

Razor by Kamikaze00X

Available in these following sizes: 2560×1600, 1920×1440, 1680×1050, 1440×900, 1280×800

Trippy by majinshadow

Rainbow Ocean by Thelma1

Rainbow Concepts by jugga-lizzle

Agony by ciokkolata

Rainbow Wave Length

via :hongkiat