background preloader

Mobile Navigation Design & Tutorial

Mobile Navigation Design & Tutorial
One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery. View Demo Mobile Nav Problem The screenshots below show the navigation layout issues on mobile. Solutions 1) Dropdown One of the commonly used solution is to convert the navigation into a select dropdown. 2) Display as Block Another quick fix is set each menu item as block elements so they display vertically. 3) Menu Icon The last solution that I'm going to review is to use a menu icon/button to toggle the navigation. Mobile Navigation with jQuery (view demo) Below is the sample navigation HTML used in this tutorial: jQuery Code Final Demo Update:

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.

Expandable Mobile Search Form Previously I wrote a tutorial on mobile navigation, today I'm going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form. View Demo Search Form The Purpose On mobile display, every pixel counts. On Best Web Gallery, I use jQuery to fade in the search form when the search button is clicked. Let's Start: The HTML Code Below is the sample HTML form. Reseting The Default Webkit Search Input By default, Webkit browsers style the search input like the screenshot shown below: To remove the default style so it looks like a regular text field, add the following CSS: Styling The Search Input (view demo) I'm not going to go through each CSS line because it is straight forward. If you need help on the border-radius or box-shadow CSS3 properties, read the "The Basics of CSS3" article.

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?

Scroll/Follow Sidebar, Multiple Techniques Really simple concept today folks! A sidebar that "follows" as you scroll down a page. There are a number of ways to go about it. View Demo Download Files The easiest way to handle this is just to use CSS fixed positioning. With this technique, the sidebar stays solidly in place as you scroll down the page. jQuery If we use JavaScript, we can measure how far down the window the user has scrolled after a window.scroll event. Optimized by Doug Neiner: There is no particular advantage here other than the cool animated effect we get, which will certainly draw attention to it. Bonus "reveal" technique On Tim Van Damme's Maxvoltar.com individual blog posts have a special sidebar with a fun "reveal" effect when the page is scrolled down. The trick is to have a header area with a solid background sit on top of the sidebar, which is pulled up underneath it. Concerns In any of these techniques, we are essentially dealing with fixed positioning. Cross-Browser Hoo-Hah This should work in "all" browsers.

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.

Related: