background preloader

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Advertisement CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices. In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. Media Queries If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. The Media Queries in CSS3 take this idea and extend it. Testing media queries Related:  responsive web design

Responsive Web Design Guidelines and Tutorials In this overview you will find the most useful and popular articles we have published on Smashing Magazine on Responsive Web Design. Quick Overview Design Process In The Responsive Age11 You cannot plan for and design a responsive12, content-focused13, mobile-first14 1 website the same way you’ve been creating websites for years—you just can’t. I’d like to walk you through some problems caused by using old processes with responsive design. Read more…17 Responsive Web Design: What It Is and How To Use It18 Almost every new client these days wants a mobile version of their website. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Read more…20 A Foot On The Bottom Rung: First Forays Into Responsive Web Development21 Responsive design is the hottest topic in front-end Web development right now. Rumors came through our office grapevine that management was looking to revamp our mobile presence.

Perfect Full Page Background Image Share this: Ship custom analytics today with Keen.io. This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn't some fancy shenanigans like Flash Image above credited to this site. #Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo #CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version. Here is the CSS:

Beginner’s Guide to Responsive Web Design Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future. Free trial on Treehouse: Do you want to learn more about responsive web design? Over the past year, responsive design has become quite the hot topic in the web design community. What is responsive design? Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. So, what is responsive design exactly?

Fluid 960 Grid System | 16-column Grid Article Heading Subheading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Visit site. Heading 3 Heading 4 Heading 5 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Heading 6 Epsum factorial non deposit quid pro quo hic escorol.

Fluid Grids Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. Thanks to the advocacy of Mark Boulton, Khoi Vinh, and others, we’ve seen a resurgence of interest in the typographic grid, and how to use it on the web. However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1 Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” As it turns out, it’s simply a matter of context. With ems, it’s easily done.

flexible image clagnut/sandbox 1. A medium image contained in a paragraph with no styles applied #img1 {} 2. 3. 4. 5. Fluid Images — Unstoppable Robot Ninja (Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. I don’t mean the industry, but the act. Hitting “print,” sending an email, pressing that “Publish” button on the CMS: at some point, you relinquish your ability to smooth down some of the sharper edges, fill in the holes of your argument, and just generally fix whatever’s broken. To wit: One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. In Which “Looking Across the Pond for Help” Is a Pretty Decent Answer, As It Turns Out Since I started mucking around with this whole “stylesheets” thing, Richard Rutter has been one of those CSS giants on whose shoulders I frequently stand. A few years back, Richard published a brilliant series of experiments with max-width and images, which I pored over when I was first working on this blog. This solved the problem beautifully.

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

Alistapart Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .

Related: