The advent of the smartphone has marked an explosive increase of users accessing the internet on the go. With worldwide numbers well above 1% of all internet usage, companies have taken notice and started creating mobile versions of their full websites to cater to mobile users.

This showcase highlights some standouts from companies you have heard of like CBS, Disney, and also some you may not have heard of. Each of these mobile websites attempt to make the mobile experience as good as possible even with limited bandwidth and screen space.

If you have interest by this post, I’m sure you enjoy these others :

Ultimate showcase of wonderful themeparks, warterparks and zoos webdesigns 1/2
20 incredible examples of smooth horizontal and vertical sliding navigation websites
20 Wonderful Websites Showcasing MODx CMS

A List Apart

Mobile Version:

Full Version:

Android and Me

Mobile Version:

Full Version:

Bamboo

Mobile Version:

Full Version:

CBS News

Mobile Version:

Full Version:

CNN

Mobile Version:

Full Version:

Disney

Mobile Version:

Full Version:

ESPN

Mobile Version:

Full Version:

H&M

Mobile Version:

Full Version:

Jaguars NFL

Mobile Version:

Full Version:

Marcel Muller

Mobile Version:

Full Version:

Mashable

Mobile Version:

Full Version:

Mercedes Benz (USA)

Mobile Version:

Full Version:

Microsoft

Mobile Version:

Full Version:

Procab Studio

Mobile Version:

Full Version:

Topix

Mobile Version:

Full Version:

Tripadvisor

Mobile Version:

Full Version:

Twitter

Mobile Version:

Full Version:

Vimeo

Mobile Version:

Full Version:

Volkswagen

Mobile Version:

Full Version:

Yahoo

Mobile Version:

Full Version:

Mobile – Is it time to care?

The latest numbers indicate mobile internet usage accounts for about 1.26% of all internet usage. Is that enough to cater specifically to mobile users, as these companies have done? What’s your opinion?

Yes that’s right, even during holiday we need inspiration for our job, it is why you can find below, a selection of 7 new websites as a new part of the set “selection of Webdesigns”, kept for their particular concept, ergonomics and design.

I remind you that the set of “Websites of the week” posts is based on a suggestion coming from our partner One Inspiration Per Day, you can visit it and find plenty interesting and original Websites.

But it is now the time for the selection of the moment, notice that some Websites of this selection are classified as “the best of the best” never seen since the beginning of the set “Websites of the week” then, do not hesitate to visit them, you will not waste your time.

If you have interest by this post, I’m sure you enjoy these others :

Tenth Websites of the week Inspiration for webdesigners

Ninth Websites of the week Inspiration for webdesigners

Eighth Websites of the week Inspiration for webdesigners

BOUNTY Bev

A perfect model for webpage navigation. All content is located on a vertical page, click on the menu to travel from the top to the bottom, to the section you want to watch. The dominant use of the blue colour is really justified and the website is really pleasant in use. Be care, this website is not allowed for surfers under 18 (alcohol advertising) But for others, have good time on this very interesting Website !
Click to discover this website

Display (template)

The graphic design of this website is really a success, clear, design and especially plain.
The Carousel and the Footer, correctly located, are the elements I prefer in this Template. A good basic start-point for people willing to create an online Portfolio.
Click to discover this website

Freelance Logo

The home page of this website is wonderful, starting with the first page, the reader do not wait longer to enter in the concept and atmosphere of this website, result of a clear layout and amazing and efficient illustrations. On the internal pages, accuracy is missing but the global feeling gives a good sensation of a high design of quality.
Click to discover this website

Kaleidoscope App

If I exclude the illustration located on the right which is fascinating, this website succeed to create an unique design, clear and accessible, but the best is that it performs to create an unique design by each component of this website, and all of them are fantastic. Certainly the most interesting website I have never seen during the 6 last months, do not miss it !
Click to discover this website

Play Jumbalaya

I appreciate this website because its concept is present from start to end. Use of textures is amazing and the logo is really a success, but the rush job used for the layout of the Screenshots hurts me (see at the bottom of the page).
Click to discover this website

Noel Design

