Firescope Firefox Add-on for Firebug
Firescope Firefox Add-on for Firebug
|
|
Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.
The tool is also searchable. You can:
… search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.
Check out the screenshots:
Similar Posts
- There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
- There is not enough attention to what information is asked from the user.
- The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
- Quality Web Content
- Related pages / articles / posts
- Links to rich media
- Latest news / updates
- Previously viewed pages
- A contact form
- Ways to save / share the page
- Newsletter sign up
- Turning off unnecessary items such as the header, footer, navigation, search box etc…
- Changing the font to serif, increase the font size and space out the line height to make the print version more legible
- Adjust the columns or remove sidebars so that only the primary content prints out
- Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
- Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
- Are there important pages that don’t get a lot of traffic? Figure out how you can make those pages more prominent
Microsoft.com: a failed redesign
Looks like Microsoft is the latest to be guilty of a failed redesign. Their current homepage iteration sports a table-based layout circa 1998.They’ve also released a beta preview of their new new homepage - which you can view only with Internet Explorer. (When I attempted to view the preview site in Firefox, I was simply redirected to the existing homepage.) The preview site appears to use semantic markup, although the source has been compacted down to only a few lines, so it’s nearly impossible to read. And with no Web Developer extension in IE, outlining all block-level elements (or all table cells) isn’t an option.
Funny that with the IE 7 team touting how standards-compliant the new browser will be, the Microsoft homepage flies in the face of standards. (Is that for-real ironic or only Alanis ironic?) Having worked for a few large corporations, I understand that one department’s products can appear to be the antithesis of another department’s, with the worker bees in both departments being none the wiser. Still, this is pretty egregious, given the emphasis Microsoft claims to be placing on web standards.
Although… we’ve been there before with Microsoft, haven’t we? Perhaps these things are cyclical.Read | Permalink | Email this | Linking Blogs | Comments
I previously blogged about CSS optimization and mentioned that one way to achieve optimization through the use of CSS optimizers.
Styleneat is a similar tool that focuses on reformatting CSS Stylesheets, simply making it more readable. This tool can pretty much take care situations wherein CSS code was developed by different people, re-organizing everything to take on a unified, organized code structure.
The author claims to have tested the tool on “several websites with huge and complex stylesheets” and it has not broken layout. Does it live up to its claim? Give it a spin and share your thoughts.
Floating and Clearing
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility … (http://reference.sitepoint.com/css/overflow) …Color and Backgrounds
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility information on the entire CSS language.Containing Block
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility information on the entire CSS language.The display Property Value: -moz-inline-box
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility information on the entire CSS language.The CSS Box Model
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility information on the entire CSS language.Absolute Positioning
Learn CSS at the SitePoint CSS Reference. With full descriptions, working examples, and browser compatibility information on the entire CSS language.margin bottom " CSS Attributes and Javascript Style Properties " HTML / CSS
HTML CSS Reference. C / ANSI-C. C Tutorial. C++. C++ Tutorial. PHP. Python … HTML / CSS ” CSS Attributes and Javascript Style Properties ” margin bottom. 1. …Five commonly neglected parts of a website that deserve detail
There are some great websites out there. They are well planned, well executed, well designed and simply effective. For every great website there are three that are could be great, but fall short due to a few small areas of neglect.
We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.
The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.
But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:
1. Web forms
While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).
Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.
Web forms are often neglected in two ways:
You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.
Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.
Resources
2. The Content
Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to “weak web copy.” The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it’s importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won’t rank high and no one will convert.
Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.
Resources
3. The Footer
With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don’t fit anywhere else, a copyright notice and maybe an address and phone number.
The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.
This could be:
Resources
4. The Print Version
Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.
The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.
The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.
You can improve the print version simply by:
Resources
5. Analytics
How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.
Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.
If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.
