Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From 16.50/m Advertisement # Build a Sleek, Dark Mobile App Website Difficulty:IntermediateLength:LongLanguages: Not long ago, on Webdesigntuts+, we demonstrated how to design a sleek mobile app website interface in Photoshop. Today, we'll take the next step by creating the necessary markup and CSS for this design. ## Step 1 - Getting Started Before we jump in, let's get our basic workspace setup by opening your favorite text editor (I'll be using TextMate) and Adobe Photoshop (I'll be using CS4). Next, we're going to create the file structure our site will use. The structure I'll be using is quite universal and I find myself almost always starting with a variation of this. • images/ - The directory where we will place all of the images for our site. • index.html - The main page for our site. • javascripts/ - The directory where our JavaScript files will be stored. • stylesheets/ - The directory where our stylesheets will be stored. ## Step 2 - Basic Layout Let's get started by setting up the initial structure for our HTML and CSS. This will include the main HTML containers and some essential CSS properties. Essentially, our site will consist of three vertical rows of content, #app_info, #app_details, and #footer, each being a direct descendant of the <body> tag. Also, each of these three <div>s have a class called container assigned to it which will impart some basic styling to the containers including giving them a fixed width and aligning them properly. Next, let's create a file in our stylesheets/ directory called site.css and add the following CSS: Here we are defining styles for the <body> tag including the default font styles for our site, in addition to defining the corresponding CSS for the .container class. You'll also notice an area with the text /* --- Global Styles --- */. This is a CSS comment, which we'll be using more of throughout the tutorial to help automatically organize our stylesheet as it grows. ## Step 3 - Slicing the PSD The next step is to slice our PSD using Adobe Photoshop. You can get the full PSD file and a tutorial on how to design it over at Webdesigntuts+. To create our slices, we will be using the Slice Tool (Keyboard shortcut: C). These slices will be saved within the PSD and will make it much easier to update the images of our site later on. After each slice we create, we'll be using the Save for Web & Devices feature of Photoshop (accessible through the "File" menu) in order to save each individual slice into the images/ folder we created in Step 1. Options for each individual slice can be defined through the small checklists below each slice instruction. To assign the slice a name, you'll need to double click on the slice in the Save for Web & Devices. ### Background Texture The first slice will be for the textured background. This slice is a bit tricky given it's a pattern and can often look choppy or uneven if sliced incorrectly. First, open the layers panel in Photoshop and hide all the layers except for the layer entitled Background. Then, grab the Slice Tool (C) and create a 200x200px slice starting from the absolute top left corner of the document as seen below. Name this slice: texture. Save as a JPEG at 80% quality. ### Spotlight The spotlight graphic is the next asset we're going to tackle. For graphics like this, where it's difficult to tell where exactly the edges are, it's a good idea to find the layer in the layers panel, Right-click the layer thumbnail and click Select Pixels. This will give you an outline telling you exactly where the layers edges are. Now, you can trace this outline. Name this slice: spotlight. Save as a JPEG at 80% quality. ### iPhones For our iPhones, we'll need to unhide the folder named iPhones. Once these are visible again, create a slice that encompasses both phones keeping the slice as close as possible to the edges of the phones. You should end up with a slice with the size of around 420x625px. Before saving, hide the Background and Spotlight layers in the Layers panel (this will create a transparent background). Name this slice: iphones. Save as a PNG-24. ### Logo Next up is our logo. Unhide the folder App Description, create a slice around the logo that measures 315x80px in size. Try and get as close to the logo edges as possible. Using the Zoom Tool (Z) helps for this step. Before saving, hide the Background and Spotlight layers in the Layers panel. Name this slice: logo. Save as a PNG-24. ### App Store Button For the app store button, unhide the folder Download Button, then right-click the folder and select Duplicate Group. Under the destination select New and click OK. This should open a new document with a copy of the download button. Duplicate this group once again, this time, don't change the destination. Apply an Outer Glow effect to the "Button" layer in the duplicated group with the settings: 22% Opacity, #FFFFFF, and 13px Size. Move this duplicated group 30px under the original. Finally, select Image > Trim... and click Transparent Pixels then select all the check boxes under Trim Away and click OK. We should end up with an image that looks like this (known as a "sprite"): Save this as a PNG named app_store.png into the images/ folder. ### Horizontal Separator The horizontal separator is the 2px line that appears under the iPhone's description and above the footer. Unhide the Line Bottom and Line Top layers and zoom into the top lines (below the iPhones) at about 700% and draw a 1x2px slice. Before saving, hide the Background and Spotlight layers in the Layers panel. Name this slice: h_separator. Save as a PNG-24. ### Screenshots For the screenshots, we're going to create four equal slices of 185x130px around each screenshot. Before saving, hide the Background and Spotlight layers in the Layers panel. Give these slices relevant names. Save them as PNG-24. ### Bullets Since all the bullets are the same, we only need to slice out the first one. Zooming in to around 400%, create an 18x18px slice around the bullet, this size should account for the "glow" effect that has been applied to them. If you realize the bullet is not centered within the slice, feel free to move the slice around by dragging it with your mouse or using the arrow keys. Before saving, hide the Background and Spotlight layers in the Layers panel. Name this slice: bullet. Save as a PNG-24. ### Footer Icons To slice the icons used in the footer area, we're going to repeat the steps we did when creating a sprite for the App Store Button. Start by selecting the four footer icon layers in the Layers Panel (The layers are named: Twitter, Help, Download, Copyright and located in the "Footer" folder). Then, select Layer > Duplicate Layers. and under the destination select New and click OK. On this new layer, you may notice the icons are nearly invisible, so, it helps to create a blank layer, position it to the bottom of all the icon layers and use the Paint Bucket Tool (G) to fill it with a solid color (I chose #000000). Next, we need to arrange the icons directly under one another (no spaces), to form a vertical line like so: Save this as a PNG named icons.png into the images/ folder. Now that we have all of our images saved in our images/ directory, we can proceed to finish the rest of our markup. ## Step 4 - Background Images To continue with our markup, we start by adding in the texture and spotlight images. This step requires CSS only, since the initial HTML we created in Step 2 already has the structure we need for this step. Let's modify our stylesheet to reflect the changes: • First, we add the background property to the already present body tag telling our image to continually repeat in both directions starting from the top left of the page. • Then, we've added the spotlight by attaching it as a background image to the #app_info <div> defined as div#app_info. We've also defined an overflow: auto property which will ensure the div stretches to fit our content (this is an alternative to using the "clear" CSS property). Now we can preview our page and it should look like this: You may be confused as to why you aren't seeing the spotlight image. This is because we haven't added any content into #app_info <div> (where the spotlight is assigned) nor have we set a height property for it, thus our browser automatically thinks the height is 0px. But don't worry, as soon as we start adding content the spotlight will appear. ## Step 5 - iPhones Graphic Now let's add our iPhones. For this, we'll need to modify our #app_info structure by adding a <div> for the graphic. • Here, we've added <div class="phone"> which will be left completely empty. Its height, width and background image will be set via CSS. Next, add the following CSS into your stylesheet: 1. The background property sets the iPhone graphic as the background of the <div>. 2. The float property tells our <div> to position itself leftmost of whatever parent container it is in. 3. Lastly, the height and width properties are set to match our graphic's dimensions exactly. Here's what our page should look like so far: ## Step 6 - Logo & Description To add in our logo and app description we're going to modify #app_info's structure again. • The first element added is the <div class="info"> container. This entire container will be positioned to the right of the iPhone's graphic. • The h1 tag will be the container for our logo where its text will be hidden and it will be assigned with our logo image as its background using CSS (This has some SEO benefits). • The last element is a simple p tag with some placeholder text. The CSS for this section is below: Here is a breakdown of the above code: • The first block, div#app_info div.info contains a float property (to align our info container to the right), a width property and a margin-top property to give us some spacing on top. • The next block is for our h1 tag. The first properties, height and width, are set to the dimensions of our logo image. The next property, text-indent, is going to hide the text within the h1 tag by indenting it out of the view of our browser window. Then, we use the background property to set the logo image as the h1's background. • The last element defined is our p tag. For the first two properties, font-size and line-height, we're going to get these values directly from the PSD. Next is text-shadow, which is a CSS3 property that will give our text a bit of dimension. Lastly, we're going to position the text using some margins (for top and bottom). Here's what our page should look like so far: ## Step 7 - App Store Button To complete the #app_info container, we're going to add in the app store Button. Below you'll find the completed #app_info section along with the added button code: • First, the button elements are contained inside a <div> with the class of app_store. • Next, we add an <a> tag with the link to buy our app. Below is the corresponding CSS: • We start by defining some basic styles for the <div class="app_store"> container. These include some margins (on the bottom and left), height and width (set to the button's dimensions). • Next, for the <a> tag, we set the height and width to 100%, essentially making it the same size as the .app_store container. Then, we use the display: block property, without which the height property would be ignored. Using opacity and filter we set the opacity to 0% (the filter property is for IE browsers only). We also make use of text-indent to indent the text within the <a> tag out of view and lastly, setting the background image to the same as value as the .app_store container, but this time the positioning is set to bottom. • Since IE browsers don't support transparent PNG's, we can't apply the JavaScript "glowing" effect that we'll be creating later to IE. As a work around, we're going to create a regular hover effect by removing the filter property on div.app_store a:hover. Here's what our page should look like so far: ## Step 8 - Adding Some Spacing The last step for the #app_info area is to add some top padding. Let's do this by modifying our CSS and adding a padding-top property: Now we should have some much needed spacing between the start of our site and the top of the browser window: ## Step 9 - App Details Setup We can move on to the #app_details area now. We'll need to implement the horizontal separator line as well as other essential properties for the #app_details container. Add this section to your stylesheet: • Firstly, we add in our horizontal separator line as a background image to the #app_details <div> and ensure it is repeated horizontally with repeat-x. • We also add some padding for the top and bottom of the line and container contents. • Lastly, the overflow: auto property will ensure the <div> stretches to fit our content. Here's what our page should look like so far: ## Step 10 - Screenshots For the screenshots area, we're going to arrange our thumbnail images in a grid, add a slick hover state, and later, enhance the hover effect with some Javascript. Let's start by creating an unordered list for the thumbnails. Below is the HTML which gets inserted into the #app_details container. This may seem like a lot of code for a simple list of images, but not to worry, below you'll find a breakdown of each line: • The first element we've inserted is <div class="screenshots">. This is the container for our screenshots and will be assigned several CSS properties for alignment and spacing. • Next we have an <ul> tag which opens the unordered list. • Then, each individual thumbnail is wrapped in a <li> tag. Inside each <li> there is an <a> tag that has both a rel and title property (these will be utilized later with Javascript). Next, is the image itself in a simple <img> tag. We also have a blank span tag which will be used to create a "hovered" state for the thumbnails. • There are also a few classes assigned to the last three <li>'s which will be assigned some CSS to fix the spacing and padding issues. Below is the CSS for this area, along with a line-by-line breakdown: • The first declaration, targeting div#app_details div.screenshots, defines a width, some padding, adds a border to the right side and floating the entire element to the left. • Next, we have div#app_details div.screenshots ul. By using the list-style: none property, we're simply saying we don't want to use the browsers default bullets for our list. • Then, each <li> in our list is set to float left (which will automatically create a grid for us). Then we space them out using margin on the right and bottom. Also, added is a position: relative property, which is needed for our hover state (more on that below). • The .right and .bottom classes are here to overwrite the margin that were applied by the CSS targeting div#app_details div.screenshots ul li. By adding these classes, we won't encounter extra margins at the end or to the right of our list. • Lastly, we create the style for the <span> tag (which will act as the hover state). This includes a height, width and background property (the magnify icon used can be found here). In addition, we are positioning this span element over our image using the position, top and left properties, then finally hiding the element using the display property. If this seems a bit confusing now, it will definitely make more sense once we add the corresponding Javascript later on in the tutorial. Here's what our page should look like so far: ## Step 11 - Feature List Next order of business is to add the list of features of our app using a simple unordered list and some custom bullets. Below is the HTML for this section which will reside inside the #app_details <div> directly below the .screenshots container that we've completed in Step 10. • We're starting out with the container <div class="features"> that will be assigned alignment and padding properties via CSS. • Next is a simple h2 tag that will act as the title for our list. • Below that, we start our first list with a <ul> tag and define each row with <li> tags and our text. • Just like above, we add another h2 tag and create another list with some more text, this time a list of our app's requirements. The CSS for the above section is below: • For div#app_details div.features we've defined a width, padding and floating the entire element to the right (aligned parallel to the screenshots). • The title h2 title tag is defined next. • Then we add a list-style: none property and some margins to the <ul>. • Lastly we define a few properties for each <li>. These include the color of the text, font size, and most importantly, setting our bullet image as the background. We're also going to use padding and margin to get the positioning of things just right. Here's what our page should look like so far: ## Step 12 - Footer Links • First, our footer links are wrapped inside a <ul> tag. • Next, each individual link is wrapped inside an <li> tag with a class corresponding to the link's icon. We will be using CSS to assign the correct icon to its link. • Lastly, we define an <a> tag with the link's URL and relevant text. We've also wrapped certain words in <span> tags which we will later use CSS to add some color to. Below is the CSS for the footer section: • We start out by defining styles for the footer <div> which includes some padding at the top and bottom and setting the background image to the horizontal separator (the same used in the app_details <div>). • The declaration targeting div#footer ul tells our <ul> element not to use its default style. • Next, we define styles for each of our <li>'s by targeting div#footer ul li. These styles include floating each <li> to the left so they are horizontally aligned, setting a fixed width for each, and adding some spacing using margin. • For each <a> tag within the <li> tags, we've set some basic font properties for size, color, line height, etc. Then we've added some padding to the left where the icon will be located. The height is set to the height of one of the footer icons in our sprite. Next we're using display: block, since without this, our height property would be ignored. Then, we define the background image to our icons sprite and positioning it to top left. Lastly, we've set the opacity property (the filter property is for IE browsers only). • In the HTML for this section, we've wrapped a few words in a span tag and using div#footer ul li a span, we've added a color property to highlight these wrapped words. • When the <a> elements are hovered, div#footer ul li a:hover will set the opacity on the <a> element to 1.0 (100%). • The last four lines pertain to setting the correct background position for each icon in the sprite so they correspond correctly with our link list. Here's what our page should look like so far: ## Step 13 - Javascript Enhancements The last addition to our site will be some Javascript that will enhance a few key areas including a glowing hover effect on the app store button, a hover effect for the screenshot thumbnails, and a "lightbox" effect that appears when a screenshot is clicked. Let's start by downloading a few Javascript libraries we're going to need, all of which can be downloaded for free using the links below: • jQuery - jQuery is a popular Javascript framework that we will be utilizing. Once downloaded, add the file named jquery-1.x.x.js into your javascripts/ directory (where 1.x.x is the current version number). • FancyBox - FancyBox is a jQuery plugin for displaying images and other content in a "lightbox" that floats over a web page. Once downloaded, copy the directory called fancybox into the javascripts/ directory. Next, we need to append the files we just downloaded into the <head> area of our HTML file: • The first new line added is the stylesheet for the FancyBox plugin. • Next, we've imported the jQuery JavaScript library. • The FancyBox plugin is added next. • Lastly, we've imported a custom JavaScript file we are going to create below. Create a file in the javascripts/ directory called site.js and in this file paste the following code: Let's deconstruct the above code line-by-line: • The first bit, (document).ready, is a function that encompasses all of our JavaScript code. This function ensures our page is loaded and ready before the code it contains is executed.
• Next up, we create the function for creating a "glow" hover effect on the app store button. We first check to see if the browser supports opacity animation using if($.support.opacity). Then we're selecting the button element with $('.app_store'), attaching a hover() event and finally executing the animate function to fade our glowing button in / out when hovered.
• We use the var tag to create a global variable for our screenshots container. This will create a JavaScript instance of our screenshots <div> for later use in our code. If we choose not to define a global variable for our screenshots div, we would have to manually select the element ,using \$('div.screenshots'), each time we need to manipulate it or something within it.
• Initializing the FancyBox plugin is up next. By using screenshots.find('a') we are automatically selecting all of the <a> tags in our screenshots area and applying the FancyBox plugin to them. We have also defined some options for the plugin here.
• The last block of code creates the "hover" effect for each screenshot. Every time a screenshot is hovered (using screenshots.find('li').hover) we fade in the <span> element that's inside each of the screenshot <li>'s.

## Finished!

That's it! I hope you've enjoyed this tutorial and can apply some of the various techniques to your next coding projects. Also, as always, when converting a design to HTML/CSS, be sure to periodically check other browsers between steps to prevent some headaches later on. Thank you so much for reading!