Welcome by Terry Noel’s Portfolio, a common clear website including only few pages which takes in charge the rule for it has been defined. The design of this website is very pleasant, looking like a patchwork and making a visit is fine, its atmosphere is really unique. Incredible by its noteworthy original design
Click to discover this website

Orange Apple

This website carries the surfer to another planet, from the first to the last page. Simple to use, the switch from a page to another is really easy and pleasant. This website takes the second position in this set of websites, even the design is a basic one, I appreciate its perfect ergonomics and it is why it enters in the top 10 of the websites you have cannot to miss !
Click to discover this website

Conclusion

A selection with in fact lot of websites with high level quality. By reading this article from the beginning to the end, you get surprised by the increasing quality, when watching a website you know than it is more beautiful than the previous one. If you like this selection of websites, do not hesitate to visit them And if you like this website, do not forget to share its articles with your Twitter or Facebook friends.

Further, if you decide to follow our next articles, did you know that the subscription to our RSS feed is free, it is the best method for you to never miss our new articles?

The web is based on a unique functionality, the possibility to navigate from a page to another using the Hypertext link. Without this function, all pages are lost in the web immensity, and it is impossible to get the famous synergy we appreciate when visiting a website, then another and another more…!

Even you get always the same action using a Hypertext link. It cans also give several other functions. But a link is always defined with the same unique style, the famous blue text.

Also, a subscription link, an update link, a delete link are all displayed in the same blue colour. In this way, it is difficult to encourage a surfer to click on a preferred link, because there is no difference between all of them, there are all similar.

The solution is to insert a picture including a Hypertext link. It means now, it is any more an ordinary link but it looks like a small advertise to make the surfer to do the expected action

Today, you can find this type of work everywhere. It is really efficient on the subscribe buttons as well as on the purchasing buttons.

Today, this technique is applied to several actions, and sometimes; it is difficult to make a difference between an essential action, a commercial one and a common one. This proliferation force now the web-designers to enforce their originality to make the difference, to define several actions attached to buttons.

But they have also to create amazing Templates. An original Template is one getting success, ergonomic and impressing as soon as possible the spirit. To do it, it is important to give priority to some graphic aspects (gleam, shadow, illustration) and to reflect to each part of the Template: header, logo and banner and for sure, on the buttons.

A button will be good integrated in a Template depending of its definition, it will be important to perform a good clicks rate. A perfect button will perform the best rate. On the web, many websites increase their click rate, using this rule and it is why you can today find lot of perfect buttons on the web.

Dear Web-designers, to make it easier for you, I tracked the 100 perfect buttons of the web, efficient and beautiful. You only need to watch them and you cannot avoid clicking them, but ensure you do not click on the pictures, because they are only “Screens”, better to got to the original websites to admire the whole of these exceptional websites.

If you like this list of buttons, perhaps will you have interest for the hereby articles:

And find now the selection of the 100 perfect buttons.

And to help us to promote this article, do not forget to click on the below buttoms, to share this page with your friends through Twitter, RSS Facebook or your blog. In advance, many thanks for your contribution.

Welcome in the new “Websites of the week” on 2experts, I selected for you seven very handsome websites, I advice you to visit them to fuel your creativity. Good browsing.

And as usual, this content comes from our partner One Inspiration Per Day So thank you again for your useful work.

Ready Made Designs

I like the quality of the illustrations on this website, I especially like the footer with the box and the rocket : ) I find the colors really original!

Ready Made Designs

Cube Scripts

I find this website a bit cold but I like a lot the 3d effect on the right side!

Cube Scripts

Kiwi App

This website is just perfect, original, easy to use and very efficient. I like the metal effect on the logotype, the download button and of course the kiwi!

Kiwi App

Campus Vida

Really a beautiful website, the colours are incredible, I especially love the grunge style on the header with the characters on the right.

Campus Vida

Aussie BBQ Legends

This website has a good felling, and its design is just incredible, I like the illustrations and the animated menu on the right side of the homepage.

Aussie BBQ Legends

Larva Labs

