WIXLIB

Responsive Web Sites using Dreamweaverpage 1Building a Responsive Web SiteiPadMacBook ProAs of April 2012, the Pew Research Center found 55% of adult cell owners use the internet on theirmobile phones, nearly double the number of just three years prior. Thirty-one percent of current cellinternet users say that they mostly go online using their cell phone, and not using some other device suchas a desktop or laptop computer. That works out to 17% of all adult cell owners who are “cell-mostlyinternet users”—that is, who use their phone for most of their online browsing. Some statistics show arate of mobile internet usage jumping as much as 200% per year. Furthermore, statistics also show thatusers prefer reading information in a native web browser, rather than through a site-specific app.With trends like these, it makes sense to consider a version of your website tailored for mobile devices.This means both in design and content. Why? Some mobile browsers simply shrink the standarddesktop display to a size that fits the user’s mobile screen. Not only can it be difficult to see, butnavigation can become a challenge, as text links are small and difficult to hit accurately. Some sites usenavigation with drop down menus that are activated on roll over; rollover functionality doesn’t work on atouch screen.The Responsive SolutionInternet users now browse on a wide variety of desktops, tablets, and mobile devices. There are severalhundred devices out there, each with varying screen dimensions and many with both portrait andlandscape viewing options. Since it’s not realistic to build individual sites for each device and orientation,one option that’s been gaining ground in the past several years is the idea of Responsive, or Adaptable,Design. Based on a 2010 article by Ethan Marcotte ponsive Design reflows the content of a web site based on the user’s screen size, platform anddevice orientation.illustration by kristen n. br

Responsive Web Sites using Dreamweaverpage 2How does it know?CSS2 introduced the @media rule, allowing designers and developers to target style sheets for variousmedia types, such as screen, print, tty, and even handheld. But with the explosion of mobile devices onthe market (over 400 different types were introduced between 2005 and 2008), a single set of handheldstyles wasn’t enough. Additionally, many mobile browsers bypassed the handheld styles to display themore recognizable and familiar screen styles.With the introduction of CSS3, the media attribute has new values that can test the device’s screen size,orientation, even its resolution, by asking a series of true or false questions. These types of true/falsequestions are called queries, so we refer to these as media queries. These are written into the CSS as@media rules.For example, is the media type a screen? Is the screen at least 480px in width? Based on the “response”to the query, the browser will display the corresponding set of styles. The adaptations can include almostanything, but typical adaptations are to layout, text sizes, image sizes, and sometimes hiding contentblocks on smaller screens.@media screen (min-width: 481px, max-width: 768px, orientation: portrait) { styles }While media queries can be broken down in multiple ways, Adobe’s Dreamweaver CS6 sets up 3 basicstyle sheets for responsive sites — mobile, tablet, and desktop.Fluid GridsOne of the best ways to reliably reformat layouts for various formats is to use something called Fluid Grids.A lot of graphic design is based on grids — newspapers, magazines, websites, brochures, catalogs, etc.The concept is that underlying a layout, there is a grid of evenly spaced columns. The space between thecolumns is called a gutter. Layout elements line up with the horizontal and vertical rules in the grid. Thishelps to create a coherent and organized structure, even if the grid is invisible to the viewer.

Responsive Web Sites using Dreamweaverpage 3Go to 960.gs/demo.html to view a standard web design grid. Go to goldengridsystem.com/ orprofoundgrid.com/examples/fluidresponsive.html to see how this concept works when it’s flexible.Things are elastic; they change width, height and even move around, depending on how far you openyour browser window.Stationarylayout gridFluidlayout grid:DESKTOPFluidlayout grid:MOBILEFluidlayout grid:TABLET

Responsive Web Sites using Dreamweaverpage 4The Math PartFluid grids define the width of columns and gutters by percentages, rather than by a fixed width ornumber. The key: the grid is resized based on whatever 100% of the device width is.This concept is very similar to font size written in ems. Rather that being a set pixel height, the size isproportional, with 1em being determined by whatever the user sets as the default browser size.Example: A user sets the browser’s default text size to 16px. That’s ourcontext. With paragraph text at 16px, we want the h1 tag to be 24px, sothat’s the target size. Divide 24 by 16 and the result is 1.5, or 150%.24 16 1.5To make that more generic, let’s use the words instead.target context resultThis same formula is what Dreamweaver’s Fluid Grids apply to columns. Taking the 960 grid example(which is the context), we want to determine the percentage of the 780px space (which is the target) inthis grid, use the same formula:780 960 0.8125, or 81.25%The same number of columns on a 1024px wide screen is 832.Creating a New Document1. Define a site and images folder, like any other site.2. There are three ways to start a new Fluid Grid Layout:a. Welcome Screen, choose Fluid Grid Layout from the Create New column in the centerb. File New Fluid Grid Layoutc. File New New Fluid Grid LayoutThree sizes appear in this New Document window. These correspond to the 3 CSS media queriesDreamweaver will automatically set up:a. Layout intended for Mobile, which will be screen sizes up to 480pxb. Layout intended for Tablets, which is 481px to 768pxc. Layout intended for Desktop, which is 769px or larger

