    
|
|
|
 |
If you’ve spent the last few months under a rock, then we’ve got a surprise for you. We are working on two brand new Smashing Books. The first, New Perspectives on Coding, will cover state-of-the-art techniques, case studies and coding strategies — all neatly packed into a gorgeous printed hardcover (and available as an eBook, of course).
So if you’ve always wanted to leave a trace of yourself to posterity, now you can (well, kind of). From the very first Smashing Book, we’ve reserved space to feature our readers in the book, and our fourth undertaking will be no exception.
A picture says more than a thousand words, and a Twitter avatar says more about one’s personality than a name ever could! So, following our tradition, we welcome you to submit your Twitter avatar for a double-page spread in the (printed and digital) book. Space is very limited, with only 750 slots available, so please be quick!
Presto! And if for some mysterious reason, you happen to feel like a Jedi afterwards, well, why not tweet about it using the hash tag #feellikejedi? No pressure: just sayin’!
We’ve assembled a remarkable lineup of authors for the book. All of them are well-respected designers and developers who will be divulging practical insights, design strategies and hands-on tools as they share new perspectives on Web design today. Here is a quick summary of the book’s theme and table of contents.
What works in theory sometimes doesn’t quite work as expected in practice. In this pragmatic book, well-respected designers and developers analyze their personal experiences, failures and successes from working on common front-end issues, and share the tools they use to tackle these issues effectively. You’ll learn state-of-the-art techniques and strategies to make your workflow more effective.
The book will feature valuable insights into large-scale projects, front-end architecture, maintainable code and responsible responsive Web design. It will also uncover smart front-end strategies, CSS and JavaScript tricks and obscure back-end techniques, and it will explore what it takes to improve performance for faster and more robust websites and Web apps.
| AUTHOR | CHAPTER | DETAILS |
| Addy Osmani | Rendering Performance Optimization For Mobile | |
Whether it’s on desktop or mobile, users want their web experience to be snappy, smooth and delightful. What this means is that even if the browser is busy rendering the page (i.e drawing it) or loading in content, the user should still be able to scroll around and interact with it without any slow-down. No one likes seeing visual glitchyness. In this chapter, Addy Osmani, the mastermind behind Yeoman and Devtools, provides a walkthrough on how to find and fix visual jitter in your pages. If you care about providing fast and smooth experiences, you will care about this chapter, too. Keywords: tools, techniques, strategy, workflow, optimization, rendering. |
||
| Harry Roberts | Breaking Good Habits: CSS Architecture For Tomorrow | |
 The Web is changing. Are you keeping up? We’ve outgrown the methods of yesteryear and it’s now up to us to update the unwritten rules of web development to fit the new landscape. This chapter explores some misconceptions about CSS, encourages a change in attitude in front-end development, explores practical approaches of and lessons learned in object-oriented CSS development, code structure, code management, naming conventions and verbosity of HTML.
You’ll explore a new frame of mind that is better equipped for building more powerful, pragmatic front-ends. Chapter keywords: CSS, OOCSS, BEM, architecture, strategy, semantics, code structure, front-end, naming conventions, performance. |
||
| Nicholas C. Zakas | The Roadmap to Maintainable, Clean and Effective Code | |
 Code is code no matter where you go, and code has a tendency to get messy as it gets large and old. What if you need to make changes? What if you didn’t anticipate the additional features that would be required? What if the project ends up going in a different direction? Can your code adapt?
We are rarely taught how to deal with messy code. However, someone is going to have to maintain that code. That someone might be you next month or it might be someone else next year, but someone eventually will need to maintain that code. On a large project with many developers, the problem is magnified. How can everyone work in the same code base in such a way that making changes in the future are easy? That’s what this chapter is about. Chapter keywords: maintenance, architecture, conventions, code style, documentation, components, legacy code, testing, CSS, JavaScript. |
||
| Tim Kadlec | The Culture of Performance | |
 The Web has a serious weight problem and the users are the ones who suffer as a result. The impact of improved web performance is no minor detail: by caring a lot about how fast our websites and applications are, we can explore new markets, gain increased revenue, improved business metrics and better user satisfaction. But how do we bake performance into the design process? We must make performance part of the discussion from the very beginning of the process, and we must be concrete about it.
