The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at CSS3 and HTML5 tutorials, what journalists need to know about web design, jQuery mobile for beginners, as well as great examples of typeface combinations in web design.

30 Really Useful HTML5 Tutorials

Almost everybody is talking about latest enhancement in web industry. Yes, it’s HTML5 and CSS3. Really these languages expanded the possibilities of web design. There are lots of web designer s and developers who have started using HTML5 into their designs. Here we’ve rounded up 30 really useful HTML5 tutorials that will definitely help.

Vexing Viewports · An A List Apart Article

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create.

What journalists need to know about Web design

Fifty milliseconds. That’s how quickly visitors can form strong, long-lasting impressions about your news or information website. But they aren’t sizing up the quality of your content or the sophistication of your code. They’re making nearly instantaneous, mostly subconscious judgments about how your work has been designed.

50 Helpful Typography Tools And Resources

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups.

25 Web development resources to help you create better websites

As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier

Top 10 Free Online Tools for Creative Minds

In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to tweak theme settings using a WYSIWYG interface and customize the theme so it includes the colors, fonts, text — and pretty much anything else — they want.

50+ Examples Of Drawings and Illustrations in Web Design

For a quite some time, web designers have used hand drawn illustrations and typography to give websites a non-digital look and feel and a more human touch. Right now, however, there is a strong web design trend coming with focus on keeping interface design minimalistic and flat.

A Complete Guide of jQuery Mobile for Beginners

There’s no doubt about it. Wherever developers look and whoever they talk to, mobile is at the top of the list. Talk to a C-level executive, and the conversation turns to mobile, and the question “How do I get me some of that?” comes up. Talk to other developers, and they tell you they’re targeting mobile devices. Mobile has become a big deal as smartphones have taken hold in the consumer marketplace.

10 Superb CSS3 Tutorials for Awesome Design

Many designers all over the world believe that CSS3 is a technique which has unbelievable potential which will in the future be used to create wonderful designed websites. At present, it is not being used variedly all over the world due to a number of limitations – obsolete browsers being one of them. In this post we’ve collected 10 Superb CSS3 Tutorials for Awesome Design, this can be proficiently functioned using markup, HTML, and some improved properties of CSS3.

40 Best Typeface Combinations in Web Design

When it comes to prints or Web Design, typography is one of the most important part. So selectng the right type of typography for your web design is one of the most crucial part. Keeping the small textured detail in mind while designing a website can sometimes be enough to get amazing results.

Providing responsive images with Drupal

In this tutorial, we’ll be solving this problem four times, thanks to the latest version of the Drupal CMS, 7, and its vast, user contributed module library. We’ll be looking at the adaptive image module, the adaptive image styles module, the client-side adaptive image module and, finally, the responsive images and styles module. These represent great solutions to optimising your Drupal website for bandwidth starved mobile devices; all modules used employ the techniques listed above.

The post Weekly News Roundup – 15 March 2013 appeared first on Design Reviver - Web Design Blog.

Surfing the net from a dedicated gaming console is not something new, in fact the ability to connect your gaming device to the internet was first introduced back in 1997 with the Game.com which allowed user to connect a dial-up modem and then check their email and browse the internet. However still to this day many designers ignore or pay very little attention to game console browsers when designing a new site. However there are some things that you need to remember when you are designing for a gaming console, added here are some of the most important things to remember, feel free to let us know if you think we forgot something.

Perhaps the biggest reason why so little importance has been given to the gaming consoles is that even though many households own either a Wii U, Wii, Xbox or Playstation, there is still a relatively small number that uses these devices to surf the web. The biggest problem is that these devices were not built for internet browsing and therefore they simply feel clunky when used to navigate the web.

According to StatCounter, the Sony PS3 accounts for just 0.1% of all web activity. Wii and Xbox browsers don’t even appear in the chart, although that’s possibly because they’re intermingled with Opera and IE9 statistics.

What consoles should be tested?

So the first thing you should decide when making your website more console friendly is what consoles will you test your site on, of course we know that you will not be able to test your site on every gaming device on the market, however it is recommended that you test on at least two major platforms so you can create as user friendly a website as possible.

1. Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
2. Handheld consoles such as Sony’s PSP, PS Vita and Nintendo’s DS and 3DS.

Different Consoles, different Challenges

Each different console brings with it different challenges, the biggest challenge is that even though the resolution is often higher than normal screens gamers sit much further away from their consoles, furthermore since they are not using a mouse to control the browser their clicks might not be as precise, another problem is that many game console browsers don’t support flash or CSS features.

