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.

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.

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!

First and foremost I’d like to start by thanking the readers and users that make GrindSmart Magazine a special place. As you’ve probably noticed by now we’ve been doing a few renovations the past 2 months or so, this is part of the Redesigned and Redefined movement of our entire structure. Our reader subscription grows to a new high everyday, and we’re planning on expanding in revolutionary ways within the next couple of months.

GrindSmart (as many of you know) has been around for just about 2 years now. We began by collecting the most recent and up-to-date technology news on the web, and later started collecting design resources, and now we’re strictly sticking to web development. Every other design blog out there covers, well just that, design, and quite frankly it’s beginning to bore. We’ve decided to shift out of the “mold” and produce developments articles that are more than just informative, they’re helpful, concise, straight to the point, and real.

One of the most notable changes around here is our design, we’ve been through a few revisions and we’re still in the process of finding bugs, fixing them, and redesigning aspects of our website for better usability. Earlier this year we moved from Square Space to WordPress and we’d have to say it’s the best move we’ve made because it’s allowed us to flourish and expand through the flexibility via WordPress. We also have been using a quite useful service for hosting all of our applications, a lot of our images, and scripts called ShareDen.

Previous Logo:

Our next move would have to be redefining our niche, providing more giveaways, and focusing more on the reader. If you have any other tips on our sites design, what we’re doing, and any suggestions on articles we’d love to hear it. We’re also offering a variety of monthly guest spots for article contributors on web development. We’re paying $30-$60 per article depending on the complexity and quality.

Once again, thank you for reading GrindSmart Magazine. We hope you continue to engage in our articles and remember to to subscribe to our feed for up-to-date development articles and resources!

-The GrindSmart.com Editorial Team

With a majority of users that come to your website reading only 80% of your content, it’s imperative that you make sure your content is as usable and visible as possible. What rules are you practicing to make sure that the content on your site contributes to a positive and remarkable user experience? The following tips will allow you to make your content more usable and beneficial to the user.

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

Key Material Should Attract Attention

Whatever you want emphasized should posses certain qualities that attract the user. For example, you can make quotes in italic, and vital content in bold. Make sure that if a user is scanning through your content, they’re able to retain as much information as possible without having to read ALL of the content.

Use Sub Headings

Because most people don’t actually read your content rather they scan, you should put sub headings to use. Readers will avidly scan through your content and find information with ease. Dividing larger sections with smaller ones will greatly increase the usability of your content. Mainly due to the users ability to read the headings and determine if the sub text is worth reading or not.

Choose Readable Fonts

What purpose does a font have on your site if it isn’t legible? If a user can read your content, then it is of no value to them. Readable content plays a large role in the quality of the user experience on your site. Make sure you select fonts that are easy on the eyes and mesh well with the overall theme of your website.

Traditional fonts such as Trebuchet MS and Tahoma are the usual choice for text, and Arial/Helvetica are one of the most used fonts for headlines. You can use any font you’d like of course.

Links, Links, and More Links

Hyper links are one of the most important elements that make-up the structure of your content. You should make note that links are best used to direct and further inform users of key and vital information. You should also make sure that you’re not abusing links and going on a link-spree.

Since links are of importance, you have to take the way you style them seriously. You can increase the usability of your links by creating a nice hover effect or changing the fonts weight and more.

Avoid Overwording and Overly Complex Content

When you write for the web, you should always keep in mind that not everyone is either a high-school or college graduate. You need to write for a much lower grade level; preferably the 8th grade. Your content should be concise, easy to read through, scan, and understand.

Overly complicated words will definitely decrease the usability of your website. Also, if you use too many words and don’t divide your content the correct way into sections, you risk the chance of loosing a large portion of your users.

What other tips do you have for writing usable content? And what works best for you and your users?