Chapter keywords: performance budget, optimization, speed, efficiency, mobile, latency, loading, rendering |
||
| Paul Tero | How To Fix The Web: Obscure Back-end Techniques And Terminal Secrets | |
 Imagine that you wake up one morning, groggily reach for your laptop and fire it up. You’ve just finished developing a brand new website and last night you were proudly clicking through the product list. The browser window is still open, the Widget 3000 is still sparkling in its AJAXy newness. You grin like a new parent and expectantly click on “more details.” And nothing happens. You click again, still nothing. You press “Refresh” and get that annoying swirling icon and then the page goes blank. Help! The Internet is gone!
This chapter starts with the worst case scenario and works inwards, exploring the infrastructure of the Internet and the make-up of a Web server, imparting lots of little tips and commands along the way, opening up a new perspective on how websites can stop working and be fixed. Chapter keywords: back-end, DNS, servers, networking, infrastructure, SSH, firewalls, DOS, hacks, debugging, backup, Apache, security. |
||
| Aaron Gustafson | Building Adaptive Interfaces | |
 To create truly exceptional designs, we must not only reduce the friction inherent in completing a task, but we must reconcile aesthetics with usability by designing adaptive interfaces. Smartly built interfaces offer a continuum of experience. So what if we architect our interfaces to adapt to the capabilities of our user’s devices in order to ensure a positive experience, even if it’s not an identical one?
In this chapter, Aaron explores the layers of a typical Web experience and breaks down the development process into manageable steps that enable accessible, functional and empathetic interfaces. He also describes his own process and various techniques that help him to achieve this very goal in daily routine. Chapter keywords: adaptive interface, progressive enhancement, empathy, layer cake, constraints, lazy loading, UI Construction Flow, JavaScript, adaptive components, patterns, style tiles |
||
| Mat Marquis | Robust, Responsible, Responsive Web Design (Filament Group’s Case-Study) | |
 Responsive Web design is starting to get a reputation, and not the kind of reputation that it rightfully deserves. The most common death knell we’ve heard ringing out—lately, anyway—is that every page of a responsive site is fated to weigh in at a couple dozen megabytes and there isn’t a single thing that any of us can do about it.
There are good solution though. We can’t blame responsive Web design for mistakes that we, developers, have been making. This is on us, and you don’t see any carpenters writing blog posts about how hammers are a failed methodology because of the time they dropped one on their foot. We can do better than blaming our tools for our mistakes. This chapter is about exactly that: tools, techniques, lessons learned and practical tips to manage responsible responsive designs in real-life projects. Chapter keywords: Responsive Web design, responsive images, conditional loading, progressive enhancement, optimization, CSS, JavaScript, workflow, optimization, case-study. |
||
| Andy Hume | Real-Life Responsive Web Design (The Guardian’s Case-Study) | |
 Ensuring good cross device and cross browser experiences has always been a thing, but browsers adoption of media quieries solved a key problem and let us jump forward very fast. This chapter looks at some lessons from implementing on Guardian and discussions with others like BBC, Boston Globe. In a world where the number and diversity of browsing platforms is increasing every day these orgs understand the value of having one platform and codebase for delivering their web products.
Chapter keywords: Responsive Web design, optimization, performance, RESS, case-study. |
||
| Christian Heilmann | Vanilla Web Diet | |
 When we go out and use our mobile devices or wireless that is available in cafes and hotels things don’t look as bright as they do on our incredibly fast connections at home. There, the larger part of our time is consumed looking at spinning animations telling us something is loading and many a time we are being told that “the connection is wonky” and that we should try again.