What can designers do about it?

As more and more users will visit your website from a gaming console you can use different progressive enhancements that make it possible for people to access your site’s content even on a device that doesn’t support certain features. Another thing you can do is make sure your website loads as fast as possible. Even though some users will visit your website from a TV capable of showing HD quality you need to remember that not everyone has a Smart TV and therefore you should make sure your site also looks good on older screens.

console.maban.co.uk is really a great resource for information on how browsers function on different gaming systems, UK developer Anna Debenham created the site that provides descriptions, controller details, screen resolutions, user agents, JavaScript support, Flash versions, HTML5 test scores and a wealth of other information.

The post Things to remember when designing websites for gaming consoles appeared first on Design Reviver - Web Design Blog.

It used to be that the more information you could cram onto your main site the better, however today all of that has changed, today websites need to be as simple and sleep looking as possible. However often designers are wondering just how to simplify their design, therefore here is a post with five ways to keep your web design simple.

The post 5 ways to keep your web design simple appeared first on Design Reviver - Web Design Blog.

Those involved in the web design process knows that this is one of the most important elements for the success of a website. It is not secret that designing a good website takes time and dedication. While most designers handle the task well, there are still a lot of designers making simple mistakes that can easily be avoided. Here is a collection of the 10 biggest mistakes that should be avoided when designing a website.

Fixed Font Size

Personally if I run across a website where I can’t change the font size I will most likely leave the page never to return.  Always allow users to resize the fonts on your pages based on their own preferences. Some people just don’t have 20/20 vision and would like your text to be a little bigger, now if you are forcing them to squint just to read your text then you are doing something wrong!

Confusing the visitor with many versions

In the past web designers made several different versions of their websites, Flash or HTML, Fast Bandwidth or Slow Bandwidth. Today there is nothing more annoying that trying to enter a website only to be greeted with a plethora of different versions. Your website should work flawless despite the speed of the visitors connection. This also goes for size with responsive design today there should be no reason to ask your visitors which screen resolution they want to experience your website in.

Spelling Mistakes 

While this should seem like a no brainer, not only in web design but in general, you would be surprised to see how many website have spelling errors, however with spellcheck there is no excuse for not spelling something correctly. It really does improve a website if there are no spelling mistakes. Also make sure your headings don’t have spelling mistakes.

Fancy fonts that are unreadable

So you found the perfect font that will look amazing on your website, great but can your visitors read it? Remember the main aim of your website is to deliver a message. If no one can read the font then the message is bound to get lost in translation.

Playing Music

It used to be that many web designers would integrate music into their websites. Honestly there is nothing worse than having to go through all your open tabs to find the one spewing out some hideous music. If your website requires an audio file to get the message across, then make sure it is user controlled allow the visitor to push the play button when they are ready to listen to your audio.

Using Harsh Colors

Back when the internet was first gaining in popularity it used to be that web designers would use a lot of flashy colors to get the visitors attention. However not only will these colors look different on different screens, but the harsh colors are not good on the eyes, making your site a chore to view.

Unreadable CAPTCHA

Yes I know some sites simply require CAPTCHA filters as a way to reduce the spam comments that make it through, or in order to prevent bots from registering on a site. However honestly there is nothing worse than trying to decipher  an impossible CAPTCHA.

Links pointing nowhere

There is Nothing and I repeat Nothing worse thank clicking on a link only to be met with a “page not found”. If you are going to link to something then please make sure that the link actually works. Sometimes links become dead without you noticing, therefore it might be a good idea to once in a while go over them and make sure they are still working.

Hard-to-Find New Content

Unless the website you designed is just filled with static information, chances are you will be updating the site on a regular basis. One big mistake web designers make is that they hide the new content from the visitor, but instead of sending them on a scavenger hunt for the news you are actually guiding them closer and closer to the back button.

Unnecessary  registration

Let me say this ONE more time, there is nothing worse than wanting to read something only to be met with a “please register” page, unless this is absolutely necessary then please don’t ask visitors to register. And if you do ask them to register don’t bombard them with useless spammy messages.

No cross browser testing

Remember not all browsers are created equal, this also means that not all websites will look the same on all browser. This is why it is very important that you test your website on several different browsers before publishing your website. I used to work for a company that not only checked their website compatibility with the different browsers but with different versions of the same browser going all the way back to those being used in 1999 just to be safe.

The post 11 Mistakes web designers should avoid appeared first on Design Reviver.

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

Read the rest of this entry »

