CSS is an amazing language used to style websites. While it is a very easy to learn language and rather simple in functionality, sites today cannot be where they are without it. In fact, even extremely simple websites formatted only around text use CSS to fix the text or center it on the page. So when is CSS too limited or too complicated for certain design aspects or situations?

Here we cover Three Distinct Design Elements that should not use CSS as their basis for being formatted.

Image Maps

Image maps have been around for as long as I can remember, being popular at its time for easy navigation linking on images. While it is not as widely used as it was once before, it is occasionally found on several websites such as YouTube or the National Weather Service. So why not use CSS? CSS image maps only support rectangular areas while the traditional image maps support polygons as it is based on provided coordinates.

With that said, using CSS to create an image map is a long and tedious process to attain as well as being difficult for compatibility in relation to browser support. The traditional method by using the HTML code is far more precise because of its polygon shape support, allowing you to reach every pixel easier. Furthermore, you can have a general image map in five minutes versus having to work for an hour or more to get it to exceptionally work via CSS, thus, using what works best is always the better option.

Flexible Columnar Layouts

Many people including myself have created columned layouts to separate text using CSS and HTML tricks to make it look and work exceptionally. You may have noticed a few columned layouts that determine how many columns to display per row and the size of each column to fit perfectly, this is not done only using CSS but rather mainly using JavaScript. While CSS 3 may have an equivalent solution to JavaScript, it is being finalized and not supported by several major browsers deeming the use of it minimal for such applications for a widespread support of users.

Thus, the current easy solution is to utilize the JavaScript effects to attain proper columnar layouts without the use of tables, which seem to be overrated. I know you may be thinking about your users who do not have JavaScript enabled and how the website might appear to them. While rarely anyone disables the use of JavaScript, the easiest fallback is a simple layout that can be used across many platforms. However, you should not worry too much about users not having JavaScript enabled due to the rarity of it.

CSS 3 Limitations

While CSS 3 is an amazing version with shadow affects, 3D object effects, rounded corners, and the likes, it still has its limitations. For example, let us say we need to create a page flip effect for one of our design projects. CSS can do the page shadow effect, display text with interesting effects, as well as incorporate many other effects and additions, however, it cannot actually perform the page flip animation.

To achieve the flip affect, you need to reach out to other technologies such as JavaScript, which seems to be a reasonable outlet to utilize. In fact, with all sorts of JavaScript frameworks, the work is pretty much done for you, all you would have to do is call the function you need and it would be ready to go with some final touches.

The End of Our Journey

CSS is a great medium to quench your design needs as it can do everything you need to get a great structured layout working for you. However, when it comes to animating effects or taking the job of other languages, it is best to stick to them rather than attempt to create them in CSS as the result will end up exceptional if attained and not quite the way you may have imagined.

Get this Post in PDF Format!

GrindSmart Mag has been around for a couple years, and as time advances, it’s no surprise we go along with the “movement”. The delivery of content on the web has evolved into something much more than we had expected, especially after the inception of weblogs. And we plan on stretching that frontier. Over the years we’ve received several inquiries on the subject of converting our online publications into some type of format that can be downloaded and physically read.

Today, we’re happy to announce that our content will be publicized in a format that can be easily printable. We’re going to be placing the link at the very end of articles.

Although we’re aware that anyone can simply hit the print button on their keyboard to print content, the way we have organized and set-up our articles in PDF format will make reading them much easier. If you don’t believe us, take a look for yourself!

How Can You Contribute?

We’d like some feedback on your part. It would be our pleasure to read your opinion(s) on how you believe delivering our content this way can be beneficial to you and everyone else.

When developing, we always tend to search for shortcuts to shorten the amount of time we spend. While some techniques used may harm the quality and integrity of the script you are developing, there are a few that do help you out as a developer without causing damage. We cover five techniques that can be used to cut down on development time.

Remember to subscribe to our feed for up-to-date development articles and resources!

Recycling Code

This method or technique rather happens all the time whether knowingly or not. When developing new scripts that may utilize features you have developed before for previous scripts, it is in your best interest to just copy that bit of code and paste it in your ongoing project. This saves you development and puts your retired code back to work.

Auto Complete IDE’s

While integrated development environments enhance your development environment by providing basic syntax error checks and highlighting your syntax, their auto complete feature does speed up development. For example, writing function names, loops, conditional statements, and others can be auto-completed by the IDE.

