<style> .myColumns { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-width: 250px; /* MINIMUM WIDTH */ -webkit-column-width: 250px; -moz-column-width: 250px; /* …or use COLUMNS shorthand… */ columns: 4 250px; -webkit-columns: 4 250px; -moz-columns: 4 250px; column-gap: 4em; /* Default is 1em */ -webkit-column-gap: 4em; -moz-column-gap: 4em; column-rule: 1px dotted #ddd; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px […]
dp (Density Independent Pixels): is a measure of screen size dpi (Dots per Inch): is a measure of screen density iOS non-Retina to Retina display transition (163ppi to 326ppi) Size buckets are phone (smaller than 600dp) and tablet (larger than or equal 600dp) Density buckets for Android are LDPI, MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI ldpi: Resources for low-density […]
Add this for smooth, elastic scrolling on mobile… #s4-workspace { -webkit-overflow-scrolling: touch; }
Web developers have their panties all up in a twist over this issue. Here is the boiled-down comparison… Responsive: The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size. Coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, […]
Install Node.js Open Terminal and install PhoneGap followed by Cordova… $ sudo npm install -g phonegap $ sudo npm install -g cordova Install SDK’s for targeted environments Create a New Project In Terminal, navigate to where you want to create the new project directory, and then run Cordova’s create command, passing in 1) The directory name […]
Two products Xamarin Platform – NATIVE apps for iOS, Android, Mac, and Windows Native = Native user interfaces + Native API access + Native performance (can’t get with JavaScript) Facebook’s first app was NOT native, making it slow and choppy; Mark Z. labeled it a failure and they rebuilt it as native Xamarin Test Cloud […]
iOS Notes From Apple’s iOS Human Interface Guidelines)… Defer to content Take advantage of the whole screen Reconsider visual indicators of physicality and realism Let translucent UI elements hint at the content behind them Provide clarity Use plenty of negative space Let color simplify the UI Ensure legibility by using the system fonts Embrace borderless buttons […]
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* styles for Retina-type displays */ }
text-align: justify; works on any inline element. Fiddle Resources Text-align: Justify and RWD
Create images that are 2x the size they need to be at 72dpi and resize to 1x in the CSS via width and height (Easy High DPI Images). In the early days, computer displays had a pixel density of 72 or 96dpi (dots per inch). Displays gradually improved in pixel density, largely driven by the mobile […]
box-sizing: border-box; will take padding into account so 100% width doesn’t spill off the page and 100px item with 10px padding stays at 100px instead of 120px… The padding is counted inside the width… [NOTE: May need vendor prefixes and IE hack] % values for widths… target(px)/context(px) = result%) Media queries Resources http://www.youtube.com/watch?feature=player_embedded&v=wDdrI7N-mWM
Define CSS breakpoints with media queries (ie. button for small width vs. full menu for wider) Hide button for wider, thus… The JS can react when the button is visible or not for appropriate device behaviors Resources Behavioral Breakpoints
Things to consider when developing in today’s web landscape: Screen size Input types (keyboard, mouse, touch) Common postures/modes of use (ie. phone users mostly use just their thumb which warrants larger touch areas and single-column layout) Consider having content on sides of screen for tablets instead of the traditional middle of the screen for laptops and […]
