Adaptive CSS-Layouts: New Era In Fluid Layouts? | CSS | Smashing Advertisement Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design. If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? In this article, we’ll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices. Also consider our previous articles: Fixed vs. 1. Most of us have heard of the 960 Grid System for designing fixed-width Web pages. What Is a Fluid Grid? A fluid grid can be created through a smart use of DIV layers, percentages and very simple math. The Benefits A Note About Margins 2.
Cognitive Disabilities Something to Think About... The concept of cognitive disabilities is extremely broad, and not always well-defined. In loose terms, a person with a cognitive disability has greater difficulty with one or more types of mental tasks than the average person. There are too many types of cognitive disabilities to list here, but we will cover some of the major categories. A person with profound cognitive disabilities will need assistance with nearly every aspect of daily living. Functional vs. There are at least two ways to classify cognitive disabilities: by functional disability or by clinical disability. Memory Problem-solving Attention Reading, linguistic, and verbal comprehension Math comprehension Visual comprehension The main reason why these functional disabilities are more useful when considering web accessibility is that they are more directly related to the concerns of Web developers. Memory refers to the ability of a user to recall what they have learned over time. Problem-Solving
30 Inspiring Dark and Sleek Web Designs The skilled use of color gradients, lighting and glow effects, and details such as inset pixel dividers can lead to a gorgeous and sleek web design. When choosing a color palette, designers can often decide among a dark theme, a neutral/light theme, or a bright/colorful theme; this showcase presents dark-themed web layouts. In this collection, you’ll find some terrific and inspirational examples of dark and sleek web designs. 1. 2. 3. 4. coda.coza 5. designthis 6. 7. 8. 10. nclud 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. just.dot 23. 24. 25. 26. 27. 28. 29. 30. atebits Related content
5 Simple Ways to Improve Web Typography Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content – not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element? Good typography brings order to the page and increases legibility. A more scannable, readable site means happy visitors. I could blather on forever about how far typography has come on the web, and how far yet it has to go. But plenty has been said about what web type can’t do. 1. Stupid, but true: No two browsers use the same presentation defaults. Two I recommend: Yahoo’s CSS Reset Stylesheet Eric Meyer’s CSS Reset Stylesheet 2. Measure refers to the length of a single line of type. Additionally, your leading should increase with the length of your Measure. Likewise, if you have a small column such as a sidebar with a short Measure, your leading should be tighter. 3. 4. 5) Don’t Neglect The Details
40+ Helpful Resources On User Interface Design Patterns | Develo Advertisement If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating. A design pattern refers to a reusable and applicable solution to general real-world problems. For example, a solution for navigating around a website is site navigation (a list of links that point to different sections of the site), a solution for displaying content in a compact space are module tabs. There are many ways to tackle a specific requirement – and as a designer – the most important thing you can do is selecting the option that best reflects the needs of your users. Yahoo! Flickr Collections and Groups
Responsive Web Design: What It Is and How To Use It - Smashing Magazine Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The Concept Of Responsive Web Design Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. Transplant this discipline onto Web design, and we have a similar yet whole new idea. Adjusting Screen Resolution Flexible Images Media Queries
Web Design Toolbox: 130+ New Tools to Make You a Better and Fast Last year we did a post on 50+ tools for Web design. A lot has changed in the past year, and there are tons of new tools available to designers. Whether you're just starting out and need a drag-and-drop builder or you've been coding for years and need tools to help you be more efficient, there's something on this list for you. Here are over 130 tools to make you a better and faster designer. Feel free to add more in the comments. Beginner Resources YAML Builder - Easy to use YAML (Yet Another Multicolumn Layout) XHTML/CSS site layout builder. Sky CSS Tool - JavaScript CSS authoring app. The Box Office - CSS formatting tool for wrapping text around images. CSSTXT - Online CSS text style generator. izzyMenu.com - Free CSS menu builder. pForm - HTML form builder. Roxer - Drag and drop website creator. Wirenode - Create your own mobile websites. dotemplate - Template site that allows you to customize templates before downloading them. templatr - Online tool for creating website templates. SeeYouThen!
Replace GIF with PNG Images - portable network graphics images compress more efficiently than gifs Summary: PNGs are designed to be a more efficient, flexible, and patent-free replacement for GIFs. By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth. The Portable Network Graphics (PNG) format is designed to be a more efficient, flexible, and patent-free replacement for GIFs. PNG is designed to store a single bitmapped image to display over computer networks (1). PNG was created in 1995 as a response to Unisys' enforcement of their patent on the LZW compression algorithm used in GIFs. PNG versus GIF Compression PNGs uses the deflate compression algorithm typically with a 32KB sliding window. Not surprisingly, images saved as PNGs are typically 10% to 30% smaller than GIFs, although in rare cases they can be larger (5,6). PNG Features PNG has a number of features that make it appealing to the medical and graphics industries. For web use, the PNG8 (8-bit) is the form of PNGs that designers use to replace GIFs. Here are some of PNGs features: Further Reading
10 UI Design Patterns You Should Be Paying Attention To | How-To Advertisement Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well. In short, design patterns are solutions to recurring problems. You may be interested in the following related posts: 1. To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die6. When would you actually use lazy registration? 7 Amazon lets you browse and add products to your shopping cart before signing up. This pattern is meant to allow users to use your system and take action before registering. 8 Picnik is another good example of lazy registration. Recommended reading 2. 3. 4. This can be done in two ways:
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. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. 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. Becoming responsive#section2 responsive architecture .
Web Development Toolbox: 120+ New Tools for Web Development Last year we did a post on Web development tools. A lot has changed in the past year, and there are tons of new tools available to developers. Options include drag-and-drop application builders, code repositories, project management and testing apps, and frameworks for working with a variety of coding languages, from Ajax to Ruby to Python. Which do you use? Tell us more about your experiences in the comments. Application Builders DreamFace - Framework for creating personalized Web apps. Organic Incentive - Tools for creating viral widgets with a drag-and-drop interface. dbFLEX - On-demand business application development platform. app2you - Online tool for creating custom Web applications. Qrimp - An affordable database platform that builds applications around your data (which you can upload in an Excel spreadsheet). Lightspoke - Application builder with drag-and-drop application design, dynamic filtering and sorting, and a true relational database backend. ErrorKey - Error code search engine.
Articles > The PNG Gamma Dilemma | Trevor Morris Photographics PNG (pronounced ping) is a remarkable image format that supports such features as: 16-bpc true color or grayscale, alpha channels, interlacing (progressive display), and lossless compression! In addition, the PNG format allows applications to embed gamma information to correct for variations in brightness (gamma) on different platforms. This is great news for graphic designers who want their images to look good regardless of where they're viewed; but ironically, it's also one of the obstacles preventing more universal adoption of the PNG format for the Web. The problem arises from the fact that browsers have traditionally treated the RGB values specified in CSS (and HTML), GIF and JPEG as identical (numerically and colorimetrically). Contrary to the CSS2 specification , which states that CSS color values refer to the sRGB color space , the majority of browsers simply display CSS colors using the system color space. Fortunately, there are workarounds. Conclusions Downloads Installation
Social Network Design: Examples and Best Practices | How-To | Sm Advertisement According to Nielsen Online, social networks and blogs are now the 4th most popular kinds of online activities. 67% of the world online population are now visiting them and the time they’re spending on them is growing by three times the overall growth rate of the internet. Social networks are now visited more often than personal email is read. There’s a lot of variety out there in the realm of social network design. Also consider our previous articles: 9 Common Usability Mistakes In Web Design4 which details how to prevent common usability blunders.20 (Alternate) Ways to Focus on Users5 shows ways to get more information about your users’ experience on your site.More Web Design Trends For 20096 offers information on some important design trends for this year, many of which can be applied to social network design.Clear And Effective Communication In Web Design7 tells how to make sure you web site communicating efficiently with your users. 1. What’s It For? 2. 3. 4. 5. 6. 7.
51 Form Element Resources and Tutorials Using CSS And Javascript I featured many good looking contact forms some time ago – 91 Trendy Contact And Web Forms For Creative Inspiration, so you should know how looks good example. Now let’s take a look how to create outstanding and beautifully designed form elements from scratch ourselves. Things can get tricky even if you are experienced designer. It’s hard to attract visitors attention, but this article should help to stand out and create semantically correct, good looking and accessible web forms, checkboxes, radio buttons, buttons, fieldsets – everything you can think of when you are creating contact or login page! 1. This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. View demo & source 2. Very well explained tutorial showing crucial points you should give attention to. View demo & source 3. View demo & source 4. View demo & source 5. View demo & source 6. View demo & source 7. View demo & source 8. View demo & source 9.