That’s a sign of the Web being broken. It’s time to fix it. Let’s try to take a break in our drive to be cool and new and innovative the whole time and check out what we are doing — analyze our eating habits so to say. Christian Heilmann calls this the “Vanilla Web Diet,” much like people start calling using JavaScript without any libraries “Vanilla JavaScript.” This chapter explores some of the fundamental ideas and thoughts that you can apply to slim down your next app or existing solution. Chapter keywords: optimization, performance, speed, strategy, browsers, quality of code. |
||
Authors of the “New Perspective on Coding”, a book about state-of-the-art techniques, strategies and workflow for Web developers.
A tasty early preview of Anna Shuvalova’s beautiful illustrations for The Smashing Book #4: namely, for Christian Heilmann’s chapter “Vanilla Web Diet” on the left, and Mat Marquis’ chapter “Robust, Responsive, Responsive Web Design” on the right. (Large view)
© The Smashing Editorial for Smashing Magazine, 2013.
]]>
The widespread issue of website owners neglecting the value of their web content is a big problem.
We should talk about this problem because, if you think about it, when people go online their primary reason for doing so is to consume content.
To read blog posts, to look at status updates of our friends on Facebook, to read reviews about a restaurant we are thinking of going to, to look at our credit card spending habits through our bank’s website, to learn about something that interests us — these are just some of the common activities we do on the Web.
And these activities are all centered around the consumption of content.
There are some companies that are starting to progressively rethink their strategies regarding web content. This needs to happen more often.
Allow me to go over the importance of a solid content strategy, as well as some starting points for developing your own web content strategy.
In the process of website planning, we all already know that we should:
The focus and widespread knowledge towards the importance of web design, web development, usability, and user experience is definitely positive, considering that only a few years ago most of the meetings I have had with clients had to start with an explanation of what the term "usability" meant.
However, what is missing in these discussions — what is in desperate need of attention — is web content and the creation of a comprehensive and unified strategy for it.
A discussion about web content during planning is often limited to who will be in charge of it. In the best of cases, sometimes there will be discussions about SEO or social media marketing of content.
Most of the time, that’s it. And that’s not close to being enough.
In addition to the commonplace disregard of web content in most websites, another big challenge is the coordination and proper design of the content creation process.
In large websites, for example, each website section/department/subdomain might have a different editor working without consulting other team members.
Then, the legal department might also put their two cents in and require the modification of content out of the context of the main objectives, and without considering the entire collection of the site’s content.
Then, after all is said and done, the CEO/client/decision-makers — all of whom always know best — might ask for revisions.
And voila! Instead of a consistent message across the entire site, we have a mishmash of content.
It’s impossible to develop a consistent tone of voice with a content-production workflow like that.
Our web content strategy must be unified, and our content should work together in unison to make a better overall user experience.
Losses that stem from a deficient web content strategy are easy to imagine.
In general, Web users are more discerning and choosy than ever before about the content they choose to consume. A poor user experience with your content will have very little chance of being read by your target audience.
And, let us talk in terms of online marketing and sales: None of your marketing messages will be able to sell a product without being useful and without being well-crafted.
If the content across the funnel is a mess, forget about conversion.
Hard-to-read product descriptions, bad photos, vague purchasing/check-out processes with clumsily written and confusing web copy and UI labels — errors like these will cost your website a lot of lost revenue.
More and more companies are realizing the facts related to the importance of web content and the need for a solid content strategy framework.
One of the best ways to start a discussion about web content strategy is by looking at successful cases.
Looking for case studies on web content strategy, I was able to discover efforts taken by some really big brands and organizations. Here are three of them.
"Content 2020" by Coca-Cola
A great illustration of a well-thought-out web content strategy is the recently announced communication strategy from one of the giants of the business world. Coca-Cola Content 2020 is a far-reaching plan organized completely around content and its flow between the Coca-Cola brand and its consumers.
The fact that such a big player makes up all of the marketing around content is an admirable thing to look at.
The YouTube video discussing Content 2020 is, in itself, proof of the Coca-Cola content strategy’s efficacy: The video attracts attention with its originality, being full of informative details and candidly presenting the change that the concept will introduce.
The result? 300,000+ YouTube views and many enthusiastic comments.
"Create Once, Publish Everywhere" by NPR
National Public Radio (NPR) has developed an inspiring strategy called Create Once, Publish Everywhere.
The concept is simple: Produce content that will be available in all forms of media.
Red Bull Media House
A leading example of a company associated with good content strategy is Red Bull.
Red Bull, an energy drink company, even has its own media house! That is a testament to the brand’s dedication to content.
We can observe Red Bull transitioning from the typical sponsored posts, sponsored reviews, and press releases, to producing their own interesting and enriching online content.
Looking at these examples, we can see a couple of patterns emerging.
Good content is not accidental.
Good content is a result of a good content strategy; a strategy that puts the emphasis on producing valuable, useful, and interesting content.
You should decide right at the start that the primary objective of your content strategy is to meet the needs of users, not the thoughtless promotion of your brand.
Content strategy must be fully integrated with the company’s other processes; it should not be an afterthought.
Good content requires patience and consistency.
Instead of aiming for a spectacular one-time-big-time viral success, it’s necessary to build a solid foundation and plan for the long haul. It can take months, even years, to develop an effective content strategy.
Here is my company’s content strategy development workflow:
I will discuss some key parts of this workflow in just a little bit.
The essential concept behind a good content strategy is that each component of it should benefit the user.
If a certain piece of content does not serve the user, we should remove it or revise it.
The key to effective content-planning may be the 70/20/10 rule Coca-Cola formulated (shown earlier).
According the 70/20/10 rule, we should take the following proportions to creating a body of content:
Let me now discuss some key stages of the content strategy development workflow.
Personas are an effective way to capture the essence of the various segments of the website’s audience based on the information we derive from them. The key to content strategy success, after all, is to understand who our users are and what they expect from us.
Representing target groups in the form of a person’s profile may seem simplistic, but the result will be stuck in the memory of team members and content producers.
For content strategy projects, my company, Symetria, uses a persona template that helps us relationally evaluate key benefits and concerns of a specific persona against the client’s business goals:
Feel free to download the full-size image here.
A clear definition of our customers enables us to analyze how they might prefer to consume web content.
After that is done (through personas), we are ready to prepare for content production.
Content Inventory and Gap Analysis
We can conduct content auditing and gap analysis to see how our current online communication (on the website, social media, email, etc.) responds to the needs of customers.
Content auditing using spreadsheet software. Source: uxmastery.com
The important things to determine at this stage are:
Knowledge derived from these activities will be a strong foundation to work on top of, and will describe the basic guidelines for the content production process.
But this stage is only the starting point to results and deliverables. We now need to move on to production.
Once we are current with the existing content and after we have identified our content’s objectives, it’s time to plot out a strategy for creating content.
Content Maps
To produce harmonious web content you can use a popular technique called content mapping.
Content mapping will answer these questions for you:
Content mapping should be a comprehensive illustration of how a piece of content will affect the content consumer.
Each piece of content should serve a specific task.
This task may be to bring prospects closer to a purchasing decision. It may be to improve customer satisfaction after a purchase has been made. It could be about building a relationship between the brand and the consumer. Whatever task that is, it needs to be identified at this portion of the process.
Content Templates
While the content map shows us the overall relations of different content types and pieces of content, the specific guidelines are defined within content templates.
Content templates are created as we break down the microstructure of each content type, defining goals and rules for every chunk of content.
Content templates serve these functions:
Doing the steps above will give you a solid foundation to build on top of that will set the stage for a good content strategy.
We live in an era where "experience" is a commodity.
We expect every single moment we experience on the Web to entertain, develop, and enrich us. And content is a powerful experience transmitter.
Content consumers are very selective of the information they receive, and expectations from content producers are high. Let us not take this fact for granted.
Wojciech Chojnacki is the Strategy and Development Leader at Symetria, a Polish company that provides comprehensive e-business and user experience services. Wojciech has 7 years of experience in UX and user-research, having worked with companies like Philip Morris International, LexisNexis, and Orange.
The post Content is All That Matters on the Web appeared first on Six Revisions.
]]>
Bootstrap is by no means the only HTML/CSS interface framework out there, but I think it’s safe to say that it changed the game. This kitchen-sink-included pile of code has made the design and development of many an app (and website) a lot easier, and popularized the massive HTML framework as a byproduct.
Sadly, the sheer extent of its feature set appeals to the lazier aspects of human nature, and many of the people who choose to use it stick with the defaults. Now, mind you, the default styles and layout grid are not bad by any stretch of the imagination. They’re the result of a lot of hard work and extensive testing by the Twitter team. They are as solid a foundation to build on as any.
But that’s all they are: a foundation. Frameworks, as their name would suggest, are not meant to be used as a be-all, end-all solution to your UX needs. The one exception to this rule might be if you’re developing something internal that the public will never see. But even then… The whole idea is to take them further, expand on and alter them.
Bootstrap’s developers have actually done a very good job of making this easy to do: their code is modular; and you can download individual components of the framework to use as you see fit. They’ve even provided a basic customization tool on their website that allows you to edit all of the variables as needed.
The rest, however, is up to us. And man, some truly impressive designers and developers have stepped up by creating mods and tools that leave the rest of us with no excuses. There is no reason to settle for the defaults.
Evaluate your individual projects; perhaps Bootstrap’s default typography is right for you, but the color scheme and grid aren’t, maybe you need different icons. Identify the places where Bootstrap falls short of your needs, and take a look at the following resources.
These are fully-fledged mods that take the basic bootstrap UI and turn it into something almost unrecognizable. Their uses are somewhat specific and limited; but if they meet your needs, they can save you time and money.
The first mod on this list is Flat UI. Released by the guys at Designmodo, Flat UI achieved instant popularity in the design community and for good reason: it’s beautiful.
Created for those who love flat design — as opposed to Bootstrap’s somewhat skeuomorphic tendencies — each UI element has been re-designed from the ground up with a brand new aesthetic.
With vector icons, a new glyph icon font, custom UI elements (like a to-do list) and multiple easily changed color schemes, Flat UI has made me, and likely many others, rethink what Bootstrap can look like.
My one pet peeve: the text size for your basic paragraph element is a little small for a website. To be fair, it’s probably just right for an app interface where you might put text in rather small spaces.
Flat UI is free, but you can pay for a pro version with extra elements, functionality, and PSD files.
Remember how I said that some of these mods had rather specific use cases? Well I wasn’t kidding. Fbootstrapp has been completely re-worked to be compatible with Facebook’s user-interface elements.
Why would anyone do that? Well, in their own words, “Fbootstrapp is a toolkit designed to kick start development of Facebook iFrame apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation and more, styled in the typical Facebook look and feel.”
Facebook app developers, take note: your job just got easier.
Bootstrap might be intended for use in applications, but it needs a bit of work if you intend to make a classic “admin interface” with it. Jumpstart UI brings you three different templates that do this admirably.
Admin UI icons, widget styles, jQuery-based data visualization plugins and more are brought together in clean, customizable and fully responsive layouts.
These mods are different from the others in one major way, however. There is no free version; you have to pay for them outright. They’re not very expensive, though: they range between $15 and $20 USD. For the sheer amount of effort that’s gone into them, I’d say it’s worth it, if they meet your specific needs.
Some people love it, and many detest it with a passion; but there’s no denying that Windows 8 and its Metro UI have caused a stir in the design world. I, for the life of me, can’t really think of any use case (outside of some sort of software store) where this kind of UI would be particularly useful. But hey, in BootMetro we have one!
It’s free, and seems to be quite feature-complete, so check it out. It may not be particularly useful for most people, but it’s an interesting code experiment. (I mean really? Bootstrap and Metro? I didn’t see that coming.)
So, you want to tailor your Bootstrap setup to better meet your UI/UX needs. Where do you start? Well, you could dive straight into the code. I’ve done that. I’ll tell you, though, it can be rough.
If you want to change all of the typography, or the button and link colors, or the navbar styles manually, you’re going to be there a while. You could edit all of the variables in the customization app on the Bootstrap website, but you’ll need to know the HEX codes for all of the colors, and you don’t get any visual feedback as you make changes.
Fortunately for us, there are quite a few Bootstrap theme makers that were created for this purpose specifically. These are the two best that I’ve found so far.
If you can ignore the ungainly interface, StyleBootstrap is a powerful tool for editing most of the default UI elements that you’ll find in the framework. If you want to get started quickly, changing only the most obvious things, then this is the place to start.
Bootstrap Magic is the tool to use if you want to do an in-depth rebranding of the framework. It has a nicer, simpler interface and gives you the ability to tweak far more elements than StyleBootstrap. Be warned, though… this will take longer. That said, it still wouldn’t take nearly as long as it would to change everything manually.
Suffice it to say that there are things that Bootstrap doesn’t have that you might find useful. To start with, we have icons.
Bootstrap’s glyph icons are cool, but limited. You have dark icons, then you have light icons, all set up in a nice little sprite image. Icon fonts, however, are far more versatile. Anything that you can do to text with CSS3, you can do to these icons. Change the size, the color, give them a drop-shadow; it’s quite literally as easy as writing CSS. With some 361 icons at the time of this writing, Font Awesome is worth checking out.
Bootsnipp is a library of HTML snippets designed to work with Bootstrap, presumably without adding any extra libraries. Snippets include: tabbed sign-up and login forms, carousels, better calendars, an e-mail interface that resembles Gmail, a media player UI and more.
If you’re stuck trying to figure out how to put elements together in your UI, take a look through the Bootsnipp library. If they don’t have exactly what you need, the code examples might help you figure out how to do it.
With Twitter’s favorite framework being as widely adopted as it is, there’s probably more information on how to customize Bootstrap than any list can contain.
After all, that’s what the Internet is for, right? That and… cats.
Have you modified Bootstrap? Did you do it manually or use a resource? Let us know in the comments.
| Top-Selling Vintage Veneer Font Family – only $9! |
 |