The background of this website and the two planets are very incredible… but it is all what I like in this website : ( the rest is not really design, too bad.

Larva Labs

Blue Sky Resumes

Browse all pages of this website because there are a lot of graphic and genius webdesign tips on it, good colours and good webdesign!

Blue Sky Resumes

And finally if you enjoyed this post, please help me to promote 2expertsdesign, share this post on your social network. Thank you very much.

The last week I have forgotten to publish the review of the week it’s why today I have done a really great selection with seven very very handsome websites! Don’t miss them because they are incredible!

And as usual, this content comes from our partner One Inspiration Per Day So thank you again for your useful work.

Beehive App

Nice website, I especially love the header with its cartoon illustration effect. Hit on the button Pre Registration to discover a really nice form! That’s a good job

http://beehiveapp.com/

Play In Traffik

Corporate and clean, I find this website very efficient, I am not really a fan of the colours used on the header but I appreciate this webdesign !

http://www.playintraffik.com/

Rareview

This webdesign is just amazing, There isn’t lot of graphic elements but just a little touch! I find the colourful animated header just wonderful.

http://www.rareview.com/

Thunder Game Works

This is a little website for an Iphone game, but the design is just incredible. Really good colours and nice cartoon illustration. I especially love the illustration of the background!

http://www.thundergameworks.com/

Biz Break App

This website is a bit “chaotic” but I find these cartoon illustrations really funny, especially the footer!

http://www.bizbreakapp.com/

Digiti

Not a really useful website but … I love it, funny and very nice and charming cartoon illustration. Really, I love it, good job!

http://digiti.be/

Silver Back App

If you are webdesigner I’m sure you know this monkey Really good theme respected from the top to the bottom! Nice webdesign.

http://www.silverbackapp.com/

Conclusion, thanks to every body to follow these posts on 2experts week after week. If you have some idea to publish on OIPD and on this selection, please let me know it by mail : info@2expertsdesign.com.

And if you enjoy my work please, share it on Facebook, Twitter or on other social networks. Thank you so much!

There is an effect that I especially love on the websites, I don’t know if you have ever seen this effect often used for portfolios or photographic galleries, I can name it a smooth sliding navigation.

This concept is to put a lot of content, generally a bio, references lists, services, and a contact form on a same page but separated by a large space. The result is a very very long page … not really easy to browse it, but you can switch the steps with a menu and with a sliding animation.

The must on these websites:

• You can load the website just one time and you can browse it really fast after its upload
• You can separate the different parts of the page with different universes
• You can create a really KISS website (easier using and reading)

Ok it’s my mind, I find this effect really cool, and my future website (my portfolio) will use this sliding effect!

To persuade you I done a really good selection of 20 different websites using this sliding navigation, I cheer you to visit each of them, because they are really impressive! And finally, if you are sure to dislike this effect let me know your thinking in the comment: Why you dislike?

Example:

And look at this example with a little explanation:

Showcase:

I selected 20 websites using this effect, look at this showcase now.

tympanus

http://tympanus.net/

Soft Facade

http://www.softfacade.com/

Charles Elena

http://www.charleselena.com.au/

Plastic Beach Watch

http://www.plasticbeachwatch.com/

Creative Switch

http://www.creativeswitch.net/

Ajax Masters

http://www.ajaxmasters.com/

Zuls Design

http://www.zulsdesign.com/

Agigen

http://agigen.se/

UD+M

http://www.uberdm.com/

Tyrale

http://tyrale.com/

Bobwal

http://bobwal.com/

Rotciv

http://www.rotciv.com.br/

My name is Orman

http://www.ormanclark.com/

F5

http://ffive.com.au/

Eduardo de La Roque

http://www.delarocque.com.br/09/home.html

two 24 STUDIOS

http://two24studios.com/

Mateusz Pasternak

http://www.pasti.pl/

Vanity Claire

http://vanityclaire.com/

Fridge Works

http://www.fridgeworks.com/

X Graphica

http://xgraphica.com/

So thank you very much to you to read and to see my showvase, if you enjoyed this post, and this blog please follow us up on RSS or Twitter See you later by another 2expertsdesign.com tutorial!

You have probably already met this style on Internet, it’s a really nice and particular good effect. I have previously looked for a long time how to do it, and today I’m proud to share this knowledge with you! This webdesign tutorial is composed of two parts.

The first one is How to create a glossy button in Photoshop, and the second one is How to use HTML/CSS and jQuery to animate the button.

But before to start this tutorial I would like to say Thank you to Jacob Gube who published the post “Create an Animated Call to Action Button” on Sixrevisions. They posts are similar to mine it is why I send them my congratulations!

So we are ready, start now with part one!

Step one – Open Photoshop

To start the creation of your glossy button, you have to create a new document, go to File> New (Ctrl/Cmd + N) and: edit the name (Glossy button in my example), change the canvas with (180px) and height (45px).

Step two – Create some guides

To help you to do the button, you should add some guides on your canvas! But before to add them you must turn the rulers on, so, go to the menu View> Rulers (Ctrl/Cmd + R to turn on and off). You’ll create 4 different guides: on the top, on the right, on the left and on the bottom.

Step three – Create the main shape

Select the Rounded Rectangle Tool (U) and look at the options bar on the top of your screen. Verify that the first icon is activate (Sharpe Layer) and to finish, edit the radius to 40px.

Now you can create a rounded rectangle. If your foreground colour is black, your shape will be black, the foreground colour is important because it defines the style of your button. But don’t worry, it’s really easy to edit this colour, double-click on the shape layer “Shape 1” to change the colour.

In this example I use a darkgrey : #292929.

Step four – First reflect

Create a news layer and name it “First reflect” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). Then create a selection around the shape button (Ctrl/Cmd + click on the layer shape 1’s thumbnail (in the layer panel).

Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok.

Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5).

