background preloader

Responsive Web Design Techniques, Tools and Design Strategies

Responsive Web Design Techniques, Tools and Design Strategies
Advertisement Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing websites, it can be a bit overwhelming for those designers who have yet to try it. To that end, we’ve compiled this round-up of resources for creating responsive website designs. Responsive Design Techniques CSS Transitions and Media QueriesElliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. Responsive Data TablesChris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. Responsive 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 the browser window is narrow. Responsive Images, Responsive Videos Responsive Design Tools

Defending The Generalists In The Web Design Industry Advertisement In recent years there has been a move away from generalist Web designers to specialists such as content strategists, user experience architects and front-end coders. Where once there was a single job, there are now many, with ever-narrower spheres of responsibility. While my peers are becoming more specialized, I have stoically refused to do so, remaining a generalist. If anything, my interests have broadened, encompassing subjects such as marketing, psychology and business strategy. This has drawn criticism from some who view generalists negatively, which is in line with some of what I am reading in the blogosphere. Where has this negativity come from, and is it justified? Why Is Being A Generalist Considered Bad? Part of the criticism is based on how complex the Web has become. This is certainly a valid criticism. The danger is that, without generalists, specialists become so wrapped up in their silos that they find it difficult to work with specialists in other disciplines.

Web Design History: From The Beginning The history of the Internet is short, but so much has changed within that time. It has radically changed how we live our lives. More importantly, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design. Although web design has only been with us in the past few decades, it has become a large part of our lives. We couldn’t imagine the internet without its animated graphics, fancy text, cool backgrounds, and background music. It is said that the first web site published in the World Wide Web history is sometime in August of 1981. In the 1990s Mosaic was introduced to the public, which was a free browser program. Mosaic Web Browser, the first web browser in internet history (Image by Computer History) During the 90s, internet connected the world through telephone lines. HTML – First Generation W3C sets the web design and coding standards. Second Generation

JavaScript Enlightenment: Now Available I'm pleased to help promote the follow-up to Cody Lindley's fantastic jQuery Enlightenment eBook, appropriately titled, JavaScript Enlightenment. Building upon his previous book, this newest release focuses exclusively on JavaScript objects, and will assist you in transitioning from a library user, to a full-fledged JavaScript developer! Need a Sample If you need a sampling of the type of content the book offers, be sure to check out the excerpt on Nettuts+, which focuses on the ever-confusing this keyword. So What's This Book About? " This book is not about JavaScript design patterns or implementing an object-oriented paradigm with JavaScript code. It was my intention to write a book to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc. Who is Cody Lindley? Buy the Book!

20 Reasons Why Your Website Design Sucks Part 2 In 20 Reasons Why Your Website Design Sucks part 1, I’ve started with a short introduction about why clients should be just clients, and why some self-proclaimed web designers shouldn’t be “designing” at all. We then explored important concepts which you need to know before you start designing and planning a website. A thorough knowledge of concepts like balance, white-space, and overflow make the difference between a good and a bad design. Like the previous article, we’re focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time I won’t show you extremely bad layouts that make you laugh, we are now on the next level and will focus on bigger mistakes that good designers make. 11) Distracting Animations A boring design does not bring light to your visitor’s eyes, however, having too much animation on your website brings plenty of downsides to your business. 12) Cross-Browsing 13) Confusing navigation 14) Bad use of themes

30 Beautiful Clean and Simple Web Designs for Inspiration Beautiful typography, strategic use of colors and graphics, and obstruction-free aesthetics devoid of visual clutter are a few of the characteristics shared among web designs that are clean and simple. In this collection, you’ll discover a few excellent web designs that are clean, simple and elegant. Here are related collections you should also check out: 1. 2. 4. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 8 Faces 17. 18. 19. 37signals 20. 21. 22. 23. 24. 25. 26. enjoythis 27. co: collective 28. 29. 3Degrees 30. Related Content About the Author Jacob Gube is the Founder and Chief Editor of Six Revisions.

Drag and drop table content plus animation | Redips | spideR Net This demo is just another example of using REDIPS.drag JavaScript library. Example shows drag-n-drop functionality in combination with animation. Please try to drag DIV elements or table rows and watch the movements in other table. I hope this demo will give you a general picture and show possibilities of REDIPS.drag library. Tables are closed within separated drag containers so elements from first table cannot be dragged to the second table and vice versa. REDIPS.drag inclusion and initialization will enable drag-n-drop for all elements found inside drag containers (one or many) - and this is just a skeleton. From version 4.3.0+, table content and rows can be moved to target position not only by dragging but also by using public method moveObject(). Minimized and gzipped, REDIPS.drag library is less than 10KB.

How to Code a Clean Minimalist HTML CSS Website Layout A long time ago, one of our authors named Jillz created a tutorial about “Designing a Minimalist Website Layout in Photoshop“. I used that exact PSD file and created an HTML CSS Layout for our readers – so that you can learn some coding lessons or download it and use it as your own site (naturally free of charge). As you might have guessed, we are going to start a step by step tutorial for creating a Minimalist HTML CSS Layout. This tutorial doesn’t require slicing in Photoshop, because it will cover only the most basic topics and is for beginners. To start, you will need your favorite HTML/Code editor like Dreamweaver or Notepad ++ and PSD of this Tutorial. Final Version Demos Live Demo {filelink=15} Lets Get Started Let’s start by making a new folder and a directory structure as mentioned below within this folder. 1. 2. 3. 4. Head Area Code Now I am going to show you the obvious HTML head area of index.html with the attached CSS. <! Moving Forward to Body CSS for Body and Frame Container <! 1. 2.

Vertical Navigation vs. Horizontal Navigation: Your Take? For people out there who have designed websites, I’m pretty sure that once upon a time you’ve spent some time thinking where to place the main navigation. This is a very minor thing that has a great implication on the overall performance of the website. Keep in mind that a finely placed element can make or break the whole design. Another thing to keep in mind is that this article is an observation, not in any way should it be used as professional advice. The most important thing in designing a website is how the purpose, design, and the content itself complement each other. Side Navigation (or vertical navigation) Side navigation uses too much space, with today’s websites that display advertisements you can’t just enter the two in a contest to see who wins. So, when is side navigation practical? Such is also the case with, the navigation is on the right side. If you haven’t noticed yet, right-handed people are usually more comfortable looking at the left side of their monitor.

Memo: The Personal Page As long as people have had personal websites, people have had a place to call home, online. With the advent of cheap domains paired with an ever growing landscape of ways to host a site, one can have a personal website that looks great and does what it needs to do for the price of one good meal. In this recent redesign, the About page went through a few iterations before we came to the version you see now. Instead of individual and lengthy biographical pages touting the individual best, we decided to simply link to everyone’s personal site — whether it be a blog, a one-pager or whathaveyou. While everyone else has a full-fledged blog that spoke to who they were, my own personal endeavours have run the gamut for over a decade. I posted that on Twitter and garnered positive feedback. A quick round robin occurred on Twitter with others chiming in their interest in doing similar with results: With the advent of such, I thought to myself, “Well, let’s open this up proper.” And so it is.