WDV 331 Dreamweaver Applications

Designing Websites for Mobile Devices

Dreamweaver CS6Chapter 11

Todays Web Developers Problem

• Many devices to view the web site.– Desktop– Laptop– Tables– Smart Phones– Future ????

• Different screen sizes.• Different Resolutions.

Multiscreen Preview

• NOT IN DW CC !!!!!!!! – File Multiscreen Preview 3 sizes– Not Displayed in real size

• Tip book pg. 507• Shadow ------- Adobe Edge Inspect CC• Preview & inspect web designs on devices• http://html.adobe.com/edge/inspect/

Previewing Other Resolutions

• Lower right of document screen– 3 window size icons– Window size menu

Media Queries

• A “query” -a question asked of a web browser: “Is your screen 320 pixels wide?” If the answer is Yes, the browser launches a style sheet you created for size device

• The code < link href =" css/ phone.css" rel =" stylesheet“ type =" text/ css" media =" only screen and (width: 320px)" >

• Book page 510 kindle 10942

Media Queries 2

• Dreamweaver’s Media Queries Tool.– Choose Insert → Media Queries. – Choose Modify → Media Queries.

• < script src =" respond.min.js" > </ script > Forces IE 8, 7, and 6 to understand media queries. Dreamweaver CS6’ s new Fluid Grid Layout adds it.

Media Queries 3• CSS3 media queries can do more than just check the

width of a browser. • The current Media Queries - check for:– height, – orientation (whether a visitor holds a mobile phone upright

in “portrait” mode, or sideways in “landscape” mode), – whether a device uses a color or monochrome screen. – a few other browser characteristics- but not all browsers

support the queries, and Dreamweaver doesn’t provide any direct support.

– learn more about media queries at the W3C website: www.w3. org/ TR/ css3-mediaqueries

Dreamweaver CS6’ s Approach to Media Queries

• Figure 11-5. Dreamweaver’s Media Queries tool lets you attach multiple style sheets — each for a custom screen width — to a page (top). – requires a line of code for each style sheet you create — for

example, three style sheets need three links on the web page.• Alternatively, attach a site-wide media queries file to

each page on the site. – file contains links to the other style sheets (bottom). To

target another device with another style sheet, add one more line of code to the site-wide file, instead of editing every page on your site.

Figure 11-5

Lab -Create Site Wide Media Queries

• Using a Site-Wide Media Queries File• Book Page 513-519• Kindle 11024 - 11139

Strategies for Using Media Queries

• What’s the best way to make your site mobile-friendly? – Most site pages are just too wide to look good on

a mobile phone. – It’s impossible to read on a phone without

zooming in and dragging the page around.• Web designers use a few techniques for

mobile design: • Book page 518 kindle 11144

Web designers techniques for mobile design: 1

• Remove columns.– Multiple side-by-side columns look great on a big monitor

(and even on a tablet in landscape mode), but not so much on a phone.

– Remove the floats to stack a page’s content divs one on top of the other.

• Remove widths.– If you use a fixed-width design, your pages won’t look good on

a phone.– Set all the widths of your content divs to Auto or 100%. This

converts your page from a fixed-width design to a liquid, or flexible, design.

Web designers techniques for mobile design: 2

• Tighten up white space. – Excess white space creates a scattered design and

wastes space on a phone’s small screen. • Shrinking margin and padding values– lets you fit more onto those small screens.

• Shrink fonts. – Large fonts take up too much room on handheld

devices. Change the fonts so they’re smaller but still readable.

• Hide content.

Web designers techniques for mobile design: 3

• Use background images.– 960-pixel banner no phone will display it without

zooming out. – images are small enough to fit inside a phone’s

screen – use CSS background images instead

background image example

• create a div and add a class to it like this: < div class =“ logo” >.

• Then, in the style sheet for the desktop browser, set the div’s width and height to match the size of the large logo, using the Background-image property to insert the image into the background.

• .logo { width: 960px; height: 120px; background-image: url( images/ large_logo.png)

“fluid images” technique

• Web designer Ethan Marcotte suggests another way to deal with images in mobile design. His “fluid images” technique is described at http://unstoppablerobotninja.com/entry/fluid-images.

• Also http://alistapart.com/article/fluid-images• Fluid images are part of the “Responsive Design

Approach” used in the new Fluid Grid Layouts tool described on Adding Styles to Media Query Style Sheets . Book page 521 kindle 11203

Organizing Your Style Sheets for Media Queries

• So how do you actually resize your site based on screen resolution?

• There are several approaches: Create separate style sheets for each device. Book 520 K11173

• Use a master style sheet and then individual style sheets for each device. Book 521 K11188

Adding Styles to Media Query Style Sheets

• Dreamweaver’s Media Queries tool simply add the media query needed to load a specific style sheet for a specific device.

• Media Queries merely control when a browser uses a specific style sheet — the actual style sheet (phone.css, tablet.css, desktop.css) is otherwise the same as any other external style sheet.

• You use the same Dreamweaver tools to add, edit, delete, and manage the styles in those sheets.

Fluid Grid Layouts

• Page 521• Grid Layout figure 11-8• Lab = Creating a Fluid Grid Layout(FGL) Page– Book pg 525 Kindle 11269– Inserting FGL Divs Book 530 Kindle 11353– Formatting FGL Divs Book 532 Kindle 11388

• Lab = add content to FGL pages – Book 535 Kindle 11443

• Lab = Styling FGL pages – Book 535 Kindle 11456

Fluid Grid Layouts book update

Page 531 new screen for insert ‘Fluid Grid Layout Div Tag”

Figure 11-12 and 11-13 are obsolete. Just make sure the “Insert Fluid Element” box is checked.

Responsive Design

• DW Creative Cloud CC• http://tv.adobe.com/watch/creative-cloud-for-

web/enhanced-responsive-design/

• DW CS6• http://tv.adobe.com/watch/creative-week-ho

w-tos/dreamweaver-cs6-for-responsive-design/

How is Edge Reflow different from Adobe Muse CC or Dreamweaver CC?

• Edge Reflow CC (Preview) enables web designers to create responsive designs by leveraging a WebKit-based design surface and defining CSS layout and styling properties. Designers set media query breakpoints to manipulate elements and their design for different screen sizes. While Edge Reflow creates HTML during the design process, the tool is focused on enabling designers to share their responsive design intent and for CSS to be extracted for use either by the designer or a developer as part of the website production process.

• Adobe Muse CC helps designers create and publish complete websites. Adobe Muse supports creating mobile content by allowing the designer to adapt the primary layout for other devices, so that a unique experience can be delivered for each screen size. By using Adobe Muse, a designer can publish their site without writing or editing any HTML, CSS or JavaScript code.

• Dreamweaver CC is the all-in-one tool for creating web and mobile content quickly and intuitively, and the enhanced Fluid Grid layout feature is intended to provide developers and designers with an intutive way to generate clean web-standard code for their responsive design. Edge Reflow is a highly visual tool with features for designers to quickly ideate and mock-up different design comps for various devices and to view their results on various targeted screens. Unlike Dreamweaver, Edge Reflow does not provide coding features so designers must extract generated CSS code for implementation and deployment.

jQuery Mobile

• Page 537• Lab Build app 539• Lab add content 544• Lab add a layout grid 549• Lab add a collapsible block 550• Lab add a form elements 553• Lab add new pages 556• Lab format mobile pages 558• Launch the mobile site

An APP for Iphone or Android

• Turn the site into an APP for iphone or android• DW Site Phonegap Build Service• ( http:// build.phonegap.com/