Advertise here with BSA

I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect.

More specifically I have seen a couple countdown widgets on landing pages. These are numbering systems for websites which count down to a specific launch date. You could alternatively use this code to create a live clock on your website – there are so many uses available! Check out my simple tutorial below and see if you can implement a similar ticker into any future web projects.

Live Demo – Download Source Code

Selecting Graphics

I am admittedly not an amazing Photoshop design guru. I can put together some unique web layouts and magazine themes – but I can’t create a whole rolodex stack from scratch. This is where the large network of PSD freebies comes in handy.

I really love this flip-clock countdown for both the gradients and textures. This was created by Orman Clark who also built the website Premium Pixels. Just download the PSD and extract a single card stack background. We will use this same background for each of the time slots – days, hours, minutes, and seconds.

However I want to use dynamic HTML inside each div to update the counter. So when you extract these blocks make sure you hide all the text layers, including the bottom labels. Or even easier just download my tutorial source code above and use the included images.

Core HTML Layout

For this example we don’t need a whole bunch of confusing HTML markup. I’m using a containing div #clock-ticker set with a clearfix class, and inside we have 4 different floating divs. These are set to the class .block and each contains a single column of the countdown clock.

<div id="clock-ticker" class="clearfix">
	<div class="block">
		<span class="flip-top" id="numdays">8</span>
		<span class="flip-btm"></span>
		<footer class="label">Days</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="numhours">14</span>
		<span class="flip-btm"></span>
		<footer class="label">Hours</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="nummins">34</span>
		<span class="flip-btm"></span>
		<footer class="label">Mins</footer>
	</div>

Inside a single block area we have three core sections. The top two span elements contain the top and bottom portion of each rolodex card. By splitting up the card we could use some further jQuery UI animation effects. But this goes much further than I’d like to cover here – although it is possible to build off this preset code.

#clock-ticker { display: block; margin-bottom: 15px;}
#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; }

#clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }
#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; }

#clock-ticker .block .label { color: #fbfbfb; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif; text-shadow: 1px 1px 0px #333; }

The last area contains the label text for each card. This is held inside an HTML5 footer element and styled with a bit of CSS. I should point out how many of these elements are set to a fixed height. This means we can ensure the layout won’t break even if our numbers were “too big” and pushed outside the box model.

Detecting Clock Numbers

Inside the top span area of each column I’ve appended some default numeric values. You can change these to whatever you’d like and the script should still count down directly to 0. But just remember you don’t need anything in the bottom section, and actually I built it this way to keep the code cleaner.

Our goal would be to then check each of these numerical values on pageload and set them to static variables. You can see I have done this within the first few lines of JavaScript. The jQuery library is included in the doc header, but all our JS codes are actually inside a script tag towards the bottom of the page.

