Archive for the ‘CSS’ Category:
Touchscreens and Hover states
With the huge popularity of mobile touch devices and the current major drive to make everything web related compatible with these devices, today’s Design Reviver Answers discussion is certainly relevant with current development trends. The question that was asked was “Will Touchscreen devices make hover states a thing of the past?”
You can leave your thoughts and point-of-view below, or you can leave your answer on the original question on Answers here: Will Touchscreen devices make hover states a thing of the past?
Will Touchscreen devices make hover states a thing of the past?
This question was originally asked by Mpstud.
The best answer comes from Darrell Estabrook :
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.
Amazing Pure CSS3 Experiments
The new and revitalized CSS3 properties have not only opened up many, many marvelous development solutions for web designers, it has also allowed talented developers to push the boat out further and showcase there CSS skills by building and styling in ways that were never ever thought possible previously.
In today’s news round-up we take a look at some of these amazing experimental pure CSS3 creations…
Please note, you will need either the latest version of Safari or the Chrome browser to fully experience these CSS3 experiments.
iOS Icons Made in Pure CSS
iPhone CSS3
Pure CSS Twitter Fail Whale
Pure CSS Animated 3D Super Mario Icon
Pure CSS Animated 3D Super Mario Icon
By Paul Andrew (Speckyboyand speckyboy@twitter).
Three Kick-Ass Web Developer Tutorials
Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.
A jQuery, CSS3 & HTML5 Hover-Based Interface
In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
How to easily create charts using jQuery and HTML5
For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5
By Paul Andrew (Speckyboyand speckyboy@twitter).
How and Why Would Anyone Validate Their Code
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.
The Advantages of Using CSS Sprites Along With a Few Tips
There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.
To better understand this concept, let us look at the following example image:
As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.
Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.
Who Uses CSS Sprites?
Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.
Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.
Cut Back On HTTP Requests
One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.
Saves Time
By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.
Flexibility
By utilizing CSS sprites, you are giving yourself more flexibility over your website’s design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.
Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.
Tips
Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS “spriting” experience.
Plenty of Space
While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.
Left to Right, Right to Left
No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.
To better understand this concept, let us have a look at the sprite below:
Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:
Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.
Repeating Images Should Consume Less Pixels
Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.
To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.
One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.
However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.
Round-Up of Fresh jQuery Tutorials
There really is no limit to what can be achieved with jQuery. And when it is in the right hands those limits are challenged all the time, constantly pushing back its seemingly endless boundaries by developing fresh and creative techniques. In this design news round-up we have collected our favorite recent jQuery tutorials.
Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL
Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL →
jQuery Quickie: Slot Machine Style Navigation
jQuery Quickie: Slot Machine Style Navigation →
How To Create A Great Contact Form
How To Create A Great Contact Form →
Music Portfolio Template with HTML5 and jQuery
Music Portfolio Template with HTML5 and jQuery →
A Simple Movie Search App w/ jQuery UI
A Simple Movie Search App w/ jQuery UI →
By Paul Andrew (Speckyboyand speckyboy@twitter).
Aloha Editor, CSS3 Pie, FontFonter – Impressive Fresh Tools
It is always impressive how many useful and free web apps and tools there are for web designers, and today’s fresh selection is just that – very impressive. The Aloha Editor is especially impressive, with its unique live editing features. And there is also CSS3 Pie which will make all CSS3 properties viewable in all versions of IE (it really does!). If you have the time we recommend you take a look at these tools.
Aloha Editor – The HTML5 Editor
Aloha Editor allows you to edit content you would never imagine you can. It is the world's first full featured Editor that allows you to edit dynamic content live and in place.
Aloha Editor – The HTML5 Editor
1dl.us – Your all-in-one tool site
1dl.us is a useful all-in-one resource, that feature URL shortening, Upload Pics, Pastebin and a Password utility.
1dl.us – Your all-in-one tool site
CSS3 PIE: CSS3 decorations for IE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
CSS3 PIE: CSS3 decorations for IE
FontFonter
FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
FontFonter
By Paul Andrew (Speckyboyand speckyboy@twitter).
10 Incredible Websites of Big Content Providers
There are many websites of the same genres, but we all choose one out of them all. Whether be it the design, the layout, or the service that hooked us onto it, we all know they all offer similar content. So if you are designing and developing a site in the same genre as many others, how should you design it and what key elements should you include?
Additionally, what really sets these content providers apart from each other? In order to demonstrate what really sets content providers apart, we dive right into news content providers and technology content providers such as ABC, CNN, BBC, Engadget, and others.
Design is a major aspect of running a successful service. Having a disorganized design can destroy your user base, thus, it is critical to assure your design decisions are for the better and what users can benefit from. When you first setup a service of this magnitude, you want to look at what makes up your competitors design and why it keeps users coming back. This gives you a general idea of how users who frequent such sites like their content organized and displayed, which is a great start.
CNN
Look at CNN as an example of design organization. Its layout really sets itself apart from the others as it really emphasizes on two very important news pieces at first site. As you get lower into the page, the news titles begin to get smaller from very important to least important. This is definitely a key element in organization and to keeping your visitors frequenting your site.
The site’s header is also very clean and organized, allowing you to easily identify what topic you are currently on, and what other major topics they cover. If these major topics were not displayed in the header or navigation bit and were rather hidden in a small sidebar, users will be less inclined to locate and frequent them.
BBC
BBC’s design is quite different compared to the others. It does have the general navigation in the header and a large news headline, however, what really sets it apart from the others is its category grouping and drag and drop functionality.
Its categories are separately grouped allowing you to easily find and read what you came for straight away. With its drag, drop, and group deleting functionalities, you can easily organize the page with your most important news categories on top, or to be able to remove the sections you really do not care for like the business section or sports section. For users, these features definitely allow them to feel like they designed the website, which increases the possibility of your site being their homepage.
MSNBC
As soon as you visit msnbc, your eyes immediately catch onto the top headlines instead of catching onto the logo and header navigation, this is definitely what users want to see. Below the header are the usual news headlines and other news articles that are generic between many other content providers of the same genre.
Therefore, the only element to its design that sets the site apart from others is the unique top headlines bar that comes before anything else. As a designer, this proves that users will favor different content providers over others for selective design elements and organization methods.
ABC
ABC is another major content provider aimed towards the general audience. Its design is very lightweight to suit everyone alike. The unique thing that really separates this site apart from the others is that its layout is built by its content, which is a definite plus for those who do not want to see all sorts of design elements instead of content.
Yahoo!
Yahoo is definitely top on this list as a content provider. Not only does it offer a set of services, it also serves as a news portal. Its unique design is really, what makes it feel how a true homepage should be. It is feature-filled with color customization, drag and drop containers, and a completely customizable sidebar where you can add all your favorite sites and gadgets.
Despite all these additional goodies, it definitely catches your eye on the latest news from political, to tech, to personal, and to a whole set of genres by its intriguing news headline slider. As a designer, many of its site elements are perfectly placed in great locations, and it definitely offers what users want in a design and layout.
Engadget
As a tech blog, Engadget really nails it with its design and layout. It separates itself from others by keeping its design simple and content based. Right below the header, it places a banner of its most interesting review, and below that comes its navigation bit.
This is great for users, as they always want to see what made it to the tech headlines immediately. Other than that main highlight, its content is displayed on the page in importance order, starting with its top stories than its latest posts. A key feature with its latest posts bit is the ability to easily flip through between latest reviews, feature posts, and all news. It is definitely a great way for users to directly browse through for what they came for, making it a must key element for your designs under this genre.
Gizmodo
Gizmodo, another tech blog, has a simple yet unique design and layout to set itself apart from others. Before the main header, several articles, reviews, or interviews are displayed, it is a great way to view what is happening straight away without rummaging through the rest of the site. The simple design and the items before the header is all what Gizmodo has to keep its design and layout set apart from others, it is simple, but it goes along way.
TechCrunch
Techcrunch’s design is very well organized and well laid out. Its navigation is uniquely set above all content with a sub-navigation below the logo. What really makes Techcrunch’s design stand out is its simple layout. It holds a great lightweight slider for its popular news pieces, and then its latest postings.
Users always love to share great reads, thus, Techcrunch really pointed out its social networking tools by providing them on the homepage for each posting as well as within each posting. This really gets users connected with their friends and favorite readings having them frequent often, which makes it another key element to your design.
Neowin
Neowin’s design is very sleek and intuitive compared to other tech blogs. Its navigation is well compact and blends in well, keeping the focus on the content. Its postings are really compacted on the homepage and easy to browse through what are most important to you. Another great element to the website’s features is the Social Activity box in the sidebar, keeping their users connected with Facebook while reading great postings.
CNET
CNET’s design is unique and intuitive, and sets itself apart the most from others by far. The header is very simple and contains all you need, a search bar and the navigation. Its content is well organized and displayed. However, what really makes it stand out is the CNET user bar that sticks to the bottom of your browser wherever you navigate on the CNET website.
It contains a list of your saved reviews and products. The CNET user bar also contains a TechTracker, which sends out reminders to you about outdated software and what needs updating, a definite great tool.
To Conclude
As you know, content is also a major aspect to why users choose a content provider over others. However, design and features are also main elements to the experience.
It is always a great idea to look at your major competitors and see what they have done to keep their users coming back, which gives you a general idea of what your users would be looking for too. Taking the best of what users want and putting it together can create the perfect design and user experience your viewers are looking for.
Inline Style
One of the great things about our Design Reviver Answers is that it gives the novice or amateur web designer the opportunity to ask a basic question and have it answered by one of the many seasoned pro users that we have. It truly is a great site for learning and understanding, for designers of every level.
This weeks highlighted question, from an amateur designer, is: “What is Inline Style?”
You can leave your comment below, or you can leave an even better your answer on the original question on Answers: What is Inline Style?
What is Inline Style?
This question was originally asked by an unregistered user, and you will find the best answer below:
The Best Answer came from an unregistered user:
The Next Answer came from a Andrew Miller:
Unanswered Answers
That is now three weeks without ab unanswered questions!!!
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.<
Difference Between Margin and Position:absolute
As web designers we may at times take for granted the knowledge and experience we have built up over the years, and its often easy to forget about, especially when you are just starting out, that there are many basic questions, that may not crop up very often, but still need to be asked and they certainly need to be answered.
And such a question was recently asked on Answers, and it was “Any difference between margin and position:absolute?”
You can leave your answers and thoughts below in the comment section, or you can leave your answer/opinion on the original question here, on Answers: Any difference between margin and position:absolute?.
Any difference between margin and position:absolute?
This question was originally asked by Khaoslive, and you will find the best answer below:
Best Answer from Neil Monroe:
Unanswered Answers
There are no unanswered questions!!! Yipee!!!
Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.