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. Web design needs to be adaptive. 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 Main Structure CSS Again, I'm not going to get into the details. Step 1 Demo Updates
The Goldilocks Approach to Responsive Web Design 33em 16em With over 4 billion mobile devices in use around the world, mobile browsing is rising fast. We can no longer assume that our sites will be viewed on a desktop monitor with an average resolution. The answer, proposed by Ethan Marcotte, is Responsive Web Design. What if we could create a truly universal design that was device independent – one that, no matter what device you viewed it on, looked like it was designed just for that device? Current Practice The current approach to responsive design binds the design to the device. device resolution; and, pixels. Device resolution There are thousands of different devices out there, with millions of potential contexts. Pixels Pixels sizes aren’t constant – or at least the display of them isn’t. 16px text on an iPhone can be ~60% the size of 16px text on a Macbook. The Device Doesn’t Matter So how do we do as Mark Boulton suggests and go about designing from the content out? It’s tempting to first set the body font size. Too big Too small
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output The above code will output the following HTML code: Circle Image (see demo) Now that the image is applied as a background image, you can pretty much add any style to it. Card Style (see demo) Embossed Style (see demo)
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 .
HTML5 Grayscale Image Hover Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code. View Demo HTML5 Grayscale The Purpose This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. jQuery Code The jQuery code below will look for the target images and generate a grayscale version. How to use it To apply this to your site: include a copy of jquery.js paste the code as shown above set the target image (eg: .post-img, img, .gallery img, etc.) you may change the animation speed (ie. 1000 = 1 second) Compatibility It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. Credits
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development A Colorful Clock With CSS & jQuery Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own). Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS
css - Extending header background if container is not fluid New Twitter Design with CSS and JQuery. The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Download Script Live Demo Step 1 First create a DIV element with attribute ID value container. Step 2 Now create a panel-frame DIV element inside the container DIV. Step 3 Here the final HTML code ready. container'> // Right partright'> <div id="panel-frame"> <div class="panel"> <div class="head"><a href="#" class="close">Close</a></div> <div class="data">// jquery id </div> </div> </div> //Left Part <div class="left"> // Message display here <div class="block" id="1">1</div> <div class="block" id="2">2</div>.............................................................. Javascript$(".block").click(function(){})- block is the class name of DIV tag. });</script>
Mobile Web Design: Tips and Best Practices Feb 09 2010 Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices. For the most part you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. You may want to check out the following related article as well: Mobile Web Design Trends for 2009 Familiarize Yourself with the Hardware and Software Available Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. StatCounter Global Stats – Top 8 Mobile OSs Mobile browsers are another factor to consider. Simplify! Examples A List Apart Mobile The Onion
Advanced CSS Menu Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS menu Download Demo ZIP Overview Here are the required graphics to assembe the menu (you can download from the zip). 1. Open the Photoshop file. 2. Turn off the background Layer Group and leave only the menu text layers visible. Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Here is how the hover effect will work. Repeat this step for the other buttons. 3. When you are done with the graphics, let's start coding. #menu Reset the menu to no padding, no margin, and no list-style. #menu span #menu a The key point here is the text-indent property.
10 Key Considerations for Your Mobile Web Design Strategy Brian Casel is a web designer and co-host of Freelance Jam, the live web show for independent professionals who build the web. Connect with Brian on Twitter @CasJam. There’s no turning back now. Your strategy will differ depending on what type of project you’re working on, but make no mistake, you do need some kind of strategy for how your website (or your client’s website) functions in the mobile space. In this article, I aim to highlight 10 crucial items that you, as the web designer, developer or site owner, need to consider at the outset of your mobile site design project. 1. Usually a mobile website design project comes about through one of the following circumstances: It’s a brand new website in need of both a desktop and mobile strategy.It’s a redesign of an existing website, which will include a new mobile site.It’s an addition of a mobile site to an existing desktop site, which won’t be changing. 2. Take the website for Hyundai as an example. 3. 4. 5. 6. 7. 8. 9. 10. Off you go!