BlogmyQuery – BMQ

Whether you are testing themes submitted to your service or your own work, we always find ourselves searching for quick ways to browser test and or validate our work. Sometimes we may end up using a genre of tools to get what we wanted and most of the time we develop a set of favorite methods and tools to achieve it.

Here we cover 10 different ways to validate and browser test your website to add to your list of methods.

HTML and CSS Validation Tools

W3C HTML and CSS Validation

The W3C set of validation tools happens to be the most popular source to check your code for validation. You can paste code snippets, link to your code, and upload your code to check validation. If you have errors within your code, it returns a nice detailed report for each error highlighting the exact character or set of characters that are invalid. A great tool to use even if you use others that are available out there.

Integrated Development Environment Validation

Many integrated development environments and other editors offer built-in code validators right off the fly. While some of these editors may require you to select a button to view whether your code is valid or not, others usually do it right off the bat as you type out the code. Therefore, it helps you catch the errors as you go along to finish your website completely validated without having to go back and fix validity errors.

Web Developer Toolbar

This is a Firefox only toolbar; however, because it is so feature-filled, it is worth a mention. The Web Developer toolbar is a great in-browser testing tool containing a plethora of tools for testing your website including resolution tests. However, it also includes a great HTML and CSS validators that works on the fly. If you do not select to view details on validations, you will just be shown two icons that represent whether the code is valid or not.

The toolbar additionally tests other elements than HTML and CSS, so if you need to perform testing on other things within your website, it is a great tool to quickly and easily do so.

HTML Validator

HTML Validator is another Firefox add on that runs in the background seamlessly. A simple yet affective tool displays whether the HTML to your website is valid, invalid, or consists of warnings.

When doing so, it displays different icons as well as the number of errors and or warnings, and by clicking on these icons, it opens up a nice pane showing you the code snippets that are invalid or contain warnings, as well as details on the errors as well as about the warnings. A great tool for in-browser testing and editing.

Browser Testing Tools

Installing Older Browser Versions

A really common method to browser testing your website is to install older versions of a plethora of browsers such as Internet Explorer, Firefox, Opera, Safari, and others. The softwares’ websites usually offer older downloads which is a great way to obtain your copies of older versions.

Adobe BrowserLab

If you are not too keen on the idea of installing multiple pieces of the same software but of different versions to browser test your website, you can give Adobe BrowserLab a try. Adobe BrowserLab is a multi-tabbed browser testing software allowing you to test your website in multiple browsers all from one pane or window.

Additionally, if you need to test your website in the same browsers but from different operating systems, Adobe BrowserLab simulates different operating systems for you, so you do not hassle through switching between them to perform the required testing.

Overall, Adobe BrowserLab is a great piece of software for any designer needing to test their work across many platforms and setups.

Integrated Development Environment Browser Testing

Most of our favorite editors have built in tools for browser testing our projects and websites we are creating and or developing. While it may not be too extent with different versions of the same browsers, they do let you connect you installations of different browsers into the single environment for quick, on the fly testing.

Browser Shots

Browser Shots has to be the greatest and easiest way to get around to browser testing your website in a genre of browsers. What it does is you provide a URL to the website you would like to browser test, select the browsers and their versions you would like to test your site in from their long list under different operating systems, and hit submit.

They will then return screenshots of how your website looks like per browser selected per operating system. While it might not be an easy task to perform while you are still modifying your website, it is a great method to obtain a mass visualization of how your website looks across a plethora of browsers quickly.

IETester

If you are always worried about how your website looks like in different versions of Internet Explorer like the rest of us, then IETester is definitely something to consider. IETester is a single interface to test your website from version 5.5 of Internet Explorer to their latest version. It holds a nice Office 2007 design to it as well as a tabbed interface to easily flip through testing panes.

IE Tab 2

IE Tab is a Firefox add on that implements, as its name describes, an Internet Explorer viewing pane designed for cross-browser testing within your Firefox browser. It is a great quick tool to easily test your websites in Internet Explorer on the fly with a click of a button without the hassle of leaving or changing windows between Firefox and Internet Explorer.