For a large project, those seconds you save add up to minutes and hours saved. While the whole idea of the auto complete saving time may sound overrated, it is the little things that enhance your development experience that save you time, whether it being the auto complete or even just the line number display.

Frameworks

There are plethoras of frameworks out that take care of a lot of the work for you. For example, many of the scripts you may create may utilize many generic things such as a database connection. Either you can spend time recreating it for your script, or you can download a good framework that completes a lot of the work for you.

If you are not too keen on the idea using frameworks other developers created, you can create your own customized framework, one that suits your needs most of the time. Furthermore, the utilization of prebuilt frameworks can save you hours of development time, therefore, it is something to consider.

Recreating the Obvious

Reinventing the wheel or recreating what is already out there and suffices for your needs wastes development time. If you are developing a forum for yourself or a for a client it is best to use one that has been already created and customize it rather than spend the time create on yourself. However, with that said, if creating one from scratch is easier depending on your situation, or is absolutely necessary, than reinventing the wheel does not quite apply to this point.

Documentation

Documenting your code is a real time saver. Many times when you are developing multiple projects at once, some code snippets get lost and it creates confusion. By documenting your code, going back to pick up from where you left off would be a lot easier as you can read the documentation above a few lines of code to get back into line. Documentation additionally makes debugging easier as you can find the code snippets you are looking for much quicker by reading through your documentation until you reach the appropriate line.

Additionally, if your work is ever transferred to other developers, or other developers transfer their projects to you, you can easily understand the code, what each snippet is doing, and why. Without proper documentation, many of the open source projects today would not be as organized as they are, neither be able to pass the project on to other developers for continued development.

To Conclude

Overall, there many different ways to speed up development, however, it completely depends on your developing style and standards as that determines what techniques best suit you and whom you are developing for.

Get this Post in PDF Format!

The use of internet surfing on mobile devices continues to grow as new internet capable phones and other mediums release in the industry. As this industry continues to expand, the demand for mobile capable websites increases, which means your website should be mobile capable ready.

However, making your website mobile capable could mean many things: to create a new stylesheet or to just hide a few things.

Remember to subscribe to our feed for up-to-date development articles and resources!

So What Should You Use, and Why?

When new mobile devices started to release with internet surfing capabilities each of the devices browsers’ varied in CSS and HTML compilation or interpretation. This meant that you needed to dodge every corner to get your site working for most mobile devices.

However, today, a lot of new mobile devices such as the iPhone, iPod, Microsoft’s Zune, Android phones, and others contain browsers that interpret screen CSS, which means you only need to make a few if at all changes to your design to make it mobile capable. So why should we use handheld or mobile stylesheets?

Using mobile stylesheets today is still a necessity however becoming a minority. Due to the vast market of third party devices and operating systems, it is in your best interest to continue to support mobile stylesheets. However, as any other browser problem, each of their browsers interprets differently, which makes it quite difficult to develop for all devices.

For example, some mobile browsers support @import or @media elements while others do not, some support screen or handheld styles while others ignore both. Furthermore, keeping your mobile site as simple as possible in terms of design is best, as it decreases the chance of error throughout most devices.

There are definitely benefits to utilizing a mobile or handheld stylesheet over a screen stylesheet, and vice-versa. If you operate a globally used service, it makes sense to use a mobile or handheld stylesheet, however, only use basic design patterns to keep things as simple as possible. One widely used idea is to create multiple mobile sites.

For example, the iPhone has its own mobile designs website developers can utilize, as the provided designs look and work like the phones’ interface, as well as it supports javascript and Quicktime. Therefore, some companies create specific mobile sites for different devices and usually have a generic fallback design for non-specific devices.

Youtube is a perfect example of mobile stylesheets, it has multiple designs for different devices to better fit each of them. Take a look at Yutube’s iPhone or iPod site design (top left) and compare it to its generic mobile design (right), you can definitely see a difference in the way it displays its content as well as the features it provides between both.

Furthermore, some companies do not modify most of their design and just use the display:none element and other basic elements of CSS to hide possible obstructing objects on their website. Therefore, there are many ways to optimize your site for mobile viewing, and it really depends on your audience and your preference. So how long will mobile or handheld stylesheets last?

