2013 is almost upon us, and that means you better prepare for the year ahead and the web design trends that will undoubtedly have a major impact on your website in 2013. Unless you are prepared then before you know there will be a new trend in the market. While some trends from 2012 might retain there is no doubt that 2013 will bring a lot of new ideas and trends. So without further ado here are our predictions for high-impact web design trends in 2013.

Responsive Web Design

It used to be that you would design two versions of the same website, one for desktops and one for mobile devices, however as tablets and phones become more and more popular and more and more varying in size responsive web design will be the way forward. Pretty much responsive web design will eliminate the need to create separate websites for different devices because of its ability to respond to the size of the device being used.

Scrolling Everywhere!

In 2013 Vertical or Horizontal scrolling will surely become a trend, whether it be vertical or horizontal, there should be no reason why you would ignore this trend. Vertical scrolling means that as you scroll down the page the menus and other important elements remain locked in their position. Bagigia is a great example of how parallax and vertical scrolling can be implemented in order to create a stunning website.

Out goes Flash in comes HTML5 and CSS3

It used to be that if you wanted to add animation to a website you would have to use Adobe Flash, however in 2012 Flash was dethroned and this is no doubt a trend that will continue into 2013. With the emergence of HTML5 and CSS3, Flash will have a harder time. It is expected that more and more websites will replace Flash with HTML5 and CSS3. Another reason is that HTML 5 and CSS3 simply work better across platforms and they don’t require any special plug-ins or software.

Full Page Image Backgrounds

It used to be that backgrounds were exactly that, just a background, they were to be ignored and remain unnoticed, however 2013 will change this more and more designers are starting to use high quality photographs to get the attention of the visitor and leave a long lasting impression. Designers are starting to use backgrounds that become an integral part of the final website.

Designed Typography

It used to be that a picture said more than 1,000 words well in 2013 the words are coming back! More and more websites are using fonts in a fun and creative manner. Typography is becoming an important part of any web design project and the use of custom fonts is gaining in popularity. Expect to see bigger fonts in 2013, not only can it look beautiful if done correct it can also help pull the attention towards the main element of the website.

Skeuomorphism. 

You might remember that Steve Jobs famously asked designers to make sure parts of the iOS Software looked like real life objects, the Calendar and Notes app all look like their real life siblings, perhaps this is also why Apple apps feel more natural than the outdated software that other companies are creating. Expect that 2013 will be no different, web designers will continue to use designs from our everyday life when making our online experience more realistic.

Huge Buttons

As more and more users are surfing the web from their tablets and phones, web designers will have to adapt to their needs and 2013 will be no different so expect to see buttons getting bigger. There is nothing worse than tapping a button frantically only to realize that your fingers will never hit the button as expected because it is just too small. Bigger buttons will make like much easier if you are on your smartphone, however a downside is that as the buttons get bigger so does the download time, so it will be interesting to see how designers deal with this problem.

Crowd Sourcing

Always a controversial topic, crowdsourcing was on the rise last year and 2013 is predicted to be even better. The most popular areas seem to be WordPress tweaks and logo design.

Minimalism – Simpler Is Better

It used to be that websites were stuffed with everything the designer could possibly think about, pictures, animations, long blocks of text, you name it and it was most likely on the site. However in the past few years there has been a trend towards getting rid of the unnecessary and instead create a site that is as minimalistic as possible. A simple and clean design is often much more effective when getting a message across, and 2013 will see a boom in this perspective, we expect that designers will use simple one color designs with white being one of the most popular trends at the moment. Apple.com is a great example of keeping it simple while still getting your message across.

Videos on Landing Pages

Time is money, and with the clock ticking away people just don’t have time to read large chunks of text. If you have a large paragraph of text explaining what it is your site does then you have more than likely already lost customers. In today’s world you only have seconds to capture your visitor’s attention. In 2013 we expect to see more and more websites using landing page videos to draw the attention of the user. If you don’t have the resources to make a high production video don’t worry more and more providers, such as Shutterstock.com are offering stock footage for fair prices.

The post Web Design trends you can’t ignore in 2013 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 »

There is no topic more currently relevant than designing a web site that is compatible with the iPhone (or, any other mobile device). With the popularity of smart-phones it is now a must for ALL web sites to be ‘mobile-friendly’. This was a topic that was recently brought up on Answers, discussing the best solution for supporting the iPhone. So, what do you think? Do you have a simple solution, tip or answer?

You can leave your thoughts, tips or solutions in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Best Solution for Supporting iPhones?

This question was originally asked by Pablo G.

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

From Andrew Miller:

So, what are your thoughts, tips or solutions for supporting the iPhone?

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.

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.

There was an interesting question posted in the last few week on Answers, discussing a web design topic which is very popular and certainly relevant within the design community. The question was “What Do You Think is the Future of Mobile Development?”. Questions like these deserve to be opened up to a wider readership, so, what do you think?

You can leave your comment below, or you can leave an even better your answer on the original question on Answers: What Do You Think is the Future of Mobile Development?

What Do You Think is the Future of Mobile Development?

