background preloader

HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions

HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
This is Part 3 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5.5. In Parts 1 and 2, you built and styled a web page for a fictional restaurant, Citrus Café, using HTML5 structural elements and CSS3 properties, including rounded corners, and text and box shadows. In this final part, you'll optimize the page for display in devices at smaller resolutions, using CSS media queries and a site-wide media queries file. CSS media queries let you target style rules for different devices by specifying conditions, such as the maximum and minimum screen width. To follow this tutorial, you should have completed Parts 1 and 2. At the end of Part 2, you had styled the home page of the Citrus Cafe website for optimal display in a desktop computer (see Figure 1). Figure 1. The desktop design is 840 pixels wide, which is too big for tablet devices and those still using a small resolution on their desktops. Figure 2. Figure 3. Setting conditions in media queries Related:  responsive design

50 Reasons not to use Photoshop for Webdesign | - professional webdesign First things first, I love Photoshop. It is the world’s best program for image editing. I do not intend to say Photoshop is a bad program, I just wish to clear up the misunderstanding that Photoshop is the right tool to use for web and screen design. Photoshop was designed to be used for image manipulation. Users generally try to compare Fireworks with Photoshop. Fireworks can be thought of more in terms of a program such as InDesign. The following video demonstrates some of the most important features that make Fireworks the best layout tool for screen design. Adobe Fireworks CS5 Webdesign Workflow Tutorial from Andre Reinegger on Vimeo. 50 reasons not to use Photoshop for Web Design (Feature- & Performance comparison: FW vs. The following list offers a comparison with a rough indication of the time savings when using Fireworks.

Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element.

HTML5 and CSS3 in Dreamweaver CS5—Part 2: Styling the web page This is Part 2 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5.5. Part 1 shows how to build a web page for a fictional restaurant, Citrus Cafe, using HTML5 structural elements, such as <header>, <footer>, <nav>, <section>, and <article>. In this part, you'll style the page using CSS3 properties —such as text and box shadows and rounded corners—using new tools in the Dreamweaver CS5.5 CSS Styles panel. These properties are widely supported in modern browsers, but you need to use browser-specific properties in combination with the official properties to ensure the widest possible support.In this tutorial, you'll learn how to access the browser-specific properties in the Dreamweaver CS5.5 code hints. You'll also learn how to persuade Internet Explorer to apply styles to the new HTML5 structural elements. In Part 1 of this tutorial series, you built the web page for the Citrus Cafe site using HTML5 structural markup. Figure 1. Switch to Design view.

Understanding em Units in CSS Due to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS. As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs. Ah-em — Definition Please The spec gives us a very simple definition for the em unit: Equal to the computed value of the ‘font-size’ property of the element on which it is used. In other words, if you have the following CSS: Then this means 1em defined on that element, or any of its children, would be equal to 20px. So if you did this: Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px). Let’s em-phasize This An em is a unit of measurement in the field of typography, equal to the currently specified point size. What if “font-size” Isn’t em-ployed?

What The Heck Is Responsive Web Design? Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date Grey Goose Responsive site for Grey Goose with parallax scrolling animation Barack Obama The Obama campaign continues to be at the leading edge of web technology. Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages. Frameworks (save time) or Roll Your Own (more control) Best Practices Content Check Start Small (Mobile First) Exit Photoshop, Enter Browser Make It Modular Always Be Optimizing *Best practices still emerging!

Pearltrees A common set of breakpoints to start | Always Twisted. Front-End Development. On Thursday (26/04/12) the fantabulous Jeremy Keith wrote a short post on common breakpoints in responsive web design where he expands his thoughts on a question asked to Ethan Marcotte in a Q&A article on the .net magazines's website. Ethan was asked - "What devices (smartphones/tablets) and breakpoints do you typically develop and test with?" His retort can be summed up just by the last sentence of the response - "...we should focus on breakpoints tailored to the design we’re working on." Where as I completely agree that we shouldn't be just 'designing' sites for specific devices. How I like it... As I'm a freelance front-end developer that codes by candlelight I'm sure you can understand I don't work (well, not yet) on too many really big projects I generally think out most of my designs rather than initially draw a wireframe / open up photoshop. Therefore I always start with a 'boilerplate' of media queries. The lack of a media query is your first media query Em, How many? Content first?

