Safari Web Content Guide: Configuring the Viewport Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips. Read “Layout and Metrics on iPhone and iPod touch” to learn about the available screen space for webpages on small devices.Read “What Is the Viewport?” See “Supported Meta Tags” for a complete description of the viewport meta tag. Layout and Metrics on iPhone and iPod touch Because Safari on iOS adds controls above and below your web content, you don’t have access to the entire screen real estate. What Is the Viewport? Safari on the Desktop Viewport
Beautiful Slide Out Navigation Revised After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order […] View demoDownload source After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements: 2.
13 Ways to Browser Test and Validate Your Work - Nettuts+ Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility - not to mention my own work as well. Over time, I've scrounged the web for the best validation and browser compatibility testing tools around. Here's my favorites. HTML and CSS Validation First let's take a look at some methods to check HTML and CSS validation. Along with validating your files, you should format your markup nicely as well. 1. Probably most commonly known is the online W3C Validation Service. 2. W3C also has a CSS validation service that you're most likely familiar with. 3. The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. You can also turn on "Display Page Validation" to show some quick validation information for HTML and CSS without needing to open a new tab. 4. 5. Most development editors offer some sort of validation tool. 6. 7. 8. 9 & 10. 11. 12.
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.
What HTML/CSS would you use to create a text input with a backgr The Best Social Media Icons All In One Place 464 shares 8 Free & Useful Minimal Icon Sets Icons are certainly a very important element of a design. It doesn’t matter if you are putting together a website or app, icons will be the key for several user interactions. Read More 916 shares 8 Beautiful and Free Flat Icon Sets For the past few years in web design, we’ve noticed a trend in moving toward simplicity and minimalism.
Picment.com » Articles » CSS » Fun with forms – customized input By Søren Madsen Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility. A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of. Usability Users trust their credit card and personal information with forms on the internet, and that trust is sacred. Differences in user agents The techniques we're about to demonstrate are not generic . Most popular browsers have however provided us with options to do so, but not all of them. So what are we left with? Logical restrictions With this technique, we basically hide the given form element, and replace it with graphic backgrounds. Some form basics – the and elements The fieldset element functions as a structural container for different sections within a form element. Personal information input fields here ... Yes No “Sure!
List of Really Useful Tools for CSS Developers Regardless of size and scope of your project, CSS development process can take quite a lot of time. Even if you are an experienced CSS developer; having good set of tools at your disposal can drastically improve your productivity. W3Avenue has compiled a list of really useful CSS tools that will help you increase both your productivity and knowledge. We have categorized these tools under various categories to help you easily find the right tools for your needs. Layouts CSS Layout Generator This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. CSS Frameworks Boks Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Fonts Typetester The Typetester is an online application for comparison of the fonts for the screen. Colors Sprites Forms UI Components Text Wrappers Analysis & Debugging Convertors Maintenance
Safari Web Content Guide: Configuring Web Applications A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms. For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in “Specifying a Webpage Icon for Web Clip.” Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iOS. Specifying a Webpage Icon for Web Clip You may want users to be able to add your web application or webpage link to the Home screen. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. apple-touch-icon-76x76.pngapple-touch-icon.png Specifying a Startup Image