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.

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 different ways to improve your Google ranking, how SEO differs between mobile and desktop devices, what can you do to improve the load speed of your site, as well as why wire-framing is so important.

How to speed up your website load times

Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible. In order to understand why having a fast website is important, check out these statistics: the average smartphone user will leave a website if it does not load within 3 seconds; Google now considers page speed a major consideration for search engine rankings; 75% of internet users agreed that they would not return to a website if it did not load within 4 seconds.

15 Great Twitter Bootstrap Resources

Twitter Bootstrap is a great front-end framework that lets you quickly prototype new web projects. Here is a list of great resources that gives even more power to the Bootstrap framework.

Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site

Mashable has called 2013 “The Year of Responsive Web Design.” Yet, for all its accolades — and despite the backing of industry heavyweights — there are some who remain unconvinced that mobile responsive design is the way to go. These folks argue that your website should have a completely separate mobile presence. I think differently. I want you to believe in mobile responsive design. I want you to embrace it like the internet has embraced funny cats. I want to give to you three reasons why you should choose a mobile responsive website design over a separate mobile site.

Google Makes Its Own High-End Laptop, the Chromebook Pixel

Google today unveiled a laptop it designed and built itself, the Chromebook Pixel. Unlike prior Chromebooks, whose main dreaw their value, this one is built to compete with the top end of the market. The three biggest appeals of the Pixel will likely be its touchscreen and high density display, its elegant design, and the fact that it’s a web-based device.

Wireframing and Sketching for Web Designers: Tools, Utilities and Reasons

A website wireframe is a visual guide, or a skeletal framework that will help you define your future website’s characteristics. By wireframing you are basically defining the primary steps and the shape your website or product is going to have. One of the main purposes of wireframing is to set the main priorities and describe the functionality of your future creation.

Improving and Refining Your WordPress Theme Development Process

There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.

Magazine design principles applied to web design

Here I’ve covered some of my favorite lessons from magazine design, and how they can apply to web design. But the most important thing I hope you can take away from this article is that you can take design ideas and conventions from one form of media and apply it to others.

Helpful Code Paradigms for Frontend Web Developers

Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS. Not to mention there are at least 4 browsers you should test plus the possibility for mobile users. There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend.

Top tips for designing a business website

How important are design trends when it comes to websites?There are two sides to web design: functionality and impact.With functionality, it’s key that people know how to use your site. On a desktop site people are used to seeing navigation at the top, or on the left. Putting it somewhere else would be like putting the contents page of the book randomly in the middle. With these sorts of things it’s important to adhere to what people are used to seeing.

8 Strategies to Get Multiple First Page Rankings on Google

While some users may lament the more cluttered search pages, the “new normal” does offer more opportunities to achieve multiple first page rankings. Controlling multiple first page rankings allows marketers to exert greater control over their brand, reach more searchers, and present a stronger brand to searchers.

How do mobile and desktop SEO differ, and how can you improve rankings?

The proportion of search traffic from mobile devices grew ever larger during 2012, peaking at 46% on Christmas Day for some retailers. And Google probably isn’t alone in predicting that mobile search queries will soon surpass those made on desktop.

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

Every web designer knows that today it is almost impossible to create a website with just one program. Sometimes it can get a little confusing to remember which code goes with which language, furthermore sometimes you forget the shortcuts that make your life much easier. This is where cheat sheets come into handy. A cheat sheet is simply a printable reference or guide to a particular software package, language, framework, etc.

Here are 10 of my favorite cheat sheets.

HTML 5 Cheat Sheet

HTML5 Tags Cheat Sheet

HTML 5 Visual Cheat Sheet

HTML5 id/class name cheat sheet

HTML5 Canvas Cheat Sheet

HTML 5 Visual Cheat Sheet

CSS CHEAT SHEET

(X)HTML Elements and Attributes

HTML5 Browser compatibility

CSS3 Cheat Sheet

The post 10 Web Design Cheat Sheets You Can’t Live Without appeared first on Design Reviver - Web Design Blog.

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 great examples of Flat Web design, the 10 commandments of Modern web design, and introduction to creating sliders, as well as an interview with the guys behind the Pixel Perfect Precision Handbook.

Flat Design: 17 Examples Of Flat Web & App UI Designs

Early 2013 has seen a rise in some pretty interesting discussions on the use of ‘flat web design’. Flat design seems to be causing a slight stir amongst the design community right now, arguments for and against the flat design trend are often lively and heated. Flat Web Design? Firstly, flat design in the case of this article is referring to either app or UI web design – NOT housing or apartment decoration. Flat design rather simply means your web or app design contains minimal use of heavy gradients, bevels, drop shadows or any form of element that would provide considerable depth to the user interface.

10 Tools for Creating Infographics and Visualizations

