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
Inspiration: Fluid & Responsive Design Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. Adaptive Design The following sites are examples of adaptive design. iA Information Architects is one of my favorite minimal sites. Head London Although the Head London site is not fluid, but it did a pretty good job on the responsive layouts. Food Sense Pay attention to see how the Food Sense site responds. Fork CMS Go to the Fork CMS site, resize your browser window. London and Partners Design wise, I'm not a big fan of this site, London and Partners. Fluid & Responsive Now let's take a look at the fluid and responsive sites. Bitfoundry What caught my attention with Bitfoundry is the intro text. Ethan Marcotte Ethan Marcotte, being the founder of responsive design and author of Responsive Web Design book, his site of course is responsive. Paul Robert Lloyd On Paul Robert Lloyd's site, not only the layout is responsive, but the font size is also responsive.
Dropdown Menus for Mobile - Astuteo™ Side Projects Dropdown menus powered by Suckerfish, Superfish, and the like have been widely adopted across the web. While effective in larger hover-enabled & mouse-driven formats, they prove problematic within the limited real estate of a mobile viewport. Intended for responsive retrofits, this stylesheet will grab that cumbersome dropdown menu and position it atop the viewport in an unobtrusive and usable way. Targets unordered list dropdowns Powered by CSS media queries and a little jQuery Single base color for easy color adjustment Works two levels deep Integrates nicely with Superfish dropdowns The Mobile Dropdown Conversion was created by Matt Everson of Astuteo – that’s me – and it’s entirely free for you to download and use, modify for your own applications, or otherwise make millions off of.
The Basics of CSS3 Last week I posted a CSS3 dropdown menu and someone complained that I didn't explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know. The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque). RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc. Text Shadow Text shadow is structured in the following order: x-offset, y-offset, blur, and color; Set a negative value for x-offset to shift the shadow to the left. You can also specify a list of text-shadow (separated by a comma). text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; Border Radius The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). You can specify each corner with a different value. Box Shadow
CSS3 Image Styles – Part 2 Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. View Demo Image Styles Problem Most browsers don't render the border-radius and inset box-shadow perfectly on the image element. Previous Solution (see previous demo) As I posted before, you can work around by applying the actual image as background-image. Problem With Background-Image Now the problem with using the background-image trick is that the image can not be resized dynamically. New Solution!! Then later I found another workaround using a similar trick. Dynamic jQuery Again, jQuery is used to add a dynamic wrap to the target images. Output The CSS Trick (see demo) Image Styles
CSS - Conditional comments Page last changed today Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 up until IE9 (inclusive). Older IE versions frequently need some extra CSS in order to show your pages right. If you need special styles for IE10 or up you’ll have to find another method, since conditional comments were disabled in IE10. Conditional comments work as follows: <! Their basic structure is the same as an HTML comment (<! Below I added a lot of conditional comments that print out messages according to your IE version. Note that conditional comments were removed from IE10, so IE10 and up will not understand the test. Below are a few conditional comments that reveal the IE version you're using. According to the conditional comment this is not IE 5-9 The syntax I use is: <p class="accent"><! Note the special syntax: gt: greater thanlte: less than or equal to Also note the last one. <! Are conditional comments CSS hacks?
Web Form User Interface Kit PSD | Free Photoshop PSDs at Brusheezy! Close You have permission to view, download, edit and remix the contents of this file for personal and commercial purposes. You shall provide a link back to www.brusheezy.com (where applicable) or provide a credit to the Brusheezy contributor and to Brusheezy.com in connection with the commercial use of any of the contents in this file. Such credit shall be in the following form: "Contributor's Username/brusheezy.com." In the event that the contents of this file is used in connection with an art print work or product print work, you shall use reasonable efforts to credit the Brusheezy contributor and Brusheezy.com website as provided above. Except as expressly permitted by the author in writing, YOU MAY NOT REDISTRIBUTE, TRANSMIT, OR SELL THE CONTENTS OF THIS FILE IN WHOLE in any form.
5 great iPad apps for developers April 13, 2011, 10:55 AM — It's just sitting there. A smooth, glassy surface with a built-in keyboard, Internet connectivity, and a form factor that just begs to get some quick work done. While much has been made of the iPad as a content consumption device, there are still ways to create work on the popular device from Apple, if you know the apps to use. That creativity applies to writing, graphic design, and even code development. Application development on the iPad has remained an elusive dream. The heart of the matter Right now, there is one app that can we can easily recommend as the best code editor for the iPad: Textastic. There is a great deal about Textastic to like. For coders, though, the magic starts with Textastic's syntax recognition functions. Textastic is the gold standard for editing text or code on the iPad.