1stwebdesigner

Posted by | Posted on 20:27

1stwebdesigner


45 Mobile Web Designs To Show You One Of Future Trends

Posted: 04 Jun 2010 02:00 PM PDT

Even if now not many visitors come to the website through his mobile phone, but be sure it’s the future, where people will use their smart phones everywhere to access their favorite websites when they are on the road and want to fill their free time with useful reading.

We are designers and we need to think how to create more usable sites for such needs and today we showcased 45 great mobile webdesigns to get you inspired!

If you do not know you can check other website designs here – this is iPhone simulator, but there are plenty of other ones to check on Android,Windows Mobile etc. –   just input there website you want to check and hit enter. Also thing to remember, if site has mobile design version and you don’t get it automatically, you can access it by putting "m" before website address –  "m.example.com" –  from smartphones and iPhones you need to use this mobile address as well to access it.

1. Victoria’s Secret Pink

Victoria-secret-pink-mobile-web-design-showcase

2. Alex Buga

Alex-buga-mobile-web-design-showcase

3. Vondi

Vondi-mobile-web-design-showcase

4. University of Alabama

University-of-alabama-mobile-web-design-showcase

5. Virgin Blue

Virgin-blue-mobile-web-design-showcase

6. Toy Soldier

Toy-soldier-mobile-web-design-showcase

7. Wegmans

Wegmans-mobile-web-design-showcase

8. Design Quest

Design-quest-mobile-web-design-showcase

9. iWeathr

I-weathr-mobile-web-design-showcase

10. Marina Yachting

Marina-yachting-mobile-web-design-showcase

11. Dolce & Gabbana

Dolce-gabbana-mobile-web-design-showcase

12. Vimeo

Vimeo-mobile-web-design-showcase

13. WVU Today

Wvu-today-mobile-web-design-showcase

14. Burger King

Burger-king-mobile-web-design-showcase

15. Sony

Sony-mobile-web-design-showcase

16. YellowPages

Yellow-pages-mobile-web-design-showcase

17. Singlehop

Singlehop-mobile-web-design-showcase

18. McDonald’s

Mcdonalds-mobile-web-design-showcase

19. AOL Money & Finance

Aol-money-finance-mobile-web-design-showcase

20. Nclud

Nclud-mobile-web-design-showcase

21. Procab Studio

Procab-studio-mobile-web-design-showcase

22. Marcel Muller

Marcel-muller-mobile-web-design-showcase

23. Pixanimal Studio

Pixanimal-mobile-web-design-showcase

24. Android and Me

Android-me-mobile-web-design-showcase

25. Erskine

Erskine-mobile-web-design-showcase

26. Mashable

Mashable-mobile-web-design-showcase

27. Productive Dreams

Productive-dreams-mobile-web-design-showcase

28. Far From Fearless

Far-from-fearless-mobile-web-design-showcase

29. Twitter

Twitter-mobile-web-design-showcase

30. Just Creative Design

Just-creative-design-mobile-web-design-showcase

31. Nike Lab

Nike-lab-mobile-web-design-showcase

32. Print Fancy

Print-fancy-mobile-web-design-showcase

33. Ammy Stoddard

Ammy-stoddard-mobile-web-design-showcase

34. Plaveb

Plaveb-mobile-web-design-showcase

35. Coosh

Coosh-mobile-web-design-showcase

36. HTC

Htc-mobile-web-design-showcase

37. Lexus IS F

Lexus-isf-mobile-web-design-showcase

38. CWTV

Cwtv-mobile-web-design-showcase

39. Deviant Art

Deviant-art-mobile-web-design-showcase

40. MySpace

Myspace-mobile-web-design-showcase

41. Smashing Magazine

Smashing-magazine-mobile-web-design-showcase

42. Wacom Bamboo

Wacom-bamboo-mobile-web-design-showcase

43. Flickr

Flickr-mobile-web-design-showcase

44. Digg

Digg-mobile-web-design-showcase

45. Mobilize Media

Mobilize-media-mobile-web-design-showcase

How To: Implementing Gravatar in your PHP Application

Posted: 04 Jun 2010 03:00 AM PDT

Gravatar or globally recognized avatar is a service for providing globally-unique avatars for different applications. It was started by Tom Preston-Werner but it’s now owned by “Automattic”, the company behind WordPress. This is the main reason why this service is free and is available to be used on PHP applications other than WordPress. Today, there are a number of people using this service. That’s where Gravatar adds to the comfort of people because using it you can use the same avatar for different websites without even uploading an image to the website.

We’ll now make a simple PHP application which shows you the Gravatar associated with an email.  So let’s get started without wasting any time!

