WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 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

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 Book page 510 kindle 10942

Media Queries 2 Dreamweaver’s Media Queries Tool. – Choose Insert → Media Queries. – Choose Modify → Media Queries. 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: org/ TR/ css3-mediaqueries org/ TR/ css3-mediaqueries

Dreamweaver CS6’ s Approach to Media Queries Figure 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 Kindle

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:. 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 images. images Also 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 – Inserting FGL Divs  Book 530 Kindle – Formatting FGL Divs  Book 532 Kindle Lab = add content to FGL pages – Book 535 Kindle 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 and are obsolete. Just make sure the “Insert Fluid Element” box is checked.

Responsive Design DW Creative Cloud CC for-web/enhanced-responsive-design/ for-web/enhanced-responsive-design DW CS6 how-tos/dreamweaver-cs6-for-responsive- design/ how-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. Edge Reflow CC 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. Adobe Muse CC 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. Dreamweaver CC

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 ( build.phonegap.com/