You can be the best web designer in the industry, but if you do not know how to properly lay things out and create a great interface for mobile devices, you will fail in such a task. With that said, designing for mobile devices is quite different from designing for mainstream devices such as your PC as screen sizes and resolutions play a big part in how much space you can utilize, and how it performs.

Therefore, we cover eight useful interface design techniques for mobile devices that will help you get started on your quest for designing for mobile platforms.

Layout, Layout, Layout

The layout of the design is what sums it up for accessibility, usability, and overall readability for users on mobile devices. First and foremost, the design needs to be flexible across the mobile devices as all screen sizes and resolutions vary greatly between each and every mobile device.

What that means is, the content needs to scale in size as the screen size and resolution increases or decreases depending upon each device. The layout needs to be touch and key capable for users with touch screens, and for users without them. To go into more depth, let us dive into each of these aspects individually.

Order and Size

These are two major keys to a good user interface for mobile devices. When we mention order, this is referring to the order or sequence in which each element within design is laid out. For example, the order of buttons, text boxes, links, etc. This is actually very important for many mobile platforms for the way they react with your design. Therefore, assure the order of the elements within the design or layout are ordered in the way intended for use, and skip out on the fancy ordering techniques you may have for web design on mainstream platforms.

The size of content is also a big deal for many mobile platforms. Make sure the links and buttons are of fair size for those who have touch screen devices as each person’s finger varies in size, a good-sized button will help make it easier for all of your users to navigate about. You need to remember that the small link sizes or button sizes you make for normal website designs for mice and keyboards is a lot different than actually using your finger or a keypad to navigate around, so assure to cope for the differences.

Hierarchy of Importance

On a mobile device, screen space is a limited resource and thus you need to use it wisely. With that said, you need to eliminate clutter as much as possible, and one way to do this is to set your content in hierarchy format. Set content apart by playing around with the font size, weight, color, and the likes. You want the content to speak for itself rather than describe it before it runs. By doing so, you are eliminating unneeded elements and clutter from the layout and or design and increasing on needed space and using the space for quality content.

Lightweight

You need to remember that when users are visiting your website from a mobile device, they are visiting the website to view the content, and not the fancy layout you may have put together for non-mobile devices. Therefore, you need to eliminate all the unneeded fancies and stick to a lightweight layout that clearly presents content in an organized fashion.To put it into perspective, imagine yourself in a hurry trying to load a website and run to a meeting.

As the website is loading all sorts of fancies need to load, you need to scroll through a long header, and the likes. When you are in a hurry to obtain information before dashing to a meeting, you do not care for these fancies, you just want the information you were looking for. Similarly, users who visit websites on mobile devices are also after the content, and not the fancies you may surround it by.

Important Content

Your website can consist of a whole genre of goodies; however, before bringing everything to the mobile platform via the web, you need to eliminate some of this content, to make the website load quicker. Therefore, only port over essentials that make up your website and what your users are mainly visiting your website for.

Offer a Simple Navigation

Many mobile devices and platforms do not offer a browser with too many navigational features such as a back button. Therefore it is a good idea to offer these essentials in a simplistic form within your website’s mobile version for easier navigation, but do not over do it as it can slow down the loading time significantly, and effect vital screen space.

Do Not Use Tables

Do not use tables for your mobile website designs as the main structure for your design. They often do not look or work very well with many mobile platforms. Therefore, the best option to getting your website’s mobile version working and looking well across many mobile platforms is to utilize the basics of CSS to get the design styled.

Platform Detections

One great way to making the most out of your website’s mobile version is to detect different platforms and offer different versions of the website for them. For example, the iPhone platform is very flexible in terms of design capabilities that you can provide versus other platforms.

Therefore, if you want to make the most out of different platforms for your users, detecting their platforms and providing different content and capabilities for them is a great idea. Additionally, this also helps make your fallback mobile website version a lot simpler with less content to assure it can work on older mobile devices or platforms as well.

Overall, you need to understand the mobile devices limitations before being able to create and develop around them. This helps greatly to better understand the mobile platform and how your website’s mobile version may appear across these multiple platforms. You can also test your website’s mobile version or versions using simulators and or emulators sometimes provided by the platform developers.

For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.

BonBon Buttons – Sweet CSS3 buttons

These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons

iPad Actions for Photoshop

These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet

By Paul Andrew (Speckyboyand speckyboy@twitter).

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.

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

iOS Icons Made in Pure CSS

iPhone CSS3

iPhone CSS3

Pure CSS Twitter Fail Whale

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).