I just pushed some changes to my little grid system. This is the biggest updated since the first release over a year ago. Fluidable is now a true responsive grid system that is “mobile first”. This essentially means that all code that is not for mobile devices is inside a media-query. I have also dropped support for IE7 and simplified the HTML structure needed for creating the columns.
Fluidable is a standalone grid that is build using LESS. Its good when you need a lightweight grid system to go with your custom code. You can install it using Bower or just grab a copy from Github. Static and minified versions included as well as a LESS version.
Skeuomorphism has been the industry standard for a long time or since Windows 1.0 at least and probably reaching its hight in the last few years with the OS X Mountain Lion on the Mac. These days the trend is all about flat design like seen in Windows 8 and according to rumours Apple might also be headings this direction. I think this is a good trend that fits well with economical and sustainable thinking of our times. This trend will have a big impact on young designers and should result in a less busy and more pleasing UI designs for everyone.
Now that responsive design is getting more mature the line between mobile apps and mobile web sites is getting blurrier by the day. App designers are increasingly going for flat design as well and at the other end many web designers are using mobile first technique when building responsive web sites. Another related trend is the mobile navigation button creeping into desktop versions of web sites. Some sites are staring to hide the main navigation behind a menu button like the one seen one many responsive sites mobiles apps. Just make sure that users understand how to get to the menu.
This is another big trend. A lot of web sites are saying no to navigation heavy architecture and opting for building sites that are longer instead. I think for most smaller to medium sized web sites this is a good thing. Often web sites have too many menu items and pages that have little content. The more pages you have in your site the more clicks users needs to find the information they are looking for. Just make sure you don’t over do it, don’t try to stuff all your content into one page if you have a lot of it.
RSS is not for everyone. People who are into reading and have a large list of blogs and news sites to follow can use it to keep track of hundreds of sources at the same time with out having to manually check them for updates. RSS was never ment to be a commercial product like Twitter or Facebook but a way to subscribe to content. RSS is pluming, most people don’t even know they are using RSS when they open up iTunes and listen to their daily doze of podcasts.
Almost all web sites and blogs on the internet use RSS to expose the latest updates available. This allows both people and computers to consume the information in a accessible way.
People who consume large amounts of news and information will continues to use RSS for an unforeseeable future while more typical users will opt for more consumer oriented ways like Twitter and Facebook to satisfy their daily information fix.
Designing For Start-Ups: How To Deliver The Message Across -
As a designer at a tech startup, I feel very lost and out of place most of the time. I feel my coworkers do not understand design and why should they? The developers I work with think that I should work like them and they almost feel like I’m being silly when I suggest that designing is nothing like programming. This has taught me a lesson, I have to become a teacher. I have to teach the people I work with everything I know about design for them to understand why design does not fit into a 2 week agile sprint and why the colors being used will not be chosen in a sprint planning session.
Twitter Bootstrap is a good idea but not all teams will benefit from using it. TB is great for small teams and startups that do not have a designer or a front-end guy on board. If that’s the case I highly recommend using it.
For teams that have an experienced front-end person then TB could actually hold you back. I have been using TB now for 2 months and the cracks are starting to show. The idea behind this framework is a good one, its very convenient for me as a front-end developer to be able to point other team members to the TB site and tell them to use the patterns that are already their, ready to use.
Using a framework means that you are always confined within that framework and the how that framework solves problems. When I started to use TB one of the first things I wanted to do was offsetting or pushing a column in a fluid layout. Turns out TB only supports push and pull on fixed layout. The project I am working on required high levels of customization. We have already build custom UI widgets that are missing from TB (No framework can solve all problems) and our customers also need to be able to customize the colors of the app. Turns out many of the colors in TB are hard-coded for some strange reason.
For me the drawbacks simply outweigh the benefits, but I do recommend TB for quickly prototyping new ideas and specially for teams that do not have a front-end developer.
corropted: sensory perception sensitivity fool. -
What our life is about besides basic needs like eating and sleeping, is people, communicating with people, fólk. To be around and communicate with people, is the most problematic and confusing challenge that we face in life. But some people seem to be good at it and others not, and why is that? I…
I was faced with a tough question today. My boss wants me to redo everything I have built for the last few weeks using Twitter Bootstrap. Now I have nothing against TB as a framework, specially for teams that do not have a dedicated front-end programmer. But for teams that have one and that person is also the designer, forcing him to use a 3rd party framework can have some negative drawbacks.
Frameworks can be good to quickly prototype new features in HTML. But like someone pointed out, a framework can never solve all user-interface problems because no two sites have the same requirements and problems. New problems require new components and a new solutions. Trying to shoehorn a framework like this into your app can hurt usability, specially if you do not take the time to customize and write your own solutions on top.
If your website is highly specialized, using Twitter Bootstrap might have very little benefit. Specially if you are a front-end developer yourself. A better solution is often to copy other solutions and build your own set of custom tools and components that fit the design you are working with. This approach will give you a productivity boost as you are working with your own code. Not to mention if you are already using LESS or other compiled languages, making your own custom framework is easier then ever and if you are like me, its also a lot of fun!
Know the structure of the content before you design, so you know what type of content you are dealing with. You don’t have to have all of the content or texts before you start, but you need to know some facets about the content before you dig in. The “Content is King” mantra is getting a bit old, but the reality is that content writers still aren’t getting the attention they deserve.
Is responsive design just a fad? Are mobile phones and tablets going away? No! Yet again, we are forced to learn how to deal with the winds of innovation. Web design is changing, and responsive design is about learning how to deal with a new landscape. More and more people are browsing on their mobile phones, and that number is only going to increase.
With responsive design, an old debate has resurfaced: should we design our sites using fixed pixel-based layout or fluid layout using percentages? While both options are valid, fluid layout is more “future proof,” and can adapt better to new devices. It’s also easier to manage when dealing with the ever growing number of screen resolutions. Using a fluid layout, you can build a site that behaves like a fixed-width site, but can easily change and adapt to your needs without having to rewrite a lot of CSS code.
Finally, we can start using other fonts that are different than the ones installed on the user’s computer. Google Web Fonts is an awesome place to start looking for fonts to use in your design. I’m always amazed by the quality of some of the fonts that are available. Right now Open Sans and Droid Serif are my favorites.
Parallax background were big last year, and will likely continue to be in heavy use. These are a bit gimmicky, but can produce super interesting results when executed well and not overdone — especially when using to many layers and heavy backgrounds that drain resources on the users computers and slow the experience down.
Using a jquery plugin like inview, developers can easily code animations when elements on web sites come into view. This can go very well with a simple parallax background, and is a great tool for designers for creating a narrative by using simple animations that are triggered when the user scrolls down a page.
Since I started making responsive sites, I have been building a fluid grid system that fits my needs as a designer and a developer. Since there aren’t NEARLY enough CSS grid systems out there, I decided to write some documentation and put the code up on Github.
Fluidable works on IE7+ and is built using LESS. It has fixed gutters set in ems and can do nested columns. It also has basic media queries built-in for mobile devices.
Fluidable CSS Grid System
When developing a responsive web site, one of the first decisions one has to make is whether to use a fixed (pixel/em) or a fluid percentage based layout. As a developer and a designer, a fluid layout can offer a robust and flexible way when building responsive web sites. Here are a few reasons to go fluid:
Responsive design is still very new, and developers are working to find solutions to the problems that have arisen. But it’s not all problems, however; responsive design can also be a great opportunity to advance the web in a new environment, given that users are increasingly consuming the web on mobile phones and tablets.
I have been working on a CSS framework for using when building responsive web sites. In the process, I have been thinking about the requirements for such a framework. Here is a list that I am following:
The Select Menu Navigation Pattern -
Andy Clark continues the discussion on select menu navigation and concludes: Let’s design something better. Totally agree, let’s!