MAKING THE FORM FOR THE APPLICATION

Our HTML page will include a text-box (for email input), a command button (for submitting the form) and some space for displaying the Avatar image associated with the email.

Below are the contents of the “index.php” file.

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Implementing Gravatar in your PHP Application </title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head>  <body> <span style="text-decoration: underline;"><h1>Integrate Gravatar in your PHP Application</span>   <div id="content">  <div id = "notification">  <p>Check your Gravatar using this Application.<br>  <b>Note:</b><i>We aren't storing your email-ids here!</i></p>  </div><!--End Notification-->  <br/>  <br/>  <div id="show"> <form method="get" action="index.php"> E-mail: <input id="email" name="email" type="text" />&nbsp;<input id="submit" name="submit" type="submit" value="Show Avatar" /> <!--<span class="hiddenSpellError" pre=""-->form> <p>Gravatar associated with your e-mail is:<br/> </p> </div><!--End Show--> <br> </div><!--End Content--> </body> </html>

You might have noticed/seen by now that I haven’t filled the “value” for the text input, that’s because we’ll be using PHP there and I’ll discuss the PHP usage later in this tutorial. Also I won’t be using an external PHP file for form processing, instead we’ll just be adding the PHP code to the Index file itself (that’s why the action property of our form points back to the “index.php” file).

For tutorial purposes, we’ll just be making some minor changes to the HTML markup above and that’s it!

If for any reason you want to use an external PHP file for form processing then replace “index.php” (form action) in the code below with the name of the file consisting your PHP code.

<form action="index.<span class=" method="get">php</form>">

NOTE: We haven’t yet discussed the  PHP code so don’t panic. Scroll down on this page to get it!

HERE COMES THE CSS

Make a new CSS file named “style.css” and add the following code to it!

  h1{  padding:30px 0;  text-align:center;  text-shadow:0 1px 1px white;  margin-bottom:30px;  font-size:35px;  background-color:#f6f6f6; }  #content { text-align: center; }  #notification { margin-left:350px; margin-right:350px; border-style:solid; border-width:2px; border-color:#74DF00; background-color:#EFEFD7; } 

Here I styled the H1 headings and the two Div’s called “content” & “notification”.

BRINGING LIFE TO THE APPLICATION WITH PHP

As I said before we’ll just be using one file with all our codes in it, so just add the code snippets below (wherever told to) to the “index.php” file.

In the “value” property for the input text box add the  following code:

  php echo $_GET['email']; ?> 

Your line 19 (or the line where you added the code above) should now look something like this:

  E-mail: <input id="email" name="email" type="text" value="<?<span class=" />php echo $_GET['email']; ?>"> <input id="submit" name="submit" type="submit" value="Show Avatar" /> 

To eliminate spam, e-mail addresses are hashed with the MD5 cryptographic hash function. This prevents spambots from harvesting e-mail addresses. To do this add the following code just after the

tag closes (you can add it anywhere but to maintain an order I placed it after the form).
  <?php  if ($_GET['email'] != "" && isset($_GET['email'])) {  $gravatarMd5 = md5($_GET['email']);  } else {  $gravatarMd5 = "";  } ?> 

In the above code we are hashing the email addresses provided by the user using the pre-built PHP MD5 function and then enclosing the hashed code in a variable called “$gravatarMd5″ (using it for getting the image from Gravatar’s database.

Now scroll down in the original HTML markup to where it says the following (line 28):

<p>Gravatar associated with your e-mail is:<br/>

To add some fun to the code we’ll edit the code above to include the email address your client entered. The line above should now look like this:

<p>Gravatar associated with your e-mail <i><?php echo $_GET['email']; ?></i> is:<br/> 

Here we are printing the email entered in the input box and then styling it as an Italic.

Now all we have to do is to show the image (avatar) associated to the email enter. For that, just after the above line ends (or after the <br> tag), press enter and add the following code:

 <img src="http://www.gravatar.com/avatar/" alt=""> 

Here we are adding the hashed email to the URL used for getting images from Gravatar and then are displaying that URL as an image.

We have now successfully completed making our own PHP application which shows you the Gravatar associated to an email. You can now build on this code to use it on your website, blog (other than WordPress) or any other project requiring registrations with Avatars. This way you can save some bandwidth of your hosting package and also make a comfort zone for your visitors.

In the Further Reading section below you’ll find some URL’s associated to Gravatar studies. I strongly suggest you to read those to get some more info.

If you have any suggestions or queries or concerns then feel free to leave a comment below.  :)

FURTHER LEARNING

Comments (0)

Post a Comment