Mobile devices that solely use handheld stylesheets are definitely dwindling down, especially since many new mobile devices are utilizing popular software such as the Opera Mini Browser, FireFox Mobile, and others.

As the years come, we will definitely see a growth in the usage of XHTML and CSS and less specifically handheld stylesheets as the standard of the internet continues to grow and become more demanding towards media and content sharing related services. I personally think in the next few years we will see expansion in such standards and we will definitely see handheld stylesheets slowly phase out.

What is your take on this informative post? Leave us a comment below and let us know how you feel!

Usability is crucial to the attraction of users. If your website isn’t usable then you will not only fail to retain users, but it will be rendered “useless” in a variety of ways. Below we’ve put together a small guide to 5 mistakes anyone who doesn’t practice good usability can commit. Once you’re able to steer clear of these errors, then you’re well on your way to taking part in good usability and increasing the usage of your website.

Remember to subscribe to our feed for up-to-date development articles and resources!

Failing to Tell the User Which Links Have Been Visited

Links are an important element of any content that’s being displayed on your website. Many times links are used to direct users outside or inside of the website for further references. If you have a link within your content then you’re more than likely trying to influence the user into clicking it, but if you haven’t let the user know that they have not visited the link then they’ll assume they’ve either visited it or they haven’t.

And if they have and they click through, it can become quite annoying trying to differentiate which links they’ve visited and which ones they haven’t. You can style your links through the CSS. You could even use a lighter or darker color for links that have been visited. It’s up to you.

Forgetting to Accompany Alt Text With Your Images

<img src="filename.jpg" alt="Alternative description goes here" />

There’s an alt tag, it’s there to let you know that your user’s browser won’t always load an image or it could “disappear” from the server and a small indication that an image is supposed to be there would be awesome. You should always add some sort of description to your images just in case they don’t load.

This will let the user know something went wrong, however, you went out of your way and added a description for them. This is both good accessibility and usability because images can and are used as links and/or a way to further depict content.

Not Linking the Logo to Your Homepage

Isn’t it annoying when you’re visiting a website and you skim through what seems like a thousand pages and all you want to do is go back to the homepage, but when you try to click on the logo, nothing happens? This frustrating and I thought it was worth mentioning since your users will definitely appreciate this, especially if you have a large website.

Justifying Text

Justified text may look much cleaner and easier to read, but in reality it’s usually not. When you justify your text you spread the uneven paragraph until it’s evenly stretch on both sides. This causes users to rapidly confuse scentences and it also discourages users from continuing to read because of the uneven spacing between the words. I would recommend not to justify your text unless you absolutely have to.

Not Identifying Active Fields Within Your Forms

If you have a webform and the user can’t note the difference between the field they’re currently using and the rest of the other ones, then you have a problem. It’s good usability when the user switches from one field to the next and the active field lights up a different color, the border changes, or a small text-box pops-up informing the user of what is required of that specific field. The point is to make sure you indicate which field is which, it will go a long way and could even produce higher conversion rates for sign-up forms.

Here at GrindSmart we aim to facilitate first the needs of the bold who call themselves web developers and we also strive to accommodate everyone else eager to learn and find resources that will help them through their journey on learning how to efficiently and effectively develop web applications and more. This is not to say that we cater to an audience who know it all, in fact, our audience primarily consists of those who are in the beginning stages of developing a website.

This is exactly why we’ve compiled this great list of cheat sheets that will allow you to ultimately code on a higher level. Forget that we used the word “cheat” and just focus on the end game; resources that’ll help you become a better developer.

Remember to subscribe to our feed for up-to-date development articles and resources!

PHP Cheat Sheet

The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.

Ruby on Rails Cheat Sheet

The Ruby On Rails cheat sheet is designed to be printed on an A4 sheet of paper and live by a developers desk, to make life a bit easier. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size Ruby On Rails cheat sheet.

MySQL Cheat Sheet

The MySQL cheat sheet is designed to act as a reminder and reference sheet, listing useful information about MySQL. It includes a list of the available functions in MySQL, as well as data types. It also includes a list of MySQL functions available in PHP, and a list of useful sample queries to select data from a database.

JavaScript Cheat Sheet

The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object.

mootools 1.2 cheat sheet