This question was originally asked by a Themans, and you will find the best answer below:

The Best Answer came from an Andrew Miller:

The Next Answer came from a Steve Workman:

Unanswered Answers

That is now four weeks without any 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.

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability.

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?

Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

No Ad Clutter

Advertisement clutter is a major issue for mobile platforms, the user ends up viewing more of the advertisements than content, if the layout has not been destroyed already. There is an easy fix to hide this clutter without creating a mobile specific version of your website. You can either use the css’ handheld stylesheet type or simply detect resolution size.

Either one you use, using a simple display:none on the obtrusive advertisements will eliminate them from view and clear things up. You should always remember that most handheld mobile devices have limited real estate, meaning the screen size can only fit a few things, and those few things should be the content the user visits your site for.

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.

If a user is accessing your website from a mobile phone and is not connected to a land based network connection, bandwidth will definitely be a limitation, which means the user will select through the sites he or she wants to visit rather than visit the sites they would on a desktop.

What this means is that you need to make sure your website utilizes a small amount of bandwidth during mobile browsing, which means images should be limited, and text content should be focused. What if your site is based on imagery content?

If your website is mainly based on imagery, it is in your best interest to create a separate mobile website, one that is optimized for that platform which can size down the imagery and highly compress them. An alternate way is to create mobile applications for applicable mobile devices that allow third party applications, as this could be a helpful tool for your users.

Cross Platform Friendly Links and Effects

As new web tools and effects continue to expand, it is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.

Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.

Keep Your Pages Short and Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages short and compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.

Thorough Navigation

As you know, typing on most mobile devices is a real a pain as the keypad or virtual qwerty keyboard is not going to be easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly. If you offer a genre of content, you need to assure users can get to them via browsing and not through using a search engine. If you cannot get to certain parts of your website without searching, chances are, they will not either.

Large and Clear Content

Today, many new mobile devices are touch screen, which means users will be using their fingers to navigate about their device and your website. If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

To easily prevent this, try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.

Short and Sensible Links

This is another typing related issue; when users have to type in a long URL to get to your site, chances are, they will not. As mentioned earlier, using a keypad or virtual qwerty keyboard is not ideal for typing long text blocks, so make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.

Designing for smaller screen resolutions can be a daunting task, especially if you’re not sure which fonts will mesh well with the mobile resolutions you’re designing for. In example, dark bold fonts that are prone to look really well on larger computer monitors will more than likely become blurred and distorted on smaller screens.

Choosing the wrong font could be a disaster, and selecting the right font for mobile web pages may not work well with your current project. It’s sometimes shoot or miss, however, by reading up on resources on mobile type you can decrease the chances of selecting the wrong font. As you can see below, we’ve compiled a list of high-quality fonts and great resources that are sure to give your users a more complete mobile experience.

Delicious

Fontin Sans

Dekers

Sansation

Latine

Advent

Dejavu Sans

Fireye

Accents

Zekton Free

Mobile Typography Resources

Mobile Typography

This article covers the challenges and technical aspects of mobile typography. It shows you exactly what makes a font “worthy” of being displayed on a smaller screen, and its characteristics. You’ll learn about font measurements, letterforms, vital families, styles, kerning and more. It’ll also show you a guideline for selecting a the right typefaces for small-screen devices.  Read More

Typography for Mobile Phone Devices

The following case-study conveys valuable information on QUALCOMM’s decision to develop and strategically design the typographic aspect of their mobile user interfaces. They previously had a custom family of sans-serif fonts that were going to be used with previous devices, however, the project led to the assessing the impact of digital type on mobile devices. Follow the link to download the full case-study. Read More

The Typography Manual 1 (Mobile)

This manual is straight to the point, easy to follow, and lets you in on some intriguing insight having to do with mobile typography. It’s a detailed guide (60+ pages) for designers that displays a history of type, the basics, characteristics and more. It also comes with a Visual Type Anatomy Glossary that shows you the types terminology in the form of letters and their definition as well. Read More

Fonts for prototyping mobile UIs

Here you’ll find great pointers on using the right fonts for prototyping mobile UI’s. Because there are is a plethora of designers that create prototypes before developing a mobile website, you should know which fonts work best and how. When you design mobile web pages your designs suffer from bad pixelation, now imagine your fonts being displayed in the same manner. This article covers the right type to use, which manufacturers (Nokia, Samsung, Etc..) use which fonts, and what fonts should/can be replaced. Read More

Typography for Mobile Devices

Just as the title states, this article goes over Typography for Mobile Devices. Just about 3 billion people use mobile devices, can you afford not to select the right fonts? You’ll also see that the author discusses quick points on relative fonts and which ones are not worth using. For example, the use of Times as a mobile type is frowned upon, but why? Because it lacks personality.

This is a good argument, in fact, Time is one of those fonts that look much better after 12px. The author also relates using fonts for smaller screens to the reasons why you would choose a specific font for print. The selection of fonts for use of print requires such topics as hinting, kerning, and x-height to be covered. Interestingly enough, the author says that these are also grounds for selecting a mobile type. Read More