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.

40+ Useful HTML5 Examples and Tutorials HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and Internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features. With the constant drop of Flash usage in web and Internet applications, HTML5 is opening new doors to web designers and developers. In this scenario, it is indeed imperative for every web developer to know about basic compatibility, features, tricks and tricks of HTML5. Keep in mind that besides coding your own web site from ground up you can also kick start your project using a WordPress theme. Advertisement HTML5 Web Applications

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!

Avoiding common HTML5 mistakes Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. Don’t use section as a wrapper for styling One of the most common problems I see in people’s markup is the arbitrary replacement of <div>s with HTML5 sectioning elements — specifically, replacing wrapper <div>s (used for styling) with <section>s. In XHTML or HTML4, I would see something like this: <! Now, I’m instead seeing this: <! Frankly, that’s just wrong: <section> is not a wrapper. With that in mind, here’s the correct way to mark up the above example using HTML5 and a couple of ARIA roles. <body> <header> <h1>My super duper page</h1> <! If you’re not quite sure which element to use, then I suggest you refer to our HTML5 sectioning content element flowchart to guide you along your way. Ah, <figure>. <! Summary

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?

An HTML5 Slideshow w/ Canvas & jQuery Martin Angelov You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts. All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well. Update: Per popular demand, you can now download an auto-advancing version of this slideshow. The Idea With JavaScript, we are going to apply a special filter to every image in the slideshow. How the Slideshow Works When the user chooses to proceed to another slide, the canvas is shown with a fadeIn animation, creating a smooth lighting effect. The HTML html5-slideshow.html <!

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?

Initializr - Start an HTML5 Boilerplate project in 15 seconds!

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