Designing for Touch Screen | What Creative Design Agency Now, this post was supposed to go out about two weeks ago, and since then it seems that every designer under the sun has written on the same subject – That’ll teach us for being lazy. Nonetheless, we decided to publish it anyway, just in case anyone missed any of the other great posts out there… By now you should all have heard of the iPad, and if not then you must have been living under a rock for the last few months! Touch screen devices are here to stay and you need to start thinking about how to design and develop to get the most out of them. 1. CSS hover states (such as a:hover) are not supported. However, this can cause a few problems, especially concerning drop-down menus – which is quite a major issue for many websites. Alternatively, for a drop-down menu to be obvious on a touch device (because you can tap-to-open some of them) there must be a link / button to indicate that the menu expands, such as a small arrow. 2. 1024 x 768 It’s not dead and it’s making a come back! 3. 4.
What The Heck Is Responsive Web Design? Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date bostonglobe.com Grey Goose Responsive site for Grey Goose with parallax scrolling animation www.greygoose.com Barack Obama The Obama campaign continues to be at the leading edge of web technology. barackobama.com Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages. Frameworks (save time) or Roll Your Own (more control) Best Practices Content Check Start Small (Mobile First) Exit Photoshop, Enter Browser Make It Modular Always Be Optimizing *Best practices still emerging!
Subway - Responsive Multi-Purpose WordPress Theme SUBWAY is a responsive multi-purpose WordPress theme Main Features Fully Customizable Headers – Each page can have it’s own custom header with different height and background image or slider. AJAX Animations ON/OFF – Choose between 4 fluid AJAX animated transitions between pages for a creative experience or turn AJAX off to create a classic website. Visual Composer for WordPress ($25 value) – Visual Composer for WordPress will save you tons of time working on the site content. Bonus Parallax Pages – SUBWAY comes with an amazing bonus feature – easy to create Parallax pages perfect for presentations, microsites or a new homepage. Woo Commerce Integration – Add online shop module to your web site. Interactive Elements – Counters, pie charts, horizontal progress bars, icon progress bars, elements with animation Custom Post Formats – SUBWAY supports following custom blog post formats: Standard, Gallery, Link, Quote, Video, Audio Blog Masonry Layout – Make your blog page display in masonry layout
45 top examples of JavaScript | JavaScript JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more. The internet is full of web design inspiration, including great examples of JavaScript being used to bring a website to life and provide great user experiences. Here we pick some of our favourite examples of JavaScript in action for your inspiration. 01. If you've ever watched Cosmos, you may remember Carl Sagan talking about the Cosmic Calendar. 14 billion years of events is a huge dataset, and displaying it in a browser is no easy task. The son of a historian, Stauber created Histography as a student at Bezalel Academy of Arts and Design, under the guidance of Ronel Mor. The site scans and indexes events from Wikipedia, grabs the article, and pulls in a Google image and YouTube video. 02. 03. For this website about the history of the St. 04. 05. 06. 07. 08. tota11y 09. 10. 11.
Web Style Guide Beginner’s Guide to Responsive Web Design Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Free trial on Treehouse: Do you want to learn more about responsive web design? Over the past year, responsive design has become quite the hot topic in the web design community. What is responsive design? Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. So, what is responsive design exactly? It’s not just small screens, either. Fluid Grids 320px480px600px768px900px1200px Resources Bonus
Building Mobile Applications / OpenCourseWare This is OpenCourseWare. Computer Science E-76 is a course at Harvard Extension School. Even if you are not a student at Harvard, you are welcome to "take" this course via cs76.tv by following along via the Internet. (The course's own website is at www.cs76.net.) If you're a teacher, you are welcome to adopt or adapt these materials for your own course, per the license. Special thanks to Chris Thayer and Harvard Extension School for the course's videos. djm Copyright © 2012 – 2014, Dan Armendariz and David J. This course's content is licensed by Dan Armendariz and David J. you are free: to Share — to copy, distribute, and transmit this content to Remix — to adapt this content under the following conditions: Attribution — You must attribute this content to Dan Armendariz and David J.
Stratégie de contenu mobile : compte-rendu de lecture Qu’est-ce qu’une stratégie de contenu à destination du web mobile ? Comment la définir et la mettre en œuvre ? Compte-rendu de l’ouvrage Stratégie de contenu mobile de Karen McGrane, par Julie Colin. Le parti-pris : la stratégie de contenu mobile, ça n’existe pas Karen McGrane est architecte de l’information et spécialiste en stratégie de contenu. Pour elle, proposer un contenu différent – allégé et centré sur l’accomplissement de tâches – sur les supports smartphones ou tablettes est un non-sens. La recherche d’information est une tâche qui s’effectue sur l’ensemble des supports mobiles et pas seulement sur les sites de bureau. La structure de l’ouvrage en 7 chapitres 1. « Doit-on vraiment migrer tout notre contenu sur les appareils mobile ? Les annonceurs Votre entreprise diffuse de la publicité à la télévision ? Les détaillants Ceux-ci doivent répondre à 3 contextes différents : 2. 3. Bien souvent, c’est uniquement la mise en forme qui permet de fournir des informations structurelles.
Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .
CS134 Web Design - Lecture Notes Class 1: Introduction to the Internet [PPT slides] Class 2: Creating a Basic Web Page [PPT slides] Class 3: Basic XHTML tags; In-class Assignment Class 4: Lists, Tables, Links, Images [PPT slides] Class 5: Links, Images; Exercise 1 [zip file] Class 6: Intro to Cascading Style Sheets [PPT slides] Class 7 & 8: CSS Value and Common CSS Properties [PPT slides] Class 9: Understanding URL, Using Different CSS Selector [PPT slides] Class 10: Page Layout Techniques (1) [PPT slides], [Layout files] Class 11: Page Layout Techniques (2) [Layout files] Class 12: Dreamweaver Introduction [PPT slides], [exercise files] Class 13: Mid-term exam review Class 14: Dreamweaver (cont.) [PPT slides], [exercise files] Class 15: Dreamweaver (cont.)
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):