asel.ly is another free web-based tool for creating infographics. You cannot create graphs using real data with this tool, but its really good for conceptual visualizations and storytelling. It has a beautiful user interface and the themes you can start with are gorgeous.

10 Commandments of Modern Web Design

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction. Albert Einstein I would argue that a huge part of that genius Einstein refers to can be found in clarity of purpose and principles.

7 Rules for Creating Effective Slides

The key to a great presentation design is to create visually stunning yet simple slides that your audience can quickly comprehend. Most people can’t effectively read and listen at the same time. The presentations that really stand out allow viewers to avoid reading lots of text by communicating information visually. The following presentation by Alex Rister takes a look 7 fundamental rules in creating slides: Introduction to Slide Design.

5 innovative examples of user interface design

In these days of intuitive touchscreens and intelligent apps, your audience is not going to put any work into using your product, app or operating system – they’ll expect it to be obvious. No one is going to read a lengthy, detailed instruction manual; instead, the user interface should guide your customer through to achieving their goals – doing all the hard work so the user doesn’t have to.

Tools and Tips on how to Optimize Images for the Web

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue.

10 PowerPoint Alternatives That Make Meetings Fun

This article presents 10 ways to make your meetings go by a little faster, everyone is tired of seeing the same boring PowerPoint template and it is time for something new.

50+ Clean, Simple and Minimalistic Website Design Examples

One of the fastest ways to set up minimalistic websites is to build it on top of WordPress and one of the many great simple templates available for this popular publishing platform. In this article, I have collected more than 50 Minimalistic website design examples you can use as inspiration.

MIHTool, the iOS web debugger

If you are a web developer, the strangely named MIHTool (MIH for “make it happen”) will make you happy. If you mostly work on mobile web applications, this will change your life. It’s the missing developer tool you wanted for so long, and Apple didn’t give you.

Sketch VS Fireworks

In response to many who have suggested in my blog Sketch VS Photoshop that Fireworks is a great alternative to Sketch, I decided to download it again after many years.

Pixel Perfection Precision handbook interview

Last week we had a chance to interview the guys from ustwo, to discuss their latest book “Pixel Perfect Precision Handbook”  You can download it here, And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

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

You might have created the best website ever, however if no one can find you online then chances are your site will never really become too popular. In order to make your website more search engine friendly there are a few tricks you need to remember when designing your content.

1. Update Pages regularly

Even if the content of your website doesn’t really change that often it might be a good idea to change things around once in a while. For instance if you have a blog you might want to add your latest posts somewhere on the site. The reason for this is that the more changes you make the more often search engines will crawl through your sites.

2. Watch out with too much Flash contents

So you are using Flash for navigation on your site, while this might look really cool search engine wise it can be really bad news since search engines have difficulties crawling through sites that use too much Flash.  The good thing is that there are different ways to to make Flash objects accessible and web-crawler-friendly.

3. Don’t use generic links

One area that search engines place a great emphasis on is links. Therefore it is vital that you make sure to word your links as best as possible. For instance a web crawler won’t really understand if you have several links saying “click here” instead you should be using something more specific to describe the content, something like “click here to learn more about …”

4. Use unique page titles

Similar to the tip above it is important to use unique page titles, in other words make sure each page on your web site has a unique title attribute. The problem is that if you always use the same title for every page on your website then the search engines will acknowledge this as if every site is about the same topic, and therefore ignore it.

5. Block Pages You Don’t Want Search Engines Index

Sometimes there are pages on a site that you want to see on the front page of Google. Whatever the content of such a page is make sure not to expose it to the web crawlers. One of the best ways to avoid something being crawled and indexed is through a robots.txt file.

6. Use Content That Search Engine Spiders Can Read

One reason why many websites struggle in the Google pond is because they forget that if your site contains little content then there is little for the search engine crawler to crawl through. If for example 99% of your site consists of images then don’t expect your site to rank very high. Make sure you make the life of a search engine as easy as possible.

7. Don’t forget about images

One thing that I often see people forget about is the  alt attribute of images, often these are left blank because people don’t understand just how important they are. Remember the alt attribute should be used to explain what an image is. Don’t forget that while search engine crawlers are getting smarter and smarter they still can tell that the image on your website resembles Aunt Edna.

Furthermore remember that sometimes images don’t load for some reason and therefore it is a great idea to use the alt attributes to help tell the users whats in the picture.

8. Use Unique Meta Data

This is a very important one, often designers create a template that they use for the whole website, however they forget to change the meta data and as a result they end up with several sites that all have the same meta data. In order to help search engines you should really make sure that each page has its own set of meta data.

9. Be smart about keywords

