Aaug sample slides


Published on

sample for testing projector

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Aaug sample slides

  1. 1. Responsive Design TechniquesCSS Transitions and Media QueriesElliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basicpremise is this: you use media queries to design responsive websites that adapt in layout according to browserwidth, and you constantly resize your browser to see how the website performs, but every time a query kicks in,there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooththe jump by animating the resize? A nice case study.CSS transitions & media queries » Blog » Elliot Jay StocksResponsive Data TablesChris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. Bydefault, data tables can be quite wide, and necessarily so. You could zoom out and see the whole table, but thenthe text size would be too small to read. You could zoom in to make it readable, but then you’d have to scroll bothvertically and horizontally (sad face) to browse the table. One solution is to reformat the table for better read-ability. Another is to display a pie graph from the data. Yet another is to adapt the table into a mini-graphic fornarrow screens (rather than interfering much with the content when the full table is displayed).Responsive Data TablesResponsive Navigation Menus: Convert a Menu to a Dropdown for Small ScreensChris Coyier describes another technique for converting a regular row of links into a dropdown menu when thebrowser window is narrow. When the user is on a small screen and clicks the dropdown, they’ll get an interfaceto select an option that is nice and big and easy to choose. Obviously much better than displaying a tiny link.Convert a Menu to a Dropdown for Small ScreensCSS Media Queries and Using Available SpaceA tutorial from CSS-Tricks that discusses how to make subtle changes with media queries and how to use mediaqueries in a single style sheet. For instance, if you have a fluid-width design in which the sidebar is 35% of thewidth of the page, depending on the width of the browser window, you could say, “If the browser is really nar-row, do this. If it’s wider, do this. If it’s really wide, do this.” In the article, you’ll learn how to modify a list of linksaccording to the browser’s viewport.Responsive Images, Responsive VideosFluid ImagesFluid images are a central aspect of a responsive design. This article by Ethan Marcotte gives a thorough overviewon creating them using the classic img { max-width: 100%; } code snippet, as well as details to get you started.Responsive Image: Experimenting With Context-Aware Image SizingAn alternative approach to fluid images by Filament Group. This technique allows designers to create responsivelayouts that serve different image sizes at different resolutions. Effectively, it allows designers to create mobile-op-timized images for smaller screens, and then serve higher-resolution versions to larger screens. Filament Grouphas developed this technique that uses .htaccess files and JavaScript to serve up different sized images based onthe screen width. An alternative solution is to use tools like TinySrc which allows you to merely prefix all largeimages in your source code with a TinySrc URL, and the tool does the rest.Responsive Images and Context-Aware Image Sizing
  2. 2. Craig Russell has developed a technique that uses a server-side script (in PHP) to serve up images of severaldifferent resolutions. The idea is that within the PHP script, a nested array is used that lists image files and theirrelative percentage scales. In HTML, the image’s src attribute would be set to get the requested image’s id, butwith no scale specified. A JavaScript calculates the percentage width of the image relative to the maximum widthof the container, and this figure is then appended to the end of the src attribute as the scale parameter. The com-ments in the article contain some nice ideas and suggestions on how the technique could be improved.» Responsive Images and Context Aware Image Sizing Craig Russell Web DeveloperResponsive Images Right NowHarry Roberts’ idea is to use the img element for the smaller of the two images, the image that you want mobileusers to download. You would also have a containing div to which you apply the large version of the image as abackground through CSS. You then hide the img from desktop users, and show them the large CSS background,and hide the background image from mobile users and just serve them the smaller inline image.Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry RobertsResponsive Images Using CSS3Nicolas Gallagher’s method relies on the use of @media queries, CSS3-generated content and the CSS3 extensionto the attr() function. By combining the content property with the CSS3 extension to attr(), you are able to spec-ify that an attribute’s value should be interpreted as the URL part of a url() expression. In this case, it means youwill be able to replace an image’s content with the image found at the destination URL, stored in a custom HTMLdata-* attribute.Responsive images using CSS3Responsive Images Using CookiesKeith Clark suggests using cookies to serve smaller images to mobile users. Whenever a browser requests a filefrom a server, it automatically forwards any cookie data along with the request. If we use JavaScript to populatea cookie with the current screen’s dimensions, all subsequent requests made by the browser will pass this data tothe server. In other words, the server would know the screen size of the device that is asking for the file.Responsive images using CSS3Responsive Images With ExpressionEngineJohn Faulds presents a technique for responsive images that is different from the techniques presented above. Itinvolves querying the device’s user agent string to determine whether it is mobile, and then setting a global vari-able that can then be used in templates to modify the size of the image output. Basically, only one image gets sentto the browser, but that image is different depending on whether you’re viewing the page on a mobile or desktopdevice.Responsive images with ExpressionEngine — John FauldsCSS: Elastic VideosNick La applies the max-width: 100%; snippet to videos and presents techniques that make HTML5 videos andobject- and iFrame-embedded videos responsive. For the latter, the trick is very simple. Just wrap the embeddingcode in a div container, and specify a 50% to 60% padding-bottom. Then, specify the child elements (iFrame,object embed) and a 100% width and 100% height, with absolute positioning. This will force the embedded ele-ments to expand full width automatically. Initially discovered by Thierry Koblentz.
  3. 3. CSS: Elastic VideosResizeable Images (At Full Resolution!)A quick tutorial from CSS-Tricks on resizing images while maintaining resolution.Responsive Email NewslettersOptimizing Your Email for Mobile Devices With the Media QueryWide emails often require horizontal scrolling, especially when there’s a large image. This case study by Cam-paign Monitor explains how emails can be optimized for mobile devices using media queries and offers a coupleof useful techniques and snippets to be used right away.Optimizing your email for mobile devices with the @media query - Blog - Campaign MonitorResponsive Design for Email, the Largest Mobile AudienceAnother interesting case study that shows how the development team behind Beanstalk applied screen-size-spe-cific media queries to target styles, and what design decisions were made to make the mobile email experiencebetter.Wildbit » Responsive design for email – the largest mobile audience - Thoughts on building web apps, business-es, and virtual teamsMedia Queries in HTML EmailsThis article covers using media queries to target specific mobile email clients.Guide to CSS Support in EmailDesigning an HTML email that renders consistently across major email clients can be time-consuming. Supportfor even simple CSS varies considerably between clients, and even different versions of the same client. Cam-paign Monitor has put together a guide to save you the time and frustration of figuring it out for yourself. With24 different email clients tested, it covers all of the popular applications across desktop, Web and mobile email.Guide to CSS support in email - Articles & Tips - Campaign MonitorResponsive Design ToolsYou can build a responsive design from scratch, or you can use some of the tools listed below to speed up andsmooth out the process.Respond.jsScott Jehl’s fast and lightweight polyfill for min-width and max-width CSS3 media queries (for IE 6 to 8 andmore). css3-mediaqueries-js is another script that enables IE 5+, Safari 2 and Firefox 1+ to transparently parse,test and apply CSS3 media queries.respond.min.js at master from scottjehl/Respond - GitHubWebPutty: Scientific Progress CSS EditingThis tool is a Web-based CSS editor with auto-save feature and a real-time preview of your website. WebPuttyalso has CSS selector highlighting and SCSS support (for Sass and LESS), as well as Compass support. To use thetool, just embed a link tag at the end of your website’s head tag.WebPutty: scientific progress CSS editing goes “boink” - Fog Creek Blog
  4. 4. Debugging CSS Media QueriesIn responsive Web design, we’re working with different states, widths and viewport sizes. Johan Brook shares aquick tip for indicating (with pure CSS) which media query has kicked in. The article also provides a mixin fordevelopers using Sass. A demo is available as well.Debugging CSS Media Queries · Johan BrookResponsive Design TestingThis tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths.Change the defaultURL variable at the top of the responsive.js file to your own site and navigate your websitefrom within the frames.Responsive Containers: Selector QueriesThis JavaScript by Andy Hume allows you to add selector queries and responsive containers to your design. Es-sentially, you can apply different class values to an HTML element based on its width.ahume/selector-queries - GitHubResize My BrowserIf you need your browser to display content in a certain window size this is what you have been looking for. Justclick on the size you need and check out what your size looks like. Does not work in Chrome and Opera due toissues with the “ResizeTo” event.Media Query BookmarkletA handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to yourbookmarks bar and have it ready when needed.ResponsivepxUse the information this little gadget provides in your media queries to create responsive designs.ProtoFluidA tool for rapid prototyping of responsive design. You can prototype CSS on a variety of popular device sizes,orientations and browsers, be they phones (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tab-lets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitors or televisions (720p, 1080p). Youcan preview designs right in the browser and use your development tools like Firebug. You might want to checkan alternative tool ScreenFly as well.Fluid Grid CalculatorHarry Roberts has developed a calculator and generator of fluid grids for your responsive designs. Just providethe number of columns, the width of one column and the width of the gutters, and the tool will generate a fluidgrid system in CSS for you. Handy!Fluid Grids—a fluid grid calculator by Harry RobertsFree HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: YokoYoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, thetheme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smart-phone screens. To make your blog more individual, you can use the new post formats (like gallery, aside orquote), choose your own logo and header image, customize the background and link color.
  5. 5. Scherzo, a Responsive WordPress ThemeThis WordPress theme is a fine example of responsive design, displaying nicely on almost all devices and screens.Responsive Design Templates320 and Up320 and Up works on the “tiny screen first” principle, whereby designs are created for mobile screens first, andthen expanded for tablets, desktops, and large screens. It works well as an extension to HTML5 Boilerplate andas a standalone kit.Media Queries for Standard DevicesHere is a useful template for media queries for standard devices: empty placeholders for targeting devices andattributes that you might be interested in when making responsive designs.Media Queries for Standard DevicesMobile BoilerplateHere is a customizable template for creating rich, high-performance mobile Web apps. You’ll get cross-browserconsistency among A-grade smartphones, and fallback support for legacy BlackBerry, Symbian and IE Mobile.You’ll also get offline caching for free, fast button clicks, a media query polyfill and many common mobile Web-kit optimizations.New-css-112 in Powerful New CSS Techniques and ToolsSkeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly DevelopmentSkeleton is a small collection of CSS and JavaScript files that can help you rapidly develop websites that lookbeautiful at any size, be it a 17-inch laptop or an iPhone. Skeleton is a grid that is responsive right down to mo-bile. It is well organized and well structured and provides most basic styles as a foundation.Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly DevelopmentResponsive Design Frameworks1140 CSS Grid1140 CSS Grid is optimized to work on screens ranging from the size of mobiles to 1280 pixels wide. It’s a sim-ple flexible grid system that uses media queries for smaller screens, essentially stacking columns on top of oneanother.inuit.cssThis CSS framework is built to provide a solid foundation for designs on smaller screens (such as tablets) andtiny screens (such as phones) straight out of the box with minimal effort. It also has a custom grid system builderfor creating fluid grid systems.inuit.cssFluridFlurid is a liquid grid layout with up to 16 columns.Flurid in Responsive Web Design Techniques, Tools and TutorialsFluidGrids
  6. 6. FluidGrids is a fluid grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.Less Framework 4A CSS grid system for creating adaptive layouts. It includes four basic layouts (including tablet, mobile and widemobile), with three sets of typography presets.Fluid Grid SystemThis fluid grid framework includes a typographic grid and baseline grid.Tiny Fluid GridTiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximumwidths, and percentage-based gutters.Responsive Design Workflow and StrategiesThe Responsive Designer’s WorkflowLuke Wroblewski’s conference notes on Ethan Marcotte’s presentation about applying responsive Web designprinciples and workflows to the redesign of a major newspaper website. Among other things, Ethan explains howhe approaches the responsive design methodology, what the design process looks like and how prototyping isdone in the context of responsive design.LukeWThe Goldilocks Approach to Responsive Web DesignThe Goldilocks Approach stresses device-independent layouts that look perfect regardless of the device they’reviewed on.Content ChoreographyRead up on how to properly plan your site to live up to todays standards. Begin to choreograph content propor-tional to size to serve the best possible experience at any width.Structured Content FirstIn this presentation, Stephen Hay discusses a couple of troubles you might run into when structuring your con-tent and argues that properly structured content is portable to future platforms. Stephen suggests that we thinkabout creating and designing structured content first that caters to the lowest common layout denominator,whether this be a small screen or a text browser. This content should be able to go anywhere.Design for a Target Experience FirstAnother interesting perspective on a responsive designer’s workflow; Nathan C. Ford focuses on experience of itsusers first and then derives user scenarios and media queries from it. “There are goals for sites that reach beyondsimple readability, where a lack of features can actually diminish the experience. I am working on such a proj-ect now. Our approach has been to peruse the research and tailor an optimal experience for the most likely userscenarios. Working out from there, we judicially edit and hone for each media query.”More Responsive Design, PleaseThis article by Jason Things covers responsive design based on a layout/content/capability/user intent scheme,which sheds interesting new light on the challenges that responsive design can create. It’s a well thought out pieceand is certainly worth a read.Breaking Development
  7. 7. Luke Wroblewski took notes at the Breaking Development Conference while Stephen Hay talked about the reali-ties of designing for different device experiences.Patterns for Multiscreen StrategiesHave a look at this simple but effective slideshow to get an idea of which core factors play a role in multiscreenconcepts.Responsive Web Design from the FutureAccording to Kyle Neath, responsive web design is about a lot more than the size of your screen. This talk isabout about how GitHub handles links, the url bar, partial page updates, and explains why Kyle thinks theHTML5 history API is the most important thing to happen to front end development since Firebug. An inspir-ing presentation.Developing a Progressive Mobile StrategyIn this presentation, Dave Olsen presents a progressive mobile strategy that consists of audience strategy, contentstrategy and platform strategy. Dave argues that to develop a sustainable and scalable mobile strategy, you needto answer the questions, “What value will the targeted audiences get from this content?” and “How do we devel-op solutions to handle both mobile and native now, as well as the devices of the future?” An interesting presenta-tion.Developing a Progressive Mobile StrategyHow to Use CSS3 Media Queries to Create a Mobile Version of Your WebsiteIn this Smashing Magazine article, Rachel Andrew explains how, with a few CSS rules, you can create an iPhoneversion of your website using CSS3 — one that will work now. You’ll see a very simple example and learn the pro-cess of adding a small device style sheet to a website to show how easily we can add mobile-specific style sheetsto existing websites. You may want to consider reading Aaron Gustafson’s article “Adaptive Layouts With MediaQueries” and Emily Lewis’ piece “Respond to Different Devices With CSS3 Media Queries” as well.How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing MagazineDiscussions and Points of View on Responsive DesignWhile not tutorials per se, the articles here give you valuable insight into why you should use responsive designtechniques (and when you maybe shouldn’t use them).Responsive by DefaultAndy Hume explains what in his opinion responsiveness is all about. It’s what a website does when it’s loadedinto an unknown browser on an unknown device by an unknown individual. It’s “how you deal with “the mosthostile software development environment ever imagined” (via Douglas Crockford). Like progressive enhance-ment it’s a strategy that frees you to work with the web rather than fight against it.” An interesting point of view.Responsive Web Design or Separate Mobile Site? Eh, It DependsAn interesting article discussing the pros and cons of responsive designs vs. dedicated mobile websites.The Case Against Responsive Web DesignIt seems only fair to include some dissenting opinions here about when responsive design is and is not appropri-ate. This article discusses why responsive design doesn’t always make sense from a user experience perspective.Take a look in the comments section, too. Luke Jones has a similar opinion.
  8. 8. A Responsive MindA discussion on Jeremy Keith’s blog about the necessary parts of a responsive design and how to effectively createdifferent layouts based on different screen sizes. Examples are included.Responsive EnhancementAn excellent introduction to responsive design as a way of thinking rather than as a tool or technique. JeremyKeith argues that responsive Web design can’t be tacked on to the end of an existing workflow. Instead of pixelperfection, we should be thinking of proportion perfection. An inspiring read.Mobile-First Responsive Web DesignMobile First Responsive Web Design is a combination of philosophies and strategies with the aim to achieve awider application of best practices in the area.Where are the Mobile First Web Designs?In this article Jason Grigsby presents the findings from his study on responsive designs, their features and ap-pearance as well as general remarks on the state of art of Responsive Web Design.Further ResourcesHere are some additional resources for creating responsive designs that don’t fit neatly into the categories above.Media QueriesA growing collection of websites that use media queries.Responsive Web Design, by Ethan MarcotteThis book, written by Ethan Marcotte and published by A Book Apart, is a fantastic resource for learning how todesign responsive websites. It covers the basics of the responsive Web, flexible grid systems, flexible images andmedia queries, and it gives insight into how to create responsive designs.The Big Web Show Episode #9: Responsive Web DesignJeffrey Zeldman and Dan Benjamin sit down with Ethan Marcotte for episode 9 of The Big Web Show to discussresponsive design, among other topics.Last ClickThe Latest in HTML5This slideshow covers some techniques and lesser-known HTML5 gems that could get implemented in browsersin the near future: among other things, server-side media queries with JavaScript and form-factor detection.The Latest in HTML5