To conclude, while there may be a plethora of other tools out there to validate your code and perform browser testing, we covered ten popular methods and tools that will hopefully get you thinking and started on making your own laundry list of browser testing tools as well as HTML and CSS validation tools.

There are hundreds of ways to writing out code with hundreds of methods to achieve certain functionality. However, out of these many ways of writing code to get to the final product, there are many habits that are not great to the programmer or to the functionality of what you are trying to achieve. Furthermore, we discuss 10 tips for improving and writing better PHP code.

Development Style

Tabbing, double-spacing, all on one line; we all have our style of writing out code and there really is not a right or wrong way of laying your code out. However, many developers tend to fail at keeping their development style fluent throughout a project. I myself have been caught a few times adapting to new styles within one project.

Furthermore, it is best to keep your code laid out using one development style rather than several to keep your code easily readable and organized. If your development style sometimes evolves to something different, it is best to not use your new development style on a project that uses a different style, but rather implement your new development style on new projects you may start. This keeps all of your projects fluent and organized.

Good Variable and Function Naming

Many developers do not really care about proper variable and or function naming. However, good function and variable naming is key to have more organized code, which categorizes under better-written code as it becomes clearer to understand and comprehend.

Naming variables and functions properly is rather something easy to do and should be based on what the variable value is and what the function achieves. This not only provides easy to understand names, but it also helps you and other developers understand what each function or variable performs and holds by just reading the short name.

Commenting Your Code

Commenting your code is a major step to organized and readable code and actually compliments most of what you can do to organize your code, as it is a key aspect in organization and usability. When writing comments to describe certain actions, functions, or code, it is best to keep the comments strict and to the point without describing what everything is.

For example, if you have a code snippet that is quite obvious in terms of its functionality, it is best to either leave a few words about it or not to comment it at all, as too many comments can be obnoxious.

Do Most of the Work

Copying and pasting code is something we tend to do most of the time, from one project to another, or from code, we may find useful on the net that has been done for us. However, copying and pasting code can sometimes hurt you in the end as you may not be familiar with your project or code as much as you had hoped you were or as much as you need to be. Furthermore, copying and pasting a few snippets is fine, but you should do most of the work to freshen your memory.

Look Around

Sometimes we might be doing something new and do not know what the best route is to take in terms of speed and performance, thus, looking around at other code from people who created something similar to what you are creating is sometimes a great idea to do to obtain a general idea on how to approach it better. This does not necessarily mean copy and paste the code, but rather just get a general idea of how it works.

Understand the Language’s Limitations

We sometimes try to achieve many things the language was not designed for or is not capable of doing by creating workarounds. This is not a great idea, as your created workaround may not work sufficiently or effectively. Therefore, it is best to understand the language’s limitations, and to work within them.

Receive Structural Feedback

We sometimes think that we are the only ones, who know how to properly develop, but we are not and in fact, there is always someone out there better than us. My point is, it is always good to receive a second opinion on your code in terms of structure, as some feedback can be critical to enhance the performance of your script.

Testing Your Code Often

Part of making your scripts closer to bug free is to test your work often and as you go along. The problem with many developers is that they think what they develop should work fine the first time and decide not to test certain aspects of their script as they go along, and in the end, they end up with several bugs and many they may not catch immediately. With that said, it is in your best interest to test many aspects of your code or script for bugs as you go along in development, this is proven to reduce bugs in the long run.

Built-ins over Building Your Own

We sometimes tend to recreate a built-in function just to have it. The problem with unnecessary recreation of built-ins is that the performance is affected. Moreover, using built-ins when applicable is a better idea and not only does it increase performance, it also keeps your scripts clean from unneeded code.

Don’t Split Everything into Files

Splitting your code into several files is actually part of keeping your scripts or projects organized instead of having everything all in one file. However, many projects I have seen tend to split everything into many files, sometimes separating individual functions into individual files.