Bootstrap is by no means the only HTML/CSS interface framework out there, but I think it’s safe to say that it changed the game. This kitchen-sink-included pile of code has made the design and development of many an app (and website) a lot easier, and popularized the massive HTML framework as a byproduct.
Sadly, the sheer extent of its feature set appeals to the lazier aspects of human nature, and many of the people who choose to use it stick with the defaults. Now, mind you, the default styles and layout grid are not bad by any stretch of the imagination. They’re the result of a lot of hard work and extensive testing by the Twitter team. They are as solid a foundation to build on as any.
But that’s all they are: a foundation. Frameworks, as their name would suggest, are not meant to be used as a be-all, end-all solution to your UX needs. The one exception to this rule might be if you’re developing something internal that the public will never see. But even then… The whole idea is to take them further, expand on and alter them.
Bootstrap’s developers have actually done a very good job of making this easy to do: their code is modular; and you can download individual components of the framework to use as you see fit. They’ve even provided a basic customization tool on their website that allows you to edit all of the variables as needed.
The rest, however, is up to us. And man, some truly impressive designers and developers have stepped up by creating mods and tools that leave the rest of us with no excuses. There is no reason to settle for the defaults.
Evaluate your individual projects; perhaps Bootstrap’s default typography is right for you, but the color scheme and grid aren’t, maybe you need different icons. Identify the places where Bootstrap falls short of your needs, and take a look at the following resources.
These are fully-fledged mods that take the basic bootstrap UI and turn it into something almost unrecognizable. Their uses are somewhat specific and limited; but if they meet your needs, they can save you time and money.
The first mod on this list is Flat UI. Released by the guys at Designmodo, Flat UI achieved instant popularity in the design community and for good reason: it’s beautiful.
Created for those who love flat design — as opposed to Bootstrap’s somewhat skeuomorphic tendencies — each UI element has been re-designed from the ground up with a brand new aesthetic.
With vector icons, a new glyph icon font, custom UI elements (like a to-do list) and multiple easily changed color schemes, Flat UI has made me, and likely many others, rethink what Bootstrap can look like.
My one pet peeve: the text size for your basic paragraph element is a little small for a website. To be fair, it’s probably just right for an app interface where you might put text in rather small spaces.
Flat UI is free, but you can pay for a pro version with extra elements, functionality, and PSD files.
Remember how I said that some of these mods had rather specific use cases? Well I wasn’t kidding. Fbootstrapp has been completely re-worked to be compatible with Facebook’s user-interface elements.
Why would anyone do that? Well, in their own words, “Fbootstrapp is a toolkit designed to kick start development of Facebook iFrame apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation and more, styled in the typical Facebook look and feel.”
Facebook app developers, take note: your job just got easier.
Bootstrap might be intended for use in applications, but it needs a bit of work if you intend to make a classic “admin interface” with it. Jumpstart UI brings you three different templates that do this admirably.
Admin UI icons, widget styles, jQuery-based data visualization plugins and more are brought together in clean, customizable and fully responsive layouts.
These mods are different from the others in one major way, however. There is no free version; you have to pay for them outright. They’re not very expensive, though: they range between $15 and $20 USD. For the sheer amount of effort that’s gone into them, I’d say it’s worth it, if they meet your specific needs.
Some people love it, and many detest it with a passion; but there’s no denying that Windows 8 and its Metro UI have caused a stir in the design world. I, for the life of me, can’t really think of any use case (outside of some sort of software store) where this kind of UI would be particularly useful. But hey, in BootMetro we have one!
It’s free, and seems to be quite feature-complete, so check it out. It may not be particularly useful for most people, but it’s an interesting code experiment. (I mean really? Bootstrap and Metro? I didn’t see that coming.)
So, you want to tailor your Bootstrap setup to better meet your UI/UX needs. Where do you start? Well, you could dive straight into the code. I’ve done that. I’ll tell you, though, it can be rough.
If you want to change all of the typography, or the button and link colors, or the navbar styles manually, you’re going to be there a while. You could edit all of the variables in the customization app on the Bootstrap website, but you’ll need to know the HEX codes for all of the colors, and you don’t get any visual feedback as you make changes.
Fortunately for us, there are quite a few Bootstrap theme makers that were created for this purpose specifically. These are the two best that I’ve found so far.
If you can ignore the ungainly interface, StyleBootstrap is a powerful tool for editing most of the default UI elements that you’ll find in the framework. If you want to get started quickly, changing only the most obvious things, then this is the place to start.
Bootstrap Magic is the tool to use if you want to do an in-depth rebranding of the framework. It has a nicer, simpler interface and gives you the ability to tweak far more elements than StyleBootstrap. Be warned, though… this will take longer. That said, it still wouldn’t take nearly as long as it would to change everything manually.
Suffice it to say that there are things that Bootstrap doesn’t have that you might find useful. To start with, we have icons.
Bootstrap’s glyph icons are cool, but limited. You have dark icons, then you have light icons, all set up in a nice little sprite image. Icon fonts, however, are far more versatile. Anything that you can do to text with CSS3, you can do to these icons. Change the size, the color, give them a drop-shadow; it’s quite literally as easy as writing CSS. With some 361 icons at the time of this writing, Font Awesome is worth checking out.
Bootsnipp is a library of HTML snippets designed to work with Bootstrap, presumably without adding any extra libraries. Snippets include: tabbed sign-up and login forms, carousels, better calendars, an e-mail interface that resembles Gmail, a media player UI and more.
If you’re stuck trying to figure out how to put elements together in your UI, take a look through the Bootsnipp library. If they don’t have exactly what you need, the code examples might help you figure out how to do it.
With Twitter’s favorite framework being as widely adopted as it is, there’s probably more information on how to customize Bootstrap than any list can contain.
After all, that’s what the Internet is for, right? That and… cats.
Have you modified Bootstrap? Did you do it manually or use a resource? Let us know in the comments.
| 1000+ Fun And Engaging Cartoon Illustrations – only $17! | |
|
|
Your pattern of behaviour on Twitter can be defined by a simple “genotype” and used to predict your future behaviour, say network researchers.