WayFinder NYC - Find the nearest and best directions to New York City subway and NJ Path stations on your Android phone How I'm rolling my media queries | Always Twisted. Front-End Development. As I've previously mentioned, I start with a default set of common breakpoints when I'm creating my responsive stylesheets. Recently you may also have seen a post where I discuss the exciting Media Query bubbling that's available in LESS. So I thought I'd write a quick post on how I'm currently rolling out media queries in my stylesheets. Snippets First off, I used Espresso for my code editor. So, to start I've created several snippets in the app for my common breakpoints which are 320, 480, 600, 768, 900, 1100 & 1300px (although these are stipulated in ems based on 1em = 16px). This means that if I type 320 then hit 'tab' the following code gets put in place @media screen and (min-width: 20em) { I can then write the rules that I'd like within this query and close it at the end. Bubbles? Like I said at the start, I'm now implementing the use of media query 'bubbling' in my LESS files. Sorted! So I can quickly create my CSS using LESS. Ta-da! Did you like this post?

Free Website UI Wireframe Kits & Stencils Wireframes allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps develop familiarity with the site. This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). Sqetch is a little Illustrator-toolkit I built over time, consisting of several templates and elements Yahoo! A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids. Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications. Simple way to plan the layout and a cost-effective, time-saving tool for web designers OmniGraffle template for folks designing iPad apps.

Responsive Web Design It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen. Core Concepts Three key technical features are at the heart of responsive web design: Media queries and media query listenersA flexible grid-based layout that uses relative sizingFlexible images and media, through dynamic resizing or CSS Truly responsive web design requires all three features to be implemented. The key point is adapting to the user’s needs and device capabilities. Media Queries That was it! Flexible Grids

Work smarter with Fireworks symbols Work smarter with Fireworks symbols Working with wireframes can make planning and early layouts more efficient. But you can make the process even faster by creating your own Fireworks Symbols Library. I've written in previous columns about how working with wire-frames and grey-box page layouts during a site's planning and early design stages can improve efficiency and enable client sign-off points. At Stuff and Nonsense we now work on wireframing for every project and I have found that clients appreciate the thoroughness of the approach. For wireframes and page comps, my prefered weapon of choice is Fireworks. Creating symbols Start by making a blank Fireworks document and adding to it an element which is commonly used in many designs. There is a PNG file available to save you making your own. Select the search form and right (option) click and select Convert To Symbol (F8) which places the symbol into the library palette. Exporting symbols Importing and reusing symbols Share and share alike

Chatting with LukeW on Mobile First and Foundation 4 by ZURB The other day, our friend and advisor Luke Wroblewski stopped by for a chat with Jonathan, Chris and myself. We're in the midst of working on the finishing touches to Foundation 4, polishing the chrome and making her seaworthy. And Luke's visit was a pleasant distraction. Luke turned us on to Mobile First and his work has greatly influenced how we're approaching Foundation 4, which we talked about during our conversation with him. While we talked, Chris was furiously pounding away on the code — he can pat his head and rub his tummy at the same time. Some good stuff was said and we didn't want you to feel left out. Mobile First and Responsive Luke: Step out to any street corner and people have their face in a smartphone. Mobile First, in a responsive paradigm, for me, forces you to focus on the stuff that matters, front and center. Shifting Paradigms Jonathan: We're doing something different with 4 than we did with 3. Luke: That's an interesting philosophy. Luke: To build on that.

GEM - CSS media queries let you target tablet, desktop and phone screen sizes. by hfernety Feb 9