For your coding pleasure, MediaVrog just updated their cheat sheet to the new revision. It includes cheat sheet like documentation for Core, Native, Class, Element, Utilities and Request. They’ll be launching another cheatsheet which will cover FX and Plugins soon.

Scriptaculous Cheat Sheet

It was a real challenge to fit it all in on one page… and I was initially planning to cover more than just the combination effects, but as you can see there wasn’t a stitch of room left over. I didn’t even get to do anything fun with angled text or images!

HTML/XHTML in one page

This is a straight to the point and easy to read HTML cheat sheet that makes coding in HTML much simpler.

(X)HTML Elements and Attributes

If you want a simple and awesome xhtml cheat sheet this is the one you’re looking for. You can also explore cheat sheets for several other technologies and programming languages on the same site.

CSS Cheat Sheet (V2)

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Actionscript 2.0 Cheat Sheet Flashpaper

This is a nice cheatsheet of all the Actionscript 2.0 classes and methods. I believe it was created by Mike Chambers.

For those of you that subscribed to the GrindSmart Magazine iPad Giveaway for Designers and Developers we thank you! Today we have the winning results! The winner was chosen by random through Random.Org services. There were 41 comments in total. We inserted the min number (one) and the maximum number (forty-one) and then hit the generate button and whatever number (of comment) came up, then that person is the winner.

Please remember to subscribe to our feed for more great articles and amazing giveaways!

CONGRATULATIONS: COMMENT #8 Hugene L.

You will be contacted by email (if you haven’t already) to arrange shipping (if applicable) of your product(s).

Everyone has Questions they need answered, especially when you’re working in such a wide and detailed industry as web development and design. No matter how small or complex, your questions on development subject should be answered. This what collaboration and dedication brings us to, a place where any of our questions can have the opportunity to be answered. And for those full of knowledge, to share what you’ve learned with others.

Below we have 5 Extremely Helpful Q&A Websites for developers and designers as well. I would take the opportunity to search through a few, use them as references, and sign-up with the one you feel is most helpful. We’ll also show you how to create your very own Q&A community for FREE!

[Remember to subscribe to our feed for up-to-date development articles and resources!]

Design Reviver Answers

Design Reviver Answers is a question and answers community exclusively for web designers. Questions are limitless and anyone can ask or answer them. You can aslo perfom a simple search by term or tags and find relevant questions and answers. Registration is not required, however, if you want to gain points and be alerted everytime your question receives an answer then it would be great to register. You can also take advantage of a rating system so that you can rate others answers helpful or not so helpful.

DocType

Doctype is a free question and answer site for web designers. You can get fast solutions to your CSS, HTML, web design and email design problems. Everything is editable, just like a wiki. This means answers are accurate, neat and up-to-date. Note that you’ll need a reputation score of 100 before you can edit other people’s stuff.

Stack Overflow

Stack Overflow is a programming Q & A site that’s free. Stack Overflow is collaboratively built and maintained by your fellow programmers. Once the system learns to trust you, you’ll be able to edit anything, much like Wikipedia.

Inspired M.

The Inspired Q&A Forum is more for design and blogging, however, this is not to say you can’t post any and all of your design/development questions. This was built on the same platform as Design Reviver Answers (QHUB).

ServerFault

Server Fault is a Q&A site for system administrators and IT professionals that’s free. It is also part of the company who began Stack Overflow. Server Fault is as frictionless and painless to use as we could make it. We believe finding the right answer to those system administration and IT questions should be as easy as falling into the pit of success. And maybe even a little fun along the way.

Create Your Own Q&A Community

Qhub is a quick & simple way for anyone to build their own Q&A website in minutes. Each group is set up and started by an ‘owner’. Friends, colleagues, club members and more are invited to join and the questions can begin. While other Q&A websites are great for information sharing and communities, Qhub offers a more targeted community managed by the people that are interested in that particular subject area.

GrindSmart Magazine has partnered up with some of the people who run ShareDen.com to announce our latest GIVEAWAY! We’re going to giveaway a 16GB Wi-Fi 3G iPad to One lucky winner on May 1st 2010.

Our only requirements is that you comment and subscribe to GrindSmart Magazine and that’s it! One lucky winner will be chosen on March May 1st 2010 in absolute random order!