This overkill and not only affects the way your code is laid out but it also affects performance. For example, instead of splitting individual functions into individual files, create a functions file and store all of them there, or group them into files. This still keeps your project organized and it keeps things reasonable.

Remember, doing something beneficial is great, but overdoing it or not doing it at all causes a negative effect, thus, use your judgment, and use techniques and methods reasonably.

There is a plethora of ways to increase conversion rates, but a couple of ways are often disregarded as important, when they truly are. In order to show the importance of accessibility and usability, here we’re going to take a look at a variety of tips that’ll help increase conversion rates through them.

Accessibility

Flexible

Accessibility is all about flexibility in design. The design should be able to stretch and cope to resolution sizes. The reason this is important in accessibility is that if the design does not cope for many different resolutions, it becomes unbearable for users to use or browse about, making it inaccessible indirectly.

Cross Platform

A website is all about being cross platform compatible. The website should be able to easily work on mobile devices ranging in size as well as large displays and other mainstream devices. In addition to making your website cross platform compatible, you should also bring your service to different platforms so your users can take your service wherever they go.

Take Netflix’s online service as an example. It started as an online service for instant streaming, and then it was brought down to mobile devices via native applications, and so on and so forth. This allowed them to increase conversion rates from their online service as it became accessible and native to many devices they utilize.

Touch Safe

Mobile devices are migrating from stationary qwerty keyboards and keypads to touch screen interfaces. This also means your website needs to be touch screen safe and compatible as a part of accessibility. Small links and navigations make it impossible for touch screen mobile platform users to easily navigate about. With that said, assure your website is scalable and adjusted for different platforms as a part of accessibility.

Weight Adjustable

Weight adjustability refers to the weight of the available content on your website. As different users access your website from different devices and platforms, the weight of your content should adjust to the real estate or screen space available, getting rid of unimportant content, and leaving that of which makes your website important, such as the shopping of goods as well as the purchases of goods, and getting rid of latest news and other unnecessary items and or content.

Printable

Many disagree about the fact that accessibility includes making pages printer friendly. However, accessibility refers to the availability of content, which includes making certain pages printer friendly. If users need to print out their invoice or receipt, the page needs to be customized specifically for printing for best results. Therefore, printability categorizes under accessibility.

Usability

Usability is all about making your website and or service easy to work with, use, and navigational. Imagine having an instructional booklet on putting together a personal computer. If the instructional booklet is not clear on its instructions, you are bound to make mistakes as a first timer to personal computer building.

Similarly, if a website is not clear and easy to browse about, users will most likely leave the site, which loses potential customers or clientele, which decreases conversion rates. To show the importance of usability, we cover several tips that are sure to get you started on making your website and or service more usable or user friendly.

Clean Layout

A clean layout is always the first step to usability. Getting rid of unneeded clutter, organizing elements and objects across the design grid, helps make the website easier to navigate about and reduces eyestrain for the users who cannot handle too much information and very tiny content.

Feature Filled yet Simple

Users love features, but they also love simplicity. What this means is, when implementing features to your service or website, usability should be top and key on your list when adding new features to improve your service or website.

Generally speaking, features should be very easy to use and not require instructions to get them working or to get your users to use them about. Therefore, focus on the complexity of the feature in the back-end, but for the user or front end, make sure it appears as simple as possible, yet satisfying feature wise.

Easy To Understand

Your website’s layout should be speaking for itself. What this means is, you can display as much content as necessary on many different pages, but the layout of how the content is displayed should be clear and precise in terms of understanding.

A user does not want to spend time searching through clutter to get to a piece or feature they were looking for, and they also do not want to go through many navigational links to get there. Therefore, make everything easy to understand as if they have put the layout together themselves, knowing every corner, and where everything is in an instant.

Versatile

If your website or service is designed for users to access or use it on Earth and on Mars, make it versatile and adaptable so it works well on Earth and on Mars.’

