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 CSS and HTML tutorials, vintage and retro design, great globe logos and much more.

Practical Tips From Top WordPress Pros

Recently I shared with you some advice from the WordPress community to beginners. But what about if starting out is already a dim and distant memory? What if you’re already so immersed in the world of WordPress that you dream of trac and bore your partner with talk of the latest thing you’ve achieved with custom post types?

Cool Globe Logo designs

Without further a due, we share to you 45 Cool Examples of Globe Logo Design that can help you sail to your vast imagination and maybe arrive at land of great ideas for your next project.

15 websites with vintage and retro design

Vintage and retro themes in web development are becoming extremely popular these days. However, this doesn’t suggest particularly complex elements in design. On the contrary a simple use of old black & white photos or some old fashioned music played in the background may do the trick. It will also make sense to play with a color palette and with its help add a retro feel to your design.

Awesome 3D Photoshop CS6 tutorials

Before the release of adobe Photoshop cs6, many designers have suffered from the 3d conception in the program, something that pushes adobe improve these functionalities in its latest version, they have made a handful of tweaks that will significantly improve your workflow and enhance your tool set. Theses new features include a way to generate bump map textures from flat artwork, smoother previewing of soft shadows and more. Fortunately, there are already a number of online tutorials that will help you to learn more about 3d features. Today, we will take you through some of the exciting Photoshop CS6 tutorials that illustrate how to use these brand new tools to create amazing 3D effects.

20 Free business HTML and CSS Templates

Business templates are commonly used for business/company related websites as they are quite decent, minimalistic and chic. The Free Business HTML/CSS Templates.

15 Great CSS Tutorials

15 of the best hand picked CSS tutorials for you to get your hands dirty.

AngelHack announces worldwide hackathon

AngelHack, the organiser of “largest hackathon startup competition”, has announced the project has “just got bigger”. The next AngelHack kicks off in a month’s time, with events on April 27 and 28, in both Los Angeles and London. Global events will continue until mid-June in destinations including Paris, Moscow, Sydney, Seoul, Guadalajara, Santiago and many other cities.

Getting started with Edge Animate

In this tutorial, we’ll be getting started with Adobe’s new animation tool, Adobe Edge Animate. Edge Animate harnesses the power of HTML5 animation, and allows the user to create dynamic, exciting web-based animations in a quick, easy and fun way, using a user-friendly timeline-based interface as opposed to blocks of daunting code.

5 simple tips to SEO optimize WordPress

WordPress themes are a terrific solution for clients with smaller budgets. They give these clients the ability to make ongoing changes to their site using the #1 CMS in the world. They give you, the developer, the ability to deliver a website that looks great and has a quality user experience at a budget price point. Everybody wins. But what if you could deliver even more value to these clients? You can by doing some simple SEO optimization of the theme you customize and develop for your client. Here are 5 simple steps you can take to optimize any WordPress theme template.

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

This week and next week we will share with you how to optimize your e-commerce web design in order to make the shopping process as seamless and easy for your customers as possible. Today we will present 10 tips on how to create a better e-commerce website, next week we will present the remaining 10 suggestions.

The post How to optimize your e-commerce web design – Part 1 appeared first on Design Reviver - Web Design Blog.

The guys at WebHostingBuzz have just released their latest infographic and it focuses on the state of social sharing in 2013. For web designers it is always important to know what social platforms are available as well as their popularity. The infographic states that 90% of companies with 100 or more employees use social media in their marketing mix.

When designing a website you should take the most popular social platforms into consideration, not only are they very important for advertising your website, but they can also be on vital importance for word-of-mouth advertising, it doesn’t take much for a website to instantly go viral on Twitter. As you can see below currently the eight most popular social platforms are:

- Facebook
- Twitter
- Pinterest
- LinkedIn
- Google+
- YouTube
- Tumblr
- Instagram

Click here to view full size image.

The post Infographic: The State of Social Sharing 2013 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 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.

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.

Throughout the past two years web designers have become more and more aware of the importance of responsive web design, in other words making their sites viewable on different devices, as well as at different resolutions, in other words whether you are on an iPad Mini or a MacBook Pro with Retina Display the site must work just as well. Last week was the first release of the public preview for Adobe’s latest Edge tool, Edge Reflow.

For those unfamiliar with the newest addition to the Adobe family, Edge Reflow is a tool specifically built around helping designers create responsive designs.

In our post about Web Design trends you can’t ignore in 2013, responsive design was the number ONE design trend you really can’t ignore.

That was the whole purpose behind Adobe creating Edge Reflow, through the layout of the program, designers are able to create a mockup for various layouts, whether they want to optimize their design for mobile devices or desktop computers the possibilities are endless.

You need to understand however that Edge Reflow isn’t supposed to be the end-to-end design solution. It is important to know that the program will not work as a one step solution, instead it is for those who wish to see  what the design will look like at various sizes and on different devices.

Features of Edge Reflow:

• Flexible design approach

• Edge Web Font integration

• Visual media-query breakpoints

• Multiple background layers

• Multiple drop shadows

• Border styles and customization

• Fluid customizable grid system

• Previewing your design

What makes Edge Reflow great is that users can preview what their design will look like in a browser, furthermore the CSS is extractable for future developments, you can then copy that code into Dreamweaver and continue working on it from there.

As Adobe product manager, Jacob Surber, says the aim behind Reflow is:

“to help designers design within the constraints of the web to communicate their intent, but not to tell developers how to build the site.” He then adds that that what Reflow generates “is not production code.” Reflow is a design tool, and it bridges the gap between raster image editors like Photoshop and bare code. It lets you design your site on a flexible grid, utilizing break points with CSS media queries.

If you want to try Edge Reflow you need to be a Creative Cloud subscriber. While the Dreamweaver update does require a paid Creative Cloud subscription you can try Edge Reflow, Animate and Code for free.

The post Let’s take a look at Adobe Edge Reflow 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.