YOU CAN ONLY POST ONE COMMENT PER SUBSCRIBER. IF YOU HAVE ENTERED MORE THAN ONE COMMENT TO THIS GIVEAWAY, THEY WERE ALL DELETED AND YOU WILL NOT BE ALLOWED TO ENTER ANY OTHER CONTEST.

The iPad comes with a crystal clear 9.5 inch screen with a 1024-by-768-pixel resolution that was designed for browsing and reading eBooks. It also weighs 1.5 ounces, is .05 inch thick, and comes with a built-in 16GB, 32GB, or 64GB flash drive. This is where the price splits, since the basic 16GB iPad starts at $499. Even though it resembles that of the iPhone, we can assure you that the iPad is much more. Here’s why. The larger screen size will allow you to view applications with a lot more freedom, and you’re able to websites as you would on a laptop with minimal restrictions. The onscreen keyboard is extremely easy to type on, and resembles that of a laptop in terms of size. Whereas the iPhone’s keypad is sometimes difficult to work around.

A large part of the controversy surrounding the iPad has to do with the fact that it’s not running OS X or anything similar to that. It seems to be operating out of an iPhone-like OS except it’s more advanced. The applications are streamlined from the Apple App Store right to the iPad and it’s capable of running almost every applications that already works on the iPhone as well. However, the apps will be resized to fit the full screen resolution or scaled down to resemble the iPhone’s screen.

With the iPad you’re able to sync it with iTunes and when it comes to wireless connectivity, there are two different versions that are available. One relies upon WiFi-entirely, and the other can is free to roam the web with 3G connectivity. The difference is mostly in price, you don’t need a contract, and it will be shipped unlocked so that you’re able to use it with other carriers (besides AT&T). Unlimited data plans for AT&T start at $29.99/month.

Disclaimer

We are providing one GrindSmart Magazine feed subscriber who comments a completely free 16GB Wi-Fi 3G iPad plus shipping. The winner will be contacted with the email provided when they comment for shipping arrangements. GrindSmart is not an affiliate of AT&T and we will not set-up any sort of connectivity plan with any mobile carrier. It is the winner’s responsibility to provide their iPad Internet connectivity if desired.

Being able to develop faster is what most developers strive for, and that’s no secret. With the flexibility of WordPress and a few theme frameworks, you can already develop a WordPress site with ease and speed. But what if you could streamline the entire process? Below we’ve added a few quick tips that will allow you to do just that.

[Remember to subscribe to our feed for up-to-date development articles and resources!]

Set Up An Experimental Area

When you’re developing a theme or making core changes it’s essential to set up a workspace dedicated to experimenting and testing. It’ll save you tons of time and allow you to reduce errors. With an experimental area you’ll be able to pre-publish revisions, changes, and new themes.

This will give you enough space and time to thoroughly test and debug before releasing these changes so everyone can see. You can even use your same URL, just with a different directory. In example, YourSite.com/TestEnv

Use the Ubiquity Firefox Add-On

Ubiquity is a cutting edge add-on for Firefox, developed by Mozilla Labs. Ubiquity allows you to search WordPress and PHP documentation in an instant using these two plugins: PHP Search and WP Codex Search.

Learn Your Functions

By learning all of your WordPress functions you’re able to quickly make major changes to your WP theme layout. This will easily give you a major bucket of time and flexibility as well. You should start with the more common ones and work your way up from there. Before anything, take a look at your WordPress codex for further information and more.

Don’t Mess With Your WordPress Files Till the End

You know the files I’m talking about…and if you don’t, well here they are: index.php, sidebar.php, footer.php These files should be one of the last things you touch after you’ve finished coding your WordPress theme in CSS and HTML. You should always adjust cross-browser compatibility, test, test, and test some more, and anything else static files may need from you.

Delving into these core theme files before-hand will only set you back and take up a lot of your useful time. Now, that’s not to say there aren’t those special circumstances. After-all, nothing has been set in stone yet.

Create Your Own Options Panel

If you’ve ever purchased and uploaded a premium WordPress theme then you’re more than likely familiar with a theme’s Option Panel. These options will allow the user (you) to easily and quickly make minor (and a few major) changes without having to dive into any code. You’ll definitely streamline your future developmental needs and also the ones of anyone who purchase your theme (if you plan on selling).

Visit the following link to learn how you can create your very own theme options page.

What tips to streamline your development process have we missed? Please share with everyone, and add your own below!