Select the Rectangular marquee tool (M) and create a selection around the half bottom. Then delete the pixels (Delete).

To finish the reflect, go to Layer> Layer Mask> Reveal All. Select the Gradient Tool (G) and in the options bar, open the gradient picker and choice the second thumbnail (Foreground to transparent). Change the colour of the foreground to the Black and create a new gradient on the Layer mask.

Step five – Little stroke

Hide the guides (Cltr/Cmd + and create a new layer, name it “White stroke” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). And do once more time step 4 …

“create a selection around the shape button (Ctrl/Cmd + click on the shape layer one’s thumbnail (in the layer panel)… Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok… Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5)”

Get down the selection of 1px. And delete the pixels (Delete).

To finish, add a new Layer mask on “White stroke” and with the Gradient tool (G) create a gradient on the half top part.

Step six – Last gradient

Create a news layer and name it “Last gradient” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). For the third time create a selection around the shape button, contract it by 1px, change the foreground colour to the white, select the gradient tool (G) (Foreground to transparent) and create a smooth gradient on the half bottom part. Press Ctrl/Cmd + D to deselect.

Great ! the button is still finished

Step seven – Drop shadow

To finish the button it’s easy; you must add a drop shadow on the layer “shape 1” but after that, you have to increase the height of your canvas (add 3 pixels => height will be 48pixels // Ctrl/Cmd + Alt + C or go to Image> Canvas size). Then click on the layer “shape 1” and go to Layer> Layer style> Drop shadow.

Edit the options like that:

Step eight – create the text

Select the tool Text (T) and create a new rectangular text area from the left to the right, in the options bar, click on the centre text icon. Then type your text (Sign-up Now!).

To finish the text, add a new layer style, go to Layer> Layer style> Stroke. Change the size to 1px, the colour to the black.

Step nine – duplicate the button

Finally you must duplicate the button to make the hover button. Create a new group and name it “Button” (go to Layer> New> Goup). When the group is created, move all layer into the group.

Now, you have to increase the canvas size again, go to Image> Canvas size and change the height to 96 pixels (48*2=96).

Right click on the group and select Duplicate group (edit the name like “Button hover”).

Step ten – Change the color

Use the Move tool (V) to get down the second button and double-click on the layer shape 1’s thumbnail to edit the colour. You see it’s easy, change the colour to change the style of your button. In this example I used the green : # 3d960c.

Look at the result:

And look at the same button with different colours.

Conclusion

I do believe I’m going to stop this tutorial now, because ten steps is really long and especially difficult. I’ll publish the explanations regarding the HTML/CSS & jQuery tomorrow on this blog

Download the Free PSD

Click here to download the Photoshop .psd files

Troubles, questions, comment or more

So if you have trouble with an explanation or something else on this tutorial, let me know, use the comment to ask me. I hope you enjoy with this tutorial, thanks to you to read my new post on 2expertdesign.com

I’m really proud today to start this new serie of posts on 2expertsdesign.com. Let me explain to you the concept : Every week I will publish here a selection of 7 really nice webdesigns to fuel your inspiration and your creativity.

These posts will be perfect for webdesigners who want to find new incredible webdesigns, improve their inspiration, or to create a really nice library of webdesigns (if you save the pictures on your computer).

I would like to do a really simple post, it’s why the post will be composed of just the webdesign like that :

Title

Picture

How the design is cool

And the url to visit this incredible website

It’s easy The last information you must know is that these posts are written and proposed by our partner One inspiration per day a nice CSS gallery. Every website you can find on these posts, you will find them on Oneinspirationperday.com too.

So, now the first webdesign inspiration

Mr and friends

On this website I like particulary the menu on the top, the slide up is really a good idea! And I already love the big font used on the left! To finish, don’t miss the portfolio because the galery is really nice (page OUR WORK The creative edge).

• View this website

Haafe

Usualy I love the simple website (Kiss) then it’s normal I love it, with just one page you cannot do any mistake “your enjoy my products? Buy them”. And of course I adore the vintage cartoon illustration.

• View this website

Powery Base

Mix the wood with an iPhone and you get this website, really nice wood effect on the top page, and I especially love the little gallery on the middle right and the little stamp overhead the iphone illustation.

• View this website

Moshi Monster

I love all on this webdesign, because when I open it I imagine to enter in a magical and incredible world! The animeted background on the homepage is really nice, and when you click on a link you can view a CSS version already fine and beautiful. A really good job.

• View this website

The farmer and the chef

The feeling on this website is really fine and logical because each graphic element is drawed using the same style. The wood style is everywhere but what for a good job!

• View this website

Club Juicy

I cannot say that it is an incredible webdesign, but I love the background with these guys holding the page, and the vintage logo too!

• View this website

Media Loot

One of websites as I love them! Clean and corporate, If you want to know what I love on this website … almost everything. The menu and the header are clean and beautiful especially the logotype and the green button. I also find that the blue used on this website is really nice, and the footer, did you have the design of these lists? Certainly my best one of this selection.

• View this website

Thank you very much to you to read my post, if you enjoy these inspirations, don’t forget to visit my website One inspiration per day!

When you create a new template you have to think about lot of things : the colours, the pictures, the texts, the links etc. For each of them, I think there is one thing particularly complex and difficult to do, I mean the creation and use of icons in webdesign.

In fact, you must take time to find the best icons (especially on a website like www.iconarchive.com) and it’s really expensive! Secondary, sometimes you cannot find a good icon to illustrate an action, and the last thing you have to do, is to design it… you know that some websites can use, at least, 10 different icons (as an administration dashboard) it’s take lot of time and it’s really hard!

If you are a webdesigner you have certainly understood what I tried to explain to you! And you should know that every week, several websites publish great and useful icons packs.

Then, why do you continue loosing precious time, creating new icons for each of your all new web designs projects? Start to work with the different graphic elements, it’s quick easy and mostly FREE!

For your next project Look at this selection of the best perfect icons packs I found on the Web. If you know other download icons links, please post them into the comments.

Internet Icons for Webdesigners

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

RSS Icons for Webdesigners

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

Social Icons for Webdesigners

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

• View the website author

Best website to download free icons

And to finish 10 of my best websites to download a free packs icons.

• Icon Finder
• Icons Pedia
• Icofree
• Very Icon
• Best Free Icons
• Icon Look
• Icon Archive
• Dry Icons
• Vista Icons
• Go Squared