What I mean is, your website or service should be able to adapt between many different situations and platforms, and be very useable as it would be, being viewed on the intended platform and resolution.

Expandable

Your audience could anyone, folks who are losing their eyesight, others who are dyslexic or color blind to certain colors. What this means is, your website should offer features that allows them to expand on your website. For example, many users do not tend to stick to the text size you initially designed your website around and use their browser’s tools to expand it.

This not only destroys the layout, it is also very tacky and more difficult. Instead, make your layout or design expandable to such changes, and offer a feature that allows your users to increase or decrease the font size. The same principle applies for font colors, or background colors.

Add a nice color palette of which users can choose from to change the background or foreground colors, it gives them the flexibility and adaptability they need without having to leave your website or use a third party service to do so, increasing conversion rates, and returning customers or visitors.

As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.

As designers we have a choice. Do we continue designing for the ’safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.

3 Ways to Build a Responsive Site

Firstly, Fluid Layouts

Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.

A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.

Secondly, Mobile & Desktop

By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.

However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.

Thirdly, Media Queries

Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.

On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.

Designing a Responsive Project

When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.

1. Follow natural breaks such as <h2> and its friends

Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.

2. Images often tell their own story

On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.

3. Quotes, Code & Tables are contextual

Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.

4. Don’t split up blog posts

Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.

5. Keep the navigation together

Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.

Who is Responsive Design For?

Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.

Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.

Responsive Design is Here to Stay

Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.

Validating HTML or CSS code is a controversial topic. Many are strict on assuring their code is validated while others do not care at all. There are plethoras of reasons why you should validate your code, or at least as much as possible instead of ignoring the errors. We discuss several benefits to validating your HTML and or CSS.

Decrease Cross-Browser and Cross-Platform Issues

There are many reasons why some browsers interpret your code differently from others. While it could be an intended implementation in the browser, it is mainly a bug in its interpreter that causes variant changes to your web page across many different browsers and platforms.

You can implement many quick fixes and “hacks” to your code to get it to look just right in most of the popular browsers. However, as these browsers continue to be updated, one of your hacks or quick fixes may have been a temporary work around to a bug in the browser, which may be fixed in the future causing your site to look awkward after an update has been implemented.

Moreover, while some workarounds are necessary, you can try to eliminate several by just validating most or all of your code, possibly making your website future proof.

Good Development Practices

Assuring your code is completely valid benefits you as a developer as you will help teach yourself good development practices for the future. Additionally, when learning or developing, it is best to learn and develop something the right way instead of keeping bad habits in your learning and developing process.

Professionalism

Validated code is a big sign of professionalism especially to your current or future employer and or clientele. By having valid code, it shows whomever it may be that you take your time to develop something of quality rather than something that seems like you whipped up quickly to get the job done.

As an additional to professionalism being valid code, organized and well laid code is also a sign of quality and professionalism. Thus, always assure your code is neatly organized and valid when need-be.

Standards Compliant Code

Browsers today are always improving to be standards compliant, so your website should too. When you validate your code, it means that your code is standard compliant. With that said, it is definitely a great idea to future-proof your website by validating your code, which generally takes minutes to do.

How to Validate

Now that we covered several benefits to validating your code, how do you validate code?

One of the easiest ways to validating your code is to visit w3.org and use the HTML and CSS validators available there. All you need to do to check if your code is valid, is to either upload, paste, or link your code or website and hit the validate button. If errors return, they usually provide explanations to each error returned, making it generally easy for you to follow through and fix.

Other ways to validate your code is to utilize tools available to make validating code a lot easier. These tools are generally available in a plethora of options such as validators built into Integrated Development Environments, browser toolbars, online services, or even desktop tools.

Overall, validating your code is a definite must whether you do it today or tomorrow. In fact, as time progresses and browsers continue to update to become more standards compliant, not validating your code will mean that your website will not properly be laid out as you may have intended throughout these browsers.

Furthermore, prepare your websites for tomorrow and get the code validated as it will save you time in the future, and your website will more likely work across different browsers and platforms than it would be without being validated.