Responsive Web Sites using Dreamweaverpage 5The number in the center of the screen icons for each size of the number of columns for each layout.a. Below the mobile one is the percentage of column width. This applies to ALL layouts, notjust mobile. For this layout, change column #s for desktop to 12, mobile to 4, and gutter width to15%. These are more easily divisible into even columns.b. Percentages below each screen icon is the percentage of the whole screen the layout will take.3. Click Create.Before you can even view the layout, you’re forced to save a CSS file, which will include the mediaqueries and any additional CSS I create relating to different sizes of divs on the page.a. Default opens to the mobile layout, because this is the first media query it uses.b. M any in the design and development community believe you should test for and design formobile first, as it’s a rapidly increasingplatform. A March 2013 article noted mobilebrowser usage tripled in three yearsand jumped 26% in the first threemonths of 2013.4. Save your page as index.html. You’ll be asked tosave the related files. Make sure these save to yoursite root folder.a. boilerplate.css acts like a “reset” CSS, inthat it tried to level set everything to a neutralfield in all browsersb. r espond.min.js is a minified javascript file which helps provide the flexible response.5. Be sure to give the page a title!

Responsive Web Sites using Dreamweaverpage 6Adding DivsFor the sake of showing the difference in divs, for the purposes of this lesson, switch to the desktop view.1. Making sure to select after the default #LayoutDiv1, but inside the container div with the class“gridContainer clearfix”, you can insert a Fluid Grid div two ways:a. Menu Bar Insert Layout Objects Fluid Grid Layout Divb. Insert Panel Layout mode Insert Fluid Grid Layout Div2. Name the div logo (this is an ID). Default is checked forStart new row. Leave this checked for the logo div.a. New rows have a margin-left value of 0 and a clear propertyof both.3. Using the tag selector, select, then delete the default #LayoutDiv1.4. Open CSS panel and notice that each of our divs is in thealamode styles.css three times! This happens every time you adda new Fluid Grid Layout Div.a. Once for mobile section, which is first in the CSS codeb. Once for tablet sectionc. Once for desktop section.A Pause to Review the Fluid CSSUsing the related files panel, open the alamode styles.css and review the code, including the comments.The first thing the CSS does is set the max-width to 100% for image, object, embed, and video tags.Later you’ll see that because we’ve defined this as a fluid grid page, Dreamweaver automatically brings inthese items without pixel dimensions. This allows these items to scale proportionally with the rest of thesite.Notice that the number of columns and the gutter percentage are listed in the comments, so if you’reworking on a site someone else developed, you’ll know what grid this is based on, even without openingup the files in Dreamweaver. If you scroll down, you can see various percentages that Dreamweaver hascalculated for the various elements.Next you’ll see styles, beginning with the mobile size, in keeping with the concept that mobile designcomes first. Notice there isn’t even an @media rule applied. Whatever styles we set here will be carriedon throughout the other variations unless we override them, based on specificity OR simply that theycome later in the CSS document, which you can see by scrolling down to find the @media sets for tabletand desktop.

Responsive Web Sites using Dreamweaverpage 7Back to the Layout1. Delete all three CSS instances of the #Layout 1 div you deleted earlier in the design. (You may have toright click or use the trash can icon at the bottom of the CSS panel to delete these.)2. Insert a new Fluid Grid div, but this time uncheck the Start new row box. Name this nav.a. Notice if I uncheck start new row, the div is slightly indented and the outline color is yellow.b. I f divs don’t start a new row, they have a percentage applied to the left margin, which is a gutterand the clear property is removed. These can act as columns, once we resize them.3. Insert a new Fluid Grid div with Start new row checked. Name it ingredients.4. Insert two more Fluid Grid div with Start new row unchecked. Name them patio and sandwiches.5. Insert one last Fluid Grid div with Start new row checked. Name it footer.6. Save your work.Resizing Divs for the Desktop View1. S elect the logo div. In Design View, select the handlebars ON THERIGHT, and resize by pulling the right edge to the left until the pop uphint box says 3 columns.a. Notice that the div will snap to the grid!b. T o select from the left and pull right increases the margin-leftproperty, rather than changing the size of the div.2. Select the nav div. Grabbing the right side, resize this down to 9 columns. The div automatically popsup beside the logo div, since they are now small enough to float side-by-side.a. If you’ve mistakenly made your new divs to start a new row, you can change thediv to an indented one by clicking the “up” arrow on the top, right corner.b. C onversely, if you need a div to start its own row, then the arrow will be a “down”arrow. Dreamweaver will automatically show you the arrow for the opposite choice.3. Resize the ingredients, patio, and sandwiches divs to 4 columns each. The shouldsnap up to make a single row in the desktop version. The footer div will remain on its own,across the bottom of the entire site.4. Save your work.5. Tips:a. If you make a mistake, clicking undo doesn’t work if you’re in the source code. Switch over tothe alamode styles.css. It may seem counter intuitive, but that’s where you’re making changes.b. T o view without the background grid, go to the Visual Aids (The eyeball icon) and turn off FluidGrid Layout Guides.