<script type="text/javascript">
$(document).ready(function(){
	var theDaysBox  = $("#numdays");
	var theHoursBox = $("#numhours");
	var theMinsBox  = $("#nummins");
	var theSecsBox  = $("#numsecs");

These variables target the span elements themselves, and not the internal content. We do this in a different set of vars because the numbers will be updated every second. I’ve stuck with plain JavaScript and the setInterval() method.

Using this predetermined timing function we offer an internal set of code to call every set number of milliseconds. In this example we call the function code every 1000 milliseconds, or 1 second. Let’s look at some example syntax first:

var myNewIntval = setInterval(function() {
   /// we use code here
   }, 1000);

The method only requires 2 parameters with the latter being a number of milliseconds. The first is the code you wish to execute every set interval of time – most ideally we want to use a custom function. Alternatively we could write a new function name and call this, but we aren’t saving much space either way.

JavaScript setInterval()

Even if you aren’t totally familiar with this method don’t worry too much since it’s easy to catch up. Let’s push forward with the script and look at our real-live example.

var refreshId = setInterval(function() {
  var currentSeconds = theSecsBox.text();
  var currentMins    = theMinsBox.text();
  var currentHours   = theHoursBox.text();
  var currentDays    = theDaysBox.text();

Inside the interval function we’re setting another four variables. These will be updated each second to contain the new value of each span element. Since we’re counting down to a specific number I’m going to use a very basic set of logic to check the timers.

In layman’s terms we need to see if any of the numbers reach 0 during any given interval. If that’s the case we can’t let it turn to -1 in the next second, and so instead we deduct a value from the next set (secs -> mins -> hours -> days).

Base Timing and Logic

Anybody who is familiar with basic if/else statements should be able to follow this script. We’re going to check at each interval if any of the numerical values have hit 0 – or if more than one value has hit 0.

For example, if the seconds and minutes have reached 0 then we need to remove 1 hour from the clock and reset the mins/secs to 59. Same when the hours, minutes, and seconds reach 0 and we need to remove 1 day from the clock.

if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
  // if everything rusn out our timer is done!!
  // do some exciting code in here when your countdown timer finishes
} else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
  // if the seconds and minutes and hours run out we subtract 1 day
  theDaysBox.html(currentDays-1);
  theHoursBox.html("23");
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0 && currentMins == 0) {
  // if the seconds and minutes run out we need to subtract 1 hour
  theHoursBox.html(currentHours-1);
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0) {
  // if the seconds run out we need to subtract 1 minute
  theMinsBox.html(currentMins-1);
  theSecsBox.html("59");
} else {
  theSecsBox.html(currentSeconds-1);
}

I’m using the jQuery .html() method to set the internal value for each span. The very first if() {} statement checks for the timer completely running out, and you can place any code inside here. This could fade out and display a signup/registration form. Or it could re-direct visitors to a new page once the timer has finished.

There is definitely a lot you can do to customize this code for your own ideas. The clock will always tick down in this code, but that is easy to change. And if you refresh the page all values will reset to their original static setup inside the HTML document. Unfortunately session variables are controlled on the server end, so there’s no way to do this using solely JavaScript.

Live Demo – Download Source Code

Conclusion

I hope this quaint clock ticker can be useful to some web designers. It’s a cool widget when you need it, but it’s also hard to just squeeze into a web layout. Practicing with JavaScript is also handy the more you move into web development techniques. Feel free to download my source code and play around on your own. If you have any ideas or suggestions you can share with us in the post discussion area below.

Advertise here with BSA

Advertise here with BSA

I remember how popular web design was even 5 or 10 years ago. Kids in high school were teaching themselves HTML and building small web pages from scratch. And nowadays this is possible because of the thousands of free tutorials and code online. Open source has dramatically shaped an industry of high-tech and high demand.

But it can still be difficult pinpointing exactly what you want to learn. Beyond straight HTML/CSS there is jQuery for frontend animation, PHP/RoR for backend web apps, and even Java/Objective-C for mobile apps. With this collection you should be able to track down a few tutorials in whatever topic catches your interest. If you notice we’ve missed a resource feel free to share with us in the post discussion area below.

Pixel2Life

Smashing Magazine Coding

W3Schools

Tizag

Webmonkey

Treehouse

Sitepoint

Student Web Design Guide

A List Apart

Web Design From Scratch

Net Tuts+

Web Design Tuts+

CSS Tricks

Developer Drive

Think Vitamin Blog

Ajaxian

.Net Magazine

Tutorialzine

24 Ways

Design Instruct

PHP Academy

Advertise here with BSA

Advertise here with BSA

Using jQuery we can build some incredible web-based applications. The animations and manipulation of DOM elements using jQuery are much more intuitive than coding regular JavaScript. Because the syntax is so minimalist it’s possible to scale a very complex idea within a few hours time.

In this tutorial I’ll demonstrate how we can build an HTML5 invite form and check the results through jQuery. I haven’t gone into any backend PHP as this isn’t always the best solution for an invitation system. You may want to tie into another e-mail campaign such as MailChimp or Campaign Monitor. But with this technique running the frontend you can quickly implement a backend language to manage the e-mail submissions.

Live Demo – Download Source Code

Coding the Index

Start by creating a new index.html file and include a basic HTML5 template. I’ve used the skeleton found in Coda’s HTML clips, and I also duplicated the code below. Feel free to copy/paste into your own document and edit as needed:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>E-mail Invite Form Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

</body>
</html>

One other thing to point out is that we’ll need the jQuery library included for our script later on. It would be easier to add this now – and we can even use the online Google CDN so we don’t need to host anything. Inside the header right underneath the stylesheet link add this line of code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And now we’re all set to build inside the body. All I’ve done is setup a wrapper div with some headings talking about the form. To spice up the layout I’ve also included a small envelope icon floating off to the right side.

E-mail Invitations

The purpose of our form is to grab the user’s e-mail address and somehow keep a list of interested users. We just need an HTML5 e-mail input along with a submit button to handle the verification.

<div id="completeform">
	<span id="error"></span>

	<form id="inviteform" name="inviteform" method="post" action="#">
		<input type="email" name="email" id="email" placeholder="E-mail address" autocomplete="off" autocorrect="off" autocapitalize="off">

		<div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Send</button></div>
	</form>
</div>

I wrapped the form inside a div #completeform so that we can use animations later. Once the user successfully submits we want to drop the form opacity and display a success message. Also notice I have the form’s action set to a hash(#) because the submission process is taken over by jQuery. You could put a PHP or Ruby script in here – but for this scenario I’ve left it blank.

I’m also using a couple new attributes on the input field. First our type is set as “email” so that mobile browsers can display the appropriate keyboard. Chrome and some webkit browsers will use this to detect if the user hasn’t typed an appropriate address. The attributes autocorrect and autocapitalize are targeted specifically to mobile browsers. It can be a real pain typing on the iPhone/iPod Touch keyboard, and we want to make this signup easy as possible.

The span with an ID of #error is also important to the script. This is set to display: none; inside our CSS so that nothing appears at first. But if the user submits an invalid e-mail address we quickly display the error message.

Coding Gritty jQuery

There isn’t a whole lot to say about our page styles. The file contains very basic properties using some CSS3 linear gradients and box shadows for the form submit button. If you’re interested check out the source file from my live demo. Otherwise we can jump right into the jQuery.

Let’s start with a simple function checking for valid e-mail addresses. I have used a long string of Regular Expressions to verify if the text string matches a standard e-mail syntax. And because I’ve written this code in a function we can reuse it over and over again.

function isEmail(email) {
	// pass regex for validating an e-mail address
	var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	return regex.test(email);
}

The other function block is called when we successfully match an e-mail address. Inside here you could add an ajax() call to pass the address into your database, a local .txt file, or even message yourself in an e-mail.

function completeInviteForm() {
	setTimeout(function() {
		$("#completeform").fadeOut(400, function(){
			$(this).before('<span class="msg">All set! We will be in touch.</span>');
		});
	}, 1100);
}

Currently the function just fades #completeform out to 0% opacity over 400 milliseconds. Then inside the callback function(after the animation is complete) I’ve appended some HTML saying the invite request was successful. I’m using the setTimeout() function only for this example so you can see the animation unfold over time.

Handling the Form Submission

Right before our opening clause I have setup two variables pointing to page elements. This code gives us easier access to the submit button wrapper and the input text field. We need these elements to hide the submission button and pull the current e-mail value, respectively.

var erdiv    = $("#error");
var btnwrap  = $("#btnwrap");

$(document).ready(function(){
	$("#sendbtn").live("click", function(e){
	  // once the send button is clicked we perform some functions
	  // and setup a few variables
	  e.preventDefault();
	  var emailval = $("#email").val();

The statement e.preventDefault(); is fairly common for live click events. This stops the default action from taking place, and we can then execute code without the page refreshing. Focusing on the emailval variable we can begin imposing logic on the e-mail address.

if(!isEmail(emailval)) {
	erdiv.html("enter a full e-mail address!");
	erdiv.css("display", "block");
}

if(isEmail(emailval)) { // email address looks good!
	erdiv.css("color", "#719dc8");
	erdiv.html("just a sec...");
	btnwrap.html('<img src="img/loader.gif" alt="loading">');
	completeInviteForm();
}

The first if() statement checks user input against our validation function as false. This means if the user’s input does not match the regex for a natural e-mail, we respond by setting the error HTML and display: block; style.

Now the second logic statement is executed only if the user’s e-mail passes our validation function. Then we know the string at least looks like an e-mail, so we can begin processing this data. If the error block is already displaying we update the inner text – but if it was never displayed the user does not ever see this message.

Finally we need to hide the submit button to prevent users from submitting twice. Our code replaces the inner HTML with a loading gif image instead. Then ultimately we reference completeInviteForm() which carries out the final bits of JavaScript.

Live Demo – Download Source Code

Conclusion

I hope this tutorial can give you some insight towards coding municipal jQuery functions. The e-mail validation is an important aspect to managing web forms – but with so many startups around invitation systems are hard to come by. With this Ajax-style method you can even offer functionality without refreshing the page!

Feel free to download my demo source code and play around on your own. This is the best way to become familiar with HTML/CSS/JS and even port code into your own projects. If you have similar questions or feedback be sure to let us know in the comments discussion area.

Advertise here with BSA

Advertise here with BSA

Back just a few years ago it was required for web developers use JavaScript/jQuery to perform animated effects in-browser. CSS3 has dramatically changed the rules of the game where you can animate any standard property of an HTML element. This opens up a whole new room of effects you can put together in just 15-20 minutes of tinkering with code.

My example below uses a few Dribbble shots as a demo of how you can setup animated box effects. The style appears when you hover over each image to display some further information such as the title, description, and publication date. I’ll be explaining how to build a similar effect on your own website using nothing but HTML5 and CSS3 techniques.

Live Demo – Download Source Code

Browser Support

Before we begin I should bring up a small tidbit about browser support. Unfortunately only the latest -and-greatest rendering engines will utilize these CSS3 animation properties.

The most notable browsers to support these features include Apple’s Safari, Mozilla Firefox 4+, Google Chrome, Opera, and as of the latest release Internet Explorer 9+. None of the earlier IE versions 6-8 have native support for these properties. But there are hack-ish workarounds you can implement to get them up and running.

Structuring the HTML

I’m using a very minimalist layout to demonstrate how easy it is to implement these effects. The main document is wrapped in a #container div which is centered on the page 600px wide. Then each inner box is given the class .boxxy which uses box-shadows and a slight transition effect on hover.

<div id="container">
	<div class="boxxy">
		<a href="http://dribbble.com/shots/489532-Banking-App" target="_blank" class="anchor-hover">
			<img src="images/sendmoney.png" width="400" height="300" />
			<span class="details">
				<h2>Banking App</h2>
				<p class="desc">Here's a full shot of the send money transaction for this "secret" banking app which I've been working on. This is an early concept, I haven't landed the full project yet, but hoping they like the concept so far.</p>
				<span class="pubdate">Published March 28, 2012</span>
				<span class="viewlink">View on Dribbble →</span>
			</span>
		</a>
	</div>

Possibly the most interesting piece of this code is our span classed .details. The opacity for this block is originally set to 0 so we can’t see any of the content. However, once you hover over the anchor link it targets the inner details box and animates to 100% opacity.

I’ve set the background of this detail box to 85% so that you can still see through to the original image shot. This can be accomplished using the CSS rgba() function which is also supported in all mainstream browsers. Now let’s check out some of these cool CSS effects in action.

Box Shadow Design

I’m going to start on the pink box shadow animation first. This is called whenever you hover over the outer .boxxy element, but it still holds true when hovering over the image as well.

.boxxy {
 display: block;
 margin: 0 auto;
 background: #fff;
 margin-bottom: 22px;
 -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
 width: 400px;
 padding: 7px 9px;
 transition: box-shadow 0.3s linear 0s;
 -webkit-transition: box-shadow 0.3s linear 0s;
 -moz-transition: box-shadow 0.3s linear 0s;
 -o-transition: box-shadow 0.3s linear 0s;
}

The code above are my styles for the boxxy class. Notice that we have to add each -webkit-box-shadow, -moz-box-shadow, and box-shadow properties for full browser support. Also after these properties you’ll find each of the different transition methods. It’s important that these are added on the original element and not the hover selector.

The way you perform animations is by changing different properties on a user action(hover/focus) – such as font color or box shadows. Then you add the animation cues to the original style selector and it will transition gracefully from the normal state into the hover state and back again. This can be explained by looking at one example from our transition properties.

transition: box-shadow 0.3s linear 0s;

The single line above is copied out of our .boxxy animations for the pink box shadow. This tells CSS to animate only our box-shadow property. We want the animation to last 0.3 seconds using the linear effect. This “effect” is also known as our transition timing function.

The final piece of this transition property is for a possible animation delay, which I’ve used 0 seconds. Check out this page on CSS3 transitions syntax to get a better idea of how it all works.

Looking at Hover States

I’m going to add in the code for both our .boxxy hover and the details hover effect. Remember that neither of these selectors need to have the transition properties, as they are already declared on the normal class selector.

.anchor-hover:hover .details { opacity: 1; }
.boxxy:hover {
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
 }

The boxxy code is using two different CSS box-shadow effects to create an outer glow and an inset shadow. Of course, the details pane is a lot simpler and only needs to be animated into a higher opacity. You can try implementing other changes and include them in our original transitions for added effects.

Styling the Shot Details

Now last but not least we’ll take a look at all the CSS styles for building the internal details pane. This container is home to a number of smaller elements including a header, paragraph description, and live published date.

.anchor-hover .details {
 opacity: 0;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 390px;
 height: 290px;
 margin: 0;
 padding-top: 10px;
 padding-left: 10px;
 font-size: 1.2em;
 line-height: 1.4em;
 text-decoration: none;
 color: #888; background: rgba(255, 255, 255, 0.85);
 overflow: hidden;
 transition: opacity 0.25s linear 0s;
 -webkit-transition: opacity 0.25s linear 0s;
 -moz-transition: opacity 0.25s linear 0s;
 -o-transition: opacity 0.25s linear 0s;
}

.anchor-hover .details h2 {
 font-weight: bold;
 font-size: 1.5em;
 color: #444;
 text-decoration: none;
 margin-bottom: 8px;
}
.anchor-hover .details p.desc {
 font-weight: normal;
 font-size: 1.2em;
 line-height: 1.3em;
 color: #555;
}
.anchor-hover .details span.pubdate {
 position: absolute;
 bottom: 10px;
 left: 10px;
 font-weight: bold;
 font-family: "Trebuchet MS", Tahoma, sans-serif;
}
.anchor-hover .details span.viewlink {
 position: absolute;
 bottom: 10px;
 right: 10px;
 font-weight: bold;
 color: #bb599e;
 font-size: 1.3em;
}

The .details box is using absolute positioning within the original container. I’ve removed 10px from the width and height so the extra white background doesn’t overlap outside the box(I’m also using overflow: hidden; to counteract this). Again we have the four different transition properties for standard CSS, WebKit Engines, Firefox/Gecko, and Opera. This time the animations are targeting the opacity property with a 25 millisecond animation.

It’s all fairly straightforward and easy to understand if you’ve been using CSS for a while. I’ll admit that transitions can be confusing because of the largely cryptic syntax. But the best way to memorize these properties is through repetition and practice in your own work!

Live Demo – Download Source Code

Conclusion

It is my hope this tutorial acts as a powerful introduction to the world of CSS3 animations. I’ve only covered a couple of different effects you can use. But with the versatile nature of CSS properties it’s so incredibly easy to customize your own animations for practically any HTML elements.

Be sure to check out our live demo example above. And if you want to mess around with my code feel free to download the .zip archive as well. If you have any questions or comments on the tutorial be sure to let us know in the post discussion area below.

Advertise here with BSA

Advertise here with BSA

It can take a lot of additional effort to build mobile-specific website templates. HTML and CSS have come a long way but there are still plenty of standards and loopholes to jump through. And with the mounting increase of various mobile devices there are more platforms now than ever before.

In this guide I would like to share some of the most common tips when designing for mobile screens. The web is a fluid beast constantly changing with the times. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs. The learning process is devious but after a bit of practice you’ll pickup mobile design very quickly.

Streamline Functionality

To really make the layout “mobile” you need to express functionality in an easy-to-use manner. It’s important that your users can immediately navigate the site and find the information they need. It helps to think of your new layout in terms of a mobile app vs. an entire website.

You don’t want to limit functionality as much as rearrange the flow between pages. Reduce scrolling to a minimum and only for vertical content. I find it easiest if you can build with a set number of HTML elements – h1-h3, paragraphs, and maybe some blockquotes.

Any navigation links you use should be placed right top and center of your design. Remember that a compact layout should include many fewer pages than a full-website. Limit yourself with 5-10 content specific page styles at most. Make your fonts big enough to read and add plenty of extra space between paragraphs.

If you’re against re-styling an existing site then it may be worthwhile to build a clone design as your mobile version. I would recommend working off a framework such as 320 and up where you can adapt a more responsive layout. This behavior is useful on the desktop as users re-size their browser windows, but it’s much more useful on mobile displays where you have to deal with countless varying screen resolutions.

Avoid Unnecessary Images

One style to avoid is the use of heavyweight images in your code. For iPhone devices and the many varying Android-based screen sizes it will be difficult to match with pixels. You could try setting image sizes using percentages in CSS – but this method will not always prove beneficial.

You also have to consider that most smartphones will rotate content portrait to landscape view. This can dramatically alter the display resolution so any images pre-sized will have to realign themselves in the layout. This formatting is often more trouble that it’s worth and JavaScript isn’t a realistic solution. Instead if you are using a logo or branding image towards your header/footer it’ll appear much more natural than images sewn throughout the page content.

But when it comes to designing this page content I recommend sticking with standard text. Nothing too flashy and preferably no inline images. As an alternative you could offer images as direct URL links broken up into block areas.

Viewport Meta Tag

Meta tags behave as extra data to be passed into the website rendering engine(along with search engines). When working on a mobile layout you have to consider that each smartphone OS will handle webpages differently. On iOS you’ll notice by default the entire design is scaled out from a normal zoom.

<meta name="viewport" content="initial-scale=1.0, width=device-width,
height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

My code example above demonstrates how you would use this meta tag in your document’s <head> section. This will disable zooming functionality so your reader’s can’t pinch to zoom in or out. Your site will behave exactly as it should on a mobile screen. Alternatively you can set width and height values manually so that your content will squeeze within specific boundaries.

Offer a Full-Scale Alternative

Even the most popular social networking tools like Twitter and Facebook have built complementary mobile companion websites. But one key feature to notice is the ability to revert back onto the desktop style.

Even visitors accessing your website from their smartphone may not be interested in the “lighter” mobile version. If possible you should always offer a link for your visitors to access the full website layout, generally towards the bottom of the page. This means you may need to setup the mobile template in a subdirectory on your web server. Your URL scheme could follow something like http://m.domain.com/ or http://www.domain.com/mobile/.

Simplify your Color Scheme

One other design-related concept is layout colors and positioning. You have to consider which set of colors you’ll be using and how they can affect the readability of your content. It’s typically best to stick with plain white or black for a background. This will give the highest contrast in comparison with your text.

But additionally take into mind that you don’t want to overwhelm your visitors. Mobile screens are much smaller and do not have such a breadth to explore as compared to a desktop monitor or even a laptop. Try slimming your color scheme down to 3-4 solid choices as your “core” design. Adding any more colors and you risk confusion between headings, paragraphs, links, codes, and alternate text.

Building on jQuery Mobile

People often think of jQuery as just an enhanced JavaScript effects library. It’s really an entire framework where you can build rich animations and interactions between page elements. But what’s even better is their jQuery Mobile project which is recently celebrating their 1.0 official release.

jQM is a whole different library built on HTML5 compatibility with all mobile devices (including tablet PCs). The system is touch-optimized turning your website into a collection of base mobile UI elements. These include buttons, lists, navigation bars, and form inputs. Practically anything you can build with HTML5 will be enhanced through jQuery Mobile.

And there is even an exhaustive theming system where you can customize colors and gradients on-the-fly. If you’re normally against working with frameworks I have to suggest giving this one a try before any others. It’s super easy to create multiple content pages and then re-design specific aspects in your template. The jQM team has done an exceptional job supporting practically all mobile browsers and working over HTML5/CSS3 standards.

Related Tutorials

• Designing for Mobile Safari
• How to Create a Mobile Version of your Website
• 9 Tips for Optimizing Your Website for Mobile Users
• Guidelines For Mobile Web Development
• Responsive Web Design: Tailored Layouts For All Screen Sizes

Conclusion

I hope this brief tutorial can get you interested in the arts of mobile web design. It’s a rapidly growing industry that requires support from multiple channels, both web designers & developers. As mentioned before it doesn’t take weeks of studying to learn these new trends in web design – but it does require dedication and a lot of practice.

Continue testing out new layout designs and don’t let yourself get discouraged! There’s a whole tech world buzzing with new web ideas for mobile smartphones. If you know of some great layouts or have similar tips to share please do so in the comments section below.

Advertise here with BSA

Advertise here with BSA

The year 2012 has kicked off with a booming design and web industry. More developers are entering the web than ever before and it’s the perfect time to brush up on your coding. These tutorials I’ve added below are fresh off the presses and will help you catch up on all the latest HTML5 & CSS3 trends. With just a bit of practice you can pickup on all these skills and really improve the quality of your coding standards.

Create A Minimal Single Page Portfolio With HTML5/CSS3

Blowing up HTML5 Video

Rounded Corner Boxes the CSS3 Way

Interactive Typography Effects with HTML5

CSS 3D Transforms

An Introduction To Object Oriented CSS

Sliding Image Panels with CSS3

Create a Sticky Note Effect with CSS3 and HTML5

Build your First Game with HTML5

How to Create Slick Effects with CSS3 box-shadow

Speech Bubble Arrows that Inherit Parent Color

Creative CSS3 box-sizing

CSS3 border-radius and -moz-border-radius

How To Create a Stylish Drop Cap Effect with CSS3

Create a Typography Based Blog Layout in HTML5

Creating a True Inset Text Effect Using CSS3

Advertise here with BSA

Advertise here with BSA

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices.

It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place.

Download Source Code

Getting Started

So without too much delay let’s pop open Xcode! From the main menu create a new project and a series of windows will appear. First you select the application template – I’ve chosen Master-Detail Application since this already includes a navigation controller.

When building iPhone apps you want to focus on your core functionality and build off the components already available. It’s pointless to reinvent the wheel and it just requires more of your time. So now hit Next and you’ll be prompted to give this project a name.

I set the name customNavBar with a company identifier of designmag. The identifier will not affect your application at runtime. It’s more like metadata to keep track of which applications are published under which developer or studio. If you are building for iOS5 make sure Automatic Reference Counting is checked as well as Storyboards.

Hit next, save your new project and we are good to go. Let’s start out simple by customizing the navigation bar’s color setting.

Custom Tint Colors

In Xcode the left pane window contains all your project files. Inside should be a set of MasterViewController .h/.m files. These stand for header and implementation codes which are used to build custom classes.

You don’t need to understand this concept just yet as it’s geared more towards software developers. But we will be working within these classes so it’s good to recognize their purpose. Click once on MasterViewController.m and the source code will appear in your center window.

Now scan the document for a function labeled viewDidLoad. This is a default method called on every view once the page first loads. Here’s a bit of the syntax:

- (void)viewDidLoad
{
// code here
}


Inside the curly braces we want to place a line of code which updates the navigation bar’s tint color. This value can be set using RGB which I’ll explain in the next part. But to keep things simple for now we’ll use the colorRed keyword afforded to us within Cocoa Touch. Here’s the code I’m using inside viewDidLoad:

[super viewDidLoad];
[self.navigationController.navigationBar setTintColor:[UIColor redColor]];

self.navigationController.title = @"Custom Nav";


Working the Navigation Controller

You’ll notice that Objective-C 2.0 has adopted a dot-syntax similar to JavaScript. You aren’t expected to fully understand the code above – it’s especially deterring to newbies who have never used Xcode before. But when I’m calling self.navigationController.navigationBar it’s a target to the internal nav bar inside our controller.

Then the setTintColor method will change the styles of all buttons and elements inside the navigation bar. You may also notice I’ve set the navigation controller’s title property. This is just a plain string of text which appears at the top of your page view.

Build and run the application with CMD+R or click the play button in the top left corner. This will open the iOS Simulator so you can catch a glimpse of how the app will function on a mobile screen. This method works and it’s a great place to start.

However I want to include just a bit more code so that we can use a custom image as the navigation background instead. Quit the simulator for now and let’s pop back into Xcode.

Creating BG Graphics

To save a bit of time I’ve already put together the background images in Photoshop. I’m using a similar design pattern as this indigo nav bar created originally by Jonathan Mulkey. He is a very talented app designer based out of Tennessee.

It’s worth mentioning that we need to create two(2) different image files for the background. Regular iPhone 3/3GS users are on the standard 320×480 pixel grid. However the iPhone 4/4S uses a 640×960 grid fitted into the same physical screen size. This means 1 point = 2 pixels and our images will look much more crisp.

• CustomNavBG.png (320x44px)
• CustomNavBG@2x.png (640x88px)

iOS dev guidelines require that both images are saved under the same name with the larger retina image title appending “@2x” on the end. In our code we will only reference CustomNavBG.png. The Cocoa framework is smart enough to detect when a user is on a retina device and will automatically fill the @2x version instead.

Implementing the Background

The fastest and most proper way to accomplish a custom navigation background is to build a new UINavigationBar subclass. I know this sounds a bit confusing but it’s really a lot simpler than you think.

Right-click(or control+click) on your project in the left pane and select New File. We want an Objective-C Class with a subclass of UINavigationBar. If this isn’t offered in the dropdown menu just manually type it in. You can name this class whatever you’d like – I chose CustomNavBar. Hit “Next” and you’ll end up with a new set of .h/.m files in your project.

All we want to do is overwrite a method named drawRect. This is used to create the original background gradient for any default navigation bar. I’ve added my code below for both of the .h and .m files. It should work perfectly if you copy/paste into your own assuming you are using the same class name.

# CustomNavBar.h codes
@interface CustomNavBar : UINavigationBar

@end


Save any changes in both of these files and then click onto your MainStoryboard.storyboard. This contains all the different views within the application. At the very far left is a Navigation Controller and this is what we’re targeting. Click on the top blue bar and open your Identity Inspector(View -> Utilities -> Show Identity Inspector). This should appear in the right-hand window pane.

Within this new window you should see a class setting with the value UINavigationBar. You want to change this to CustomNavBar or whatever you named your class files in the previous step. Now the navigation bar is pulling from our custom code instead of the default iOS bar.

Build & Run!

If you run the application now you’ll notice our top nav bar is pulling in the background image. Success! But the only problem is when you tap on the table cell it loads a new view which uses a back button. This back button is still colored by the red tint we were using earlier.

Luckily this is a simple fix. We just need to match a purple/grey color from the background image and use this as our new tint. Click back into MasterViewController.m and find the previous code inside viewDidLoad. I’ve taken the liberty of grabbing an RGB value which fits this background color and set each to different variables. Below is my new tint code:

NSInteger red = 95;
NSInteger green = 100;
NSInteger blue = 130;

[self.navigationController.navigationBar setTintColor:[UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1.0]];


We place each color value over the max of 255 and this returns a floating integer. Strictly speaking this is the easiest way to convert RGB from Photoshop into a color in Objective-C. Save and run the project again and you should see much nicer results.

Download Source Code

Conclusion

If you’ve having any trouble be sure to download my demo source code for this project. I’m using Xcode 4.2 with iOS5 which may not convert perfectly down to older versions. But for beginner iOS developers this tutorial should give you a bit of insight into building and customizing your own apps. It’s a truly challenging skill to master yet very rewarding in the long term.

Advertise here with BSA

Advertise here with BSA

In this roundup we have collected 45 outstanding Photoshop tutorials released in 2011. If you like these photoshop tutorials you might also want to check out some of our previous posts below. Enjoy!

35 Amazing Photo Effect Photoshop Tutorials

30 Awesome Photoshop Text Effect Tutorials

Create a Powerful Human Disintegration Effect in Photoshop

Create a Futuristic Bicycle Icon in Photoshop

Design a Detailed Audio Receiver Icon in Photoshop

Create a Medieval Landscape in Photoshop

Character Design for the Boomrock Saints

Create “Cool” Typography Using Paths in Photoshop

How to Create Cityscape Concept Art

Use Photoshop to Create a Still-Life Lamp, Nightstand, and Picture Frame

Design a Conceptual Album Cover in Photoshop

How to Make a Textured 3D Spray Can

Mockup Blister Packaging in Photoshop

Undress a Giraffe in Photoshop

How to Create Dramatic Sci-Fi Photo Manipulation in Photoshop

How to Create an Out of This World, Medieval-Fantasy Themed Photo Manipulation

Create a Fictional Arctic Snow Frog in Photoshop

How to Create Feet Shoes in Photoshop

Create an Intense “Wings of Fire” Photo Manipulation

Design a Retro Typography Poster in Photoshop

Create an Explosive Flaming Poker Card in Photoshop

How to Make Your Photos Look Hipster with Photoshop

How to Develop a Handmade Illustration with Photoshop

Design a Vintage Baseball Card in Photoshop

How to Draw a Classic Electric Guitar in Photoshop

Create a Detailed Vintage TV from Scratch in Photoshop

Design a Retro Postcard with 3D Text

How to Create a Vintage Circus Poster with the Photoshop Puppet Warp Tool

Make a Retro Space Themed Poster in Photoshop

Making a Superhero Movie Teaser Poster

Create an Ice Cream Type Treatment in Photoshop

Nike Hair in Photoshop

Flaming Car in Photoshop by Lincoln Soares

Easy 3D Globe in Photoshop

Captain America Shield in Photoshop

Awesome Amp Controls in Photoshop

Dark Knight Rises Poster in Photoshop

Design a Vintage Style Swissair Travel Poster In Photoshop

“Piece of the Artic” Pie Chart Photo Manipulation

ERODED FASHION PORTRAITS

CREATE SUPER PSYCHEDELIC ARTWORK

PAINT A MULTILAYERED SURREAL PORTRAIT

GIVE A PORTRAIT A COSMIC MAKEOVER

Create a Realistic Blueprint Image From a 3D Object

TYPE THAT’S FIT TO EAT

Vintage Typography Tutorial using Ornamental Styles

Manipulate a Dancer Illustration in Photoshop

Advertise here with BSA

Advertise here with BSA

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

Web v. Print Design

We should start off taking a quick look into both areas. These are two completely different design studies which are frequently secluded from each other. But printers are much more common in the everyday household – so it’s not strange for your visitors to expect pages to print nicely.

Unfortunately you are working with much less space on a plain white sheet of paper. This means oftentimes your layout will contort in very strange ways. You’ll have to be considerate of dynamic content including image galleries, content sliders, tabbed divs, and so forth. You almost need to build a mobile-based template but with even less functionality! Visitors won’t need any of it on the printed layout anyways.

But this doesn’t intrinsically mean you should remove all other media from the page. My recommendation is to keep images within the main content, plus your logo, but remove them elsewhere deemed a distraction. It’s best to remove entire areas of your layout which don’t serve a purpose in print – such as sidebar(s) or an extended footer.

Plain White Backgrounds

This is a crucial topic to mention right from the start. Nobody enjoys wasting their ink, and colored backgrounds in your page will do just that. Make sure you remove all repeating images, background textures, and preferably all solid color BGs as well. Even printing in black and white can make content difficult to read with a multi-colored background.

Obviously the solution is plain white, which will work the best in practically every situation. If you have trouble overwriting the default styles include !important declarations into your print CSS code. Also use this if needed to ensure all text is dark enough to read. Keeping everything plain and simple is generally the best strategy.

Identify the Key Elements

Ponder a bit and consider why your visitors would even be printing out your web pages. Would it be for reading material, or maybe part of an image gallery? This is important since you’ll want to manipulate your layout in such a strategic way.

As an example you may have a sidebar which only holds a small navigation menu, ads, and a signup form. None of these elements are helpful to the printed version of your content – so why not hide the sidebar altogether? Using the CSS display: none; property you can totally remove certain aspects of your page. Similarly you could widen the main content area so text will fill up more space, thus printing out less pages.

For some websites it may be too much work to recreate an entire stylesheet from scratch. This is especially true if you visitors wouldn’t mind keeping the same layout in printed form with just a few minor changes. For this task you can incorporate CSS media queries which target print devices only.

Stand-Out Links

Hyperlinks will surely be sprinkled all about your documents. These aren’t entirely important in printed context, but you should keep them distinguished just in case people re-visit your website looking for more reading. You could stick with the standard blue/purple colors which also appear great in black & white print.

Believe it or not we can also manipulate direct hyperlink URLs right into the page using CSS2+ properties in compliant browsers. A List Apart provides some good code examples of this even using relative URL schemes(ie. /articles/2011/mypost.html).

body a:link:after, body a:visited:after {
content: " (" attr(href) ") ";
font-size: 10%;
}


This will insert both parentheses in quotation marks and the href value directly after the hyperlink text. It’s a great way to provide printer-friendly support for links on your website. Note that for this to work properly you should be using full URLs which include the root domain of your site.

Using CSS Media

To first clarify there is a difference between the @media query and the HTML media attribute. Both of these delineate between printed CSS code, but @media is included within the document itself.

<link rel="alternate stylesheet" href="css/print.css" type="text/css" media="print" />

In the example above we’re looking at an alternative stylesheet which you would include into your document header. The media attribute means these styles will only be applied when the page goes through a print action. So you won’t actually be able to test these without printing a live copy. But how else could you check the results realistically?

<style type="text/css">
@import url("css/print.css") print;
</style>

If you’re trying to keep print styles running in modern browsers you could also use the @import statement. This is just another alternate way of including print-specific code. But you won’t be mixing up alternate stylesheets as this bit of code is overlooked in legacy browsers.

Otherwise CSS Media is definitely an option, albeit targeted towards thinner stylesheets. These media queries can be included directly into your default stylesheet – so it’s best to keep them below 15-20 lines of code. The difference is how properties would cascade depending on which document you’re using. Some styles may overwrite your new rules or ignore them altogether. In general it’s best to keep these two document styles separate whenever possible.

Direct Page Margins

There is one more technique which doesn’t appear in too many CSS resources. Using the @page method along with a class of selectors you can apply new printed margins on the outside of your content. I’ve included the basic code syntax below:

@page selector {
margin: 0.5in;
}


The selector code is optional and can use either :first, :left, or :right to target the first page only, or the left/right margins on all pages respectively. In my example above we’re using the standard margin property to expand on all sides by half an inch. You could also use centimeters(cm) if the units fit your layout better.

If you want to check out some further reading I highly recommend WebDesigner Depot’s post from back in 2010. It includes a lot of reference guides and great tactics for using page margins by default. These properties aren’t exactly “beginner” material, but the information is easy to pickup and with practice you’ll retain the knowledge very quickly.

Conclusion

Regardless of how you include the styles or what changes you makes on the page, having any type of print stylesheet is better than nothing at all. It offers your visitors an easy way of taking your content portable without the need for a mobile device. And since CSS makes it so easy the entire conversion process can be completed in an afternoon. If you have similar ideas for print-based CSS styles please share with us in the discussion area below.

Advertise here with BSA

Advertise here with BSA

In this roundup we have collected 44 outstanding photoshop tutorials. Enjoy these over your holiday!

Design a creative portfolio in Photoshop

How to create a colorful business web layout

Create A Detailed Solid Dark Layout In Photoshop

How to create a One-Page Website Design in Adobe Photoshop

Design a Drupal Business Theme in Photoshop

Create a Clean Magazine & Blog Theme

Design And Develop A Complete Website

ShutterPress: Design & Code A Photo Portfolio

Design a Sleek, Dark Mobile App Website 

Create a Sleek, Corporate Web Design

Design a Fresh Web Service / SaaS Website Interface
 

Learn How To Create A Mobile App’s Style Layout

Corporate & Portfolio Style WordPress Layout

Learn To Create A Gaming Layout In Photoshop

How To Create a Blog Theme Concept in Photoshop

Sleek Portfolio Layout

Learn To Create A Clean Style Portfolio Layout

Create a Modern Lab Theme Web Design in Photoshop

Design a Grungy Newspaper Web Layout in Photoshop

Creating a Clean Furniture Website and Gallery Layout in Photoshop

GD-Gaming: Create a Simple Gaming Layout in Photoshop

Create A Dark, Clean Website Design In Adobe Photoshop

Create a Comic Book Themed Web Design

Design An Innovative Portfolio Site Using Alternative UI/UX

Create A Wickedly Cool Horizontally Oriented Website Design

Create a Clean and Minimal Portfolio Design 

Create an Illustrative Single Page Web Design With Photoshop

Design a Professional, Clean Community Blog Theme in Adobe Photoshop

The Making of CoffeeAddict: An Illustrative Wood Design 

Create a Minimal WordPress Theme in Photoshop

Learn How To Create Modern Dark WordPress Layout In Photoshop

How To Create a Sleek Grid Based Website Design

How to create a vintage Photoshop file

Create an Elegant Patterned Web Design in Photoshop

Create a Clean, Minimal Website Design in Photoshop

Design a Cool Pixelated Website Layout

Create a Light Textured Web Design in Photoshop

Design a Clean Corporate Website Layout

Create a Professional App Store Web Layout

Create An Amazing Personal Website From Scratch Using Photoshop

Learn How To Create A Web Gallery Style Layout

How to Create a Professional Web Layout in Photoshop

Design a Textured Outdoors Website in Photoshop

Create a Portfolio Web Layout in Photoshop

Advertise here with BSA