Archive for the ‘Browser’ Category:
Aloha Editor, CSS3 Pie, FontFonter – Impressive Fresh Tools
It is always impressive how many useful and free web apps and tools there are for web designers, and today’s fresh selection is just that – very impressive. The Aloha Editor is especially impressive, with its unique live editing features. And there is also CSS3 Pie which will make all CSS3 properties viewable in all versions of IE (it really does!). If you have the time we recommend you take a look at these tools.
Aloha Editor – The HTML5 Editor
Aloha Editor allows you to edit content you would never imagine you can. It is the world's first full featured Editor that allows you to edit dynamic content live and in place.
Aloha Editor – The HTML5 Editor
1dl.us – Your all-in-one tool site
1dl.us is a useful all-in-one resource, that feature URL shortening, Upload Pics, Pastebin and a Password utility.
1dl.us – Your all-in-one tool site
CSS3 PIE: CSS3 decorations for IE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
CSS3 PIE: CSS3 decorations for IE
FontFonter
FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
FontFonter
By Paul Andrew (Speckyboyand speckyboy@twitter).
Best Tools for Testing Cross Browser Compatability
Cross-browser compatibility is something that can’t be overlooked in this day and age. The fact that your website could be viewed one way in Firefox and a completely different way in another browser like Safari can be a stressful thing to cope with. Being able to create and build websites that not only look but function the way their supposed to in multiple browsers isn’t a walk in the park.
This is why we’re going to provide you with these useful tools that’ll help you test for cross-browser compatibility. The process for achieving compatibility across a variety of browsers is building, testing and fixing.
Browser Shots
Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue.
A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the browsershot central dedicated servers for your review.
Cross Browser Testing
This tool allows you to pick an operating system and browser and that’s that! You will receive nicely structured screenshots on multiple browsers of your site.
Adobe Browser Lab
Accurately pinpoint compatibility issues and compare web pages at a glance to easily identify differences and potential problems. Preview full screenshots with multiple view options and customizable test settings.
SuperPreview
SuperPreview is to be used in conjuction with Microsoft Expression Web 3 in order to test and preview your web pages in multiple browsers at the same time. You can choose a variety of browsers and specify any page you’d like the application to render for compatability testing.
Spoon Browser Sandbox
The Spoon Browser Sandbox places several browsers with the click of a few buttons at your disposal with very little effort. You’re able to test several pages quickly without any issues.
IETester
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.
NetRenderer
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL and try it out; it’s free.
BrowsrCamp
Browsrcamp lets you take control over a Mac OS X system preconfigured with all the Mac browsers. This is the easiest way to test every aspect of your website on Mac, including Javascript, DHTML, Ajax, Flash and more!
Do You Support IE6 in New Projects?
One of the most popular and hotly disputed questions on Answers recently has been “Do you support IE6 in new projects?“. IE6 has certainly been a thorn on every web designers side for a very long time, perhaps too long. Has the time finally arrived to stop supporting it? Should web designers still show a little consideration for this web browsing relic? What do you think?
The questions was originally asked by Maxt3r and so far has received 22 answers, some designers still do support it, others don’t and some even charge extra for supporting it, you can see these answers below.
Another good week on Answers, our member base has grown to over 490 members. Thanks for all your support!
“Have you asked a question yet?“
Do you support ie6 in new projects?
Question originally asked by Maxt3r.
Answer from Hoad:
I work in the Web Development team for the British children’s charity Barnardo’s and can confirm that yes, we do still support IE6 in new projects. Having said that, we will be very happy when the day comes that this ancient web browser is finally obsolete.
Answer from Darren Nickerson:
I think it depends on what kind of site im creating, if it’s a design related site I wouldn’t even think about it. Most people who use those sites, update their browser. But if I was doing a site for a general subject where casual internet users may use the site I would try to support it as much as possible
Answer from Rochelledancel:
It depends on the client. If their analytics data shows that a significant number of their visitors use IE6, it’s a no brainer, but I will also throw up an ‘upgrade to a better browser for free’ message and explain to the client why this is beneficial to everyone. Also, if they’re a charity or government office then yes, I’ll pitch and quote to include IE6 support.
Otherwise, I don’t support it, and I make it very clear to the client at the outset why I don’t; if they still push for it I’ll charge them a premium.
Answer from Lacy :
Definitely. If you’re in a professional environment … You have to support it. Looks at your analytics – and you’ll see that unfortunately there is still a large percentage of people using IE6.
Answer from Cy Klassen:
No. I will occasionally redirect IE6 users to a nice static page that shows the advantages of updating their browser (including simple steps how to upgrade). That seems like enough support to me.
Answer from Lacy:
I don’t. I mention this in my contract to clients. If they request support for IE6 I will add it in.
I would only advise a client to have support if I feel their target market is likely to use IE6.
If I develop a site without support and then find out in the analytics that there is a high percentage of people ‘trying’ to use the site with IE6 I would add support later on.
I would charge more for IE6 support.
What do you think? Do you support IE6 in new projects?
We would love to hear what you think in the comments below or you can leave your answer here: Do you support ie6 in new projects? on Answers.
Exploring the New Features of CSS3
There has been a tidal wave of buzz recently about all the new CSS3 features and properties. Just what exactly do these new properties mean for web designers, though? Well, CSS3 is pretty cool, no longer will you need to rely as much on graphics or Javascript, and more importantly it allows for better control over HTML elements, allowing you to create more flexible and even more complex web sites. Really, whats not to love about it all?
For today’s news we have collected the best articles that focus on CSS3 tutorials, and give you a little insight to what all the buzz is about.
Understanding The Basics Of CSS3
In this article,the author talks about some of the more popular features of CSS3 that have recently been spotted out in the wild among several popular websites. While most of these are only visible in some of the more modern web browsers (Mozilla, Chrome, Safari) it’s important to go ahead and get a grasp of exactly how they actually work.
Understanding The Basics Of CSS3
50 Excellent Tutorials for Web Development Using CSS3
In this emerging roundup they mphasis on some of the latest techniques: text-shadow, rounded box, box sizing, opacity handlers, multiple backgrounds, border images and also support for multi-column web layouts.
50 Excellent Tutorials for Web Development Using CSS3
Basic CSS3 Techniques That You Should Know
This article, from Six Revisions, takes a look at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment.
Basic CSS3 Techniques That You Should Know
15 CSS3 Navigation and Menu Tutorials and Techniques
Please bare in mind that for the most part all of these menu tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.
15 CSS3 Navigation and Menu Tutorials and Techniques
By Paul Andrew (Speckyboy and speckyboy@twitter).
Fresh CSS Tips, Techniques and Tools
There is seemingly no end to the conyer belt that is CSS development. Every day there are new tips and techniques being published with fresh ideas and new solutions to age old problems. keeping up with it all is not easy.
In today’s news round-up we have collected some fresh CSS reources and some good CSS reading to keep you in the loop.
How To Create an IE-Only Stylesheet
Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet.
IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.
How To Create an IE-Only Stylesheet
CSS Transitions 101
Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot. But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.
But many designers and developers argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.
Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the CSS Transitions Module to the CSS Level 3 specification, closely modeled on what Apple had already added to Webkit.
CSS Transparency in All The Browsers
There are many many cross-browser issues and transparency is one of those weird issues that crops up more than most. All the browsers do treat transparency in different ways, and to overcome this issue we need to define three different properties to cover all browsers.
CSS Transparency in All The Browsers
12 really useful CSS tools
Working on a website’s CSS can be quite an enjoyable job. However some of the tasks aren’t always fun. This is why there are tons of cool CSS tools and apps, to make your life easier and keep web designers’ work bearable.
By Paul Andrew (Speckyboy and speckyboy@twitter).
Use CSS3 Pseudo Selectors With IE: ie-css3.js
ie-css3.js is a project by Keith Clark which enables Internet Explorer to identify CSS3 pseudo selectors & render any such styles.
Including 2 JS files (DOMAssistant is required too) into your web pages & inserting CSS files with the <link> tag (inline styles are not supported) will make the rules work.
How does it work?
ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseduo selectors.
If a selector is found, it's replaced by CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.
Supported selectors are:
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-child
- :last-child
- only-child
- :first-of-type
- :last-of-type
- only-of-type
- :empty
Alternatively, the popular IE7.js offers a similar functionality as well.
P.S. It doesn't support :not() pseudo selector.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Open Source Ajaxed IM Client: iJab
iJab is an open source, web-based & Ajaxed instant messenger application that uses the XMPP/Jabber protocol.
It is written in JavaScript, uses Google Gears for clientside storage & supports MSN, AIM or any other XMPP-based services (you can easily create a closed chat group for your community).
iJab has lots of features like:
- theme support
- new message pop-up notifications
- multi-user chat
- search users
- avatar, smiley support
- & much more..
The application has 3 modes: stand-alone application, Facebook-like web chat bar in page & live support
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Simple & Functional Screenshot Tool: LightShot
LightShot is a simple & free tool which makes taking screenshots very easy.
With the click of a keyboard shortcut, a cropping interface appears where it is possible to:
- set the area of the screenshot
- make it fullscreen
- copy to clipboard
- upload to the net & get a link
- edit it on a web-based service
Most of the similar tools instantly take a screenshot of the area you selected before clicking any approve button. LightShot makes it kindly, waits for you to arrange the area, shows you the size of it & a click is required which is better to prevent wrong screenshots.
The tool can work in every computer as it comes as a Windows desktop application, a Firefox add-on & an Internet Explorer add-on.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!