Keywords, keywords keywords….I cannot even begin to stress the importance of keywords. If you want your website to show up on google then you will really want to think long and hard about your keywords. Let’s say your website is about the best canon L lenses  for the Canon 60D well if your keyword is “Canon” then be ready to fight with about 1,590,000,000 websites, whereas if you use something like “best canon L lens for 60d” then there are only 2,320,000 results, while this might still seem like a big number it sure beats the first number.

10. Remember the importance of your headings

Remember that Headline tags (h1, h2, h3, etc.) are great places  to use your keywords. The biggest thing to remember is that search engines know that there is a reason behind your headline tags and therefore they will automatically add a greater importance to the words found in your headings.

The post 10 SEO Tips That Web Designers Should Remember appeared first on Design Reviver - Web Design Blog.

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 how you can use any font with CSS3, how you can have multiple backgrounds, why not all websites look the same in all browsers, as well as how you can add your website to the iOS home screen. 

How to use any font you like with CSS3

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, we will run through the basics of including custom fonts in your pages.

Build a basic responsive site with CSS

This article first appeared in issue 231 of .net magazine – the world’s best-selling magazine for web designers and developers. Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers seem to me to have misunderstood the problem it’s trying to solve. Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes.

Multiple Backgrounds with CSS3

Adding background image with CSS is nothing new, this feature has been there since its inception. But we were limited to only add one image in one declaration block. Now, CSS3 is raising the stakes by proiding you the option of adding multiple backgrounds.

Why some websites don’t work properly in your favorite browser

It never fails: No matter which browser you use, and how well you keep up with its updates, sooner or later you end up finding a website that doesn’t quite work the right way. Even more frustratingly, bugs and defects always seem to crop up more often on sites that tend to push the limits of what can be done with a browser, with activities like printing, interactivity, and complex animations frequent targets of malfunctions and misfirings.

15 Awesome Infinite Scrolling jQuery Plugins

In this post, we are sharing with you a jQuery scrolling plugin collection that can help you implement endless scrolling system on your website. Most of these infinite scrolling scripts are free, but I also added a premium product. If you have more infinite scrolling jQuery plugins we could add, please give us a link in a comment. We will also be happy to hear your opinion about this article and about infinite scrolling in general. Enjoy!

10 brilliant examples of responsive design in ecommerce

There is no longer a debate over whether online retailers need a mobile site, as consumer demand dictates that brands need to optimised for small screens. However there are still several different options facing brands that want to create a mobile optimised site. Responsive design is seen by many as being the future of web design, and we previously looked at 11 gorgeous examples of the technology and asked several experts whether site owners need to adopt it. But the examples we’ve seen suggest that responsive design is currently more popular among design agencies and artists, while major ecommerce retailers have been slow on the uptake. So to show how responsive design can be applied in retail, here are 10 examples of ecommerce sites built using responsive design.

The importance of proper site structure and organization

The structure and organization of your site is so important and it doesn’t get as much attention as things like copywriting and link building (don’t get me wrong, those are crucial, I just think we need to look at the structure too, we don’t want it feeling left out!)If you haven’t recently evaluated the structure of your site, now is a good time to do that.

10 CSS3 Pricing Tables For Professional Websites

CSS3 is the latest version of this amazing stylish language called Cascading Style Sheet. In this post you will find the perfect solution for placing pricing tables on your websites with style of CSS3. This post features the best 10 CSS3 Pricing Tables for professional websites. All the pricing tables are professional and created by the best designers of the world. Do share this post with your friends to help us spread the word.

Top Web Apps for Web Designers

Whether you are a freelance web designer, or have a position with a company, having some help never hurt. There are tons of apps on the web that can help web designers learn new techniques, design, and coding. Using these apps you will be able create a stunning web design without a problem.

Quick Tip: Give Your Website an iOS Home Screen Icon

With more mobile web users than ever, it’s important to keep your branding strong. Let’s go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens.

The post Weekly News Roundup – 11 January 2013 appeared first on Design Reviver.

A really interesting question was asked recently on Answers, discussing the importance and relevance of CSS validation. It would be interesting to discover how much stock developers actually do put in to it, or, is it more important to focus on the actual page being able to function? We would love to hear from you.

You can leave your thoughts, tips and insights in the comment section below, or you can leave your answer on the original question on Answers here: CSS validation, How Important Is It

This question was originally asked by Ben G.

Here is the best answer, as voted by our users, so far:

So, what do you think, how important is CSS validation?

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.

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we feature four powerful and new jQuery plugins that will add plenty of cool functionalties to your sites or applications.

Phono – jQuery Phone Plugin

Phono is a simple JQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.
Phono – jQuery Phone Plugin

Wijmo – jQuery UI Widgets

Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.
Wijmo – jQuery UI Widgets

SlideNote – A jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.
SlideNote – A jQuery Plugin For Sliding Notifications

IMGr – jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.
IMGr – jQuery Image Rounder

By Paul Andrew (Speckyboyand speckyboy@twitter).