Responsive design frameworks that designers should not miss

Ethan Marcotte called responsive Design to build a Web site based on the grid. After Marcotte defined the technology, the responsive design framework began to emerge, primarily the combination of CSS and JavaScript. Many frameworks are open source, free to download and quick to customize.

The hottest frame of the moment is the bootstrap and foundation.

As the responsive design framework gets more and more hot, a huge controversy arises: why should a professional designer use these frameworks?

Many people claim that the response framework is scary because they don't understand a little bit of HTML and CSS knowledge. The following are some of the other iconic objections to the use of the framework:

• Designers can write their own framework, if they know a little bit of HTML and CSS knowledge, it should be written by themselves.
• Frame-based Web sites load very slowly.
• the framework-based Web site looks similar.
• With extra div tags, 5000+ line css for the latter more JavaScript files, website bloat is common.

Despite the strong protests, the opposition has not affected the continued prevalence of the framework. I think the framework is useful, even the most experienced web front-end developers can do a good research. I'll talk about why I support the framework below.

Paul-rand

The U.S. site Paul Rand was built using foundation

One, responsive design framework

One morning I was looking at Eli White's key demonstration on northeast PHP Conference, a PHP developer who spoke about the web and PHP developments over the last 20 years. He said one thing: 15 years ago, the background developer built everything from scratch. There weren't many open source resources available at that time , nor was there a dedicated content management system (CMS) or a $ hundreds of thousands of cost. If you want to make an overview of your site, then you need to write one yourself from scratch.

And now in 2014, backstage developers don't do that anymore. Now they can create content for users within 10 hours using the SurveyMonkey API, which is no longer 100 or 1000 hours. Is SurveyMonkey's code more scary? Are they the most efficient and ingenious? I am not a php developer, I do not know the answer to this question, but this API is constantly being tested and debug, it works well and can be used in other projects, which is the value of it.

' Unless your clients want something very special and financially supportive, most PHP developers have no reason to write their own overview from scratch in 2014, ' says White.

so~ what can be equivalent to the fast website front-end technology? Unfortunately, we didn't.

Currently we have two options to create a website foreground. The first option is to download a theme (or template). usually used for CMS-based websites, a set of themes may provide some color choices and some variable adjustments. On the other hand, a set of topics is mostly free or low-cost relative to the cost of the entire site. Download a set of themes, change the color for a logo is very simple thing.

More importantly, a good set of topics will be updated on a regular basis. And it will be accompanied by documentation to make the changes seem straightforward and easy. On the negative side, a set of topics may be used by many people, and it does not look very new and unique, more like a specific content management system.

Another option is to fully customize the solution independently . Need to hire designers to discuss the brand plan, they will experience repeated design and many changes, may be directly to the prototype into the browser, or the design is implemented in HTML and CSS to the site, the use of CMS integration design, consider the use of background management, and finally delivered to the customer the perfect finished product. On the other hand, each label is precisely placed, and the code is completely complementary, without the slightest redundancy tag.

However, to achieve this, developers must be trained and experienced. Once such high-level members join, the project price will go straight up, the project has shifted from small customer targets to big customer targets, the cost is high. In addition, unless you spend an extra fee on writing a document, if the initial member leaves, then the new member must look at the old member's code again, to be familiar with, and then modify, this is not a small cost.

Where can I download something between the low-end design, the Internet and the high-level customization, which is incredibly expensive? What is the equivalent of a background developer's API or code base? Can we create something that is specifically tailored for the front end?

We need to be able to take advantage of some pre-written elements, add them to a custom column, and develop a custom solution that is a product between the low end and the high end. We no longer need to build the framework from scratch, and we can save for a few hours!

Am I saying that we should abandon the framework of custom solutions? No, of course not. In the world of web development, a complete custom solution already exists, just like the existence of a CMS, each has its own niche. If your customers have the time and money to build the perfect effect, then why not?

But be aware that customers generally do not have enough money and time to wait for you to construct from scratch. Perhaps the "imperfect" is allowed to exist, and perhaps the code that needs to be downloaded is a bit verbose, but the solution is recorded and plays a very active role in development. It is worthwhile to quickly produce a product that is not inferior.

In the Web world, other technologies have their own advantages and disadvantages in dealing with responsive design, so we can think about this framework very well.

Grk

Grk, built by Bootstrap.

Ii. advantages and disadvantages of responsive design framework

Focusing on Bootstrap 3 and foundation 5, let's analyze the advantages of using one of the frameworks to build your own website with a short board.

　　Browser compatibility

The time spent in browser debugging sometimes catches up with the time it takes to make the website itself. If you can reduce the time it takes to debug your browser, you're saving money for your customers (and of course protecting your hair from falling off so early).

The responsive design framework is a framework based on the success of debugging in a variety of browsers. Using these frameworks can greatly reduce the time it takes to build a website (the number of tests depends on how many frames you have customized, and if you just change a few colors, the number of debugs is minimal; If you change the frame's grid system, you need to debug it more often).

The latest framework supports IE9 and above browser versions. Using frames on IE8 is a little bit tricky, but the framework is completely incompatible with IE6 and IE7. In general, the framework also supports other browsers, such as Firefox, Safari, and Chrome, as well as mobile browsers.

Unfortunately, if you want to apply the framework to a browser that hasn't been debugged yet, you'll need to take the time to modify the code to do the testing yourself.

　　Customization files

The bootstrap or foundation download package contains the most basic Web site build files, including rich-style icons and widgets. Some of the files will be quite large. Generally, files are readable and compressed file formats.

Since each frame you choose is a skeleton frame, where you don't need to fully use all the elements of the entire framework, Bootstra or foundation allows you to customize the parts you need to download. So you can simply use the CSS and JavaScript files you need to pack on your web. This reduces file bloat and also reduces download time, as well as the effect (as you would download the entire framework package).

However, if you want to add a widget or style that was previously excluded, you now have to reconfigure the package. But this is entirely avoidable. I recommend first to build a website, not to consider the appearance . Start by customizing the features you need before you download packages that contain only specific features, and once the framework is in place, you can begin customizing the look and feel of your site.

　　Note: whenever a new version of Bootstrap or foundation is released, you will have to re-download the custom package. Keep A careful record of the files you use and those you don't use, so you don't have to repeat this step when you update your files.

CMS Critic

CMS Critic, a preview file management system, built using foundation.

　　Custom code

Some degree of customization may be required, and the framework is not available for immediate online download. You may want to change some colors. And if you have some experience, perhaps you will directly conquer the grid system.

Custom code is simply because you use a framework not to make your site appear popular. You can customize the CSS to improve the appearance of your website. Either refer to Less (Bootstrap) or sass (Foundation), or you can write directly on your own.

　　the box styles from the bootstrap frame are very broad . The assumption here is that you won't change them at all. So you can refer to less or sass files in a separate stylesheet to overwrite them. Unfortunately less and sass files are also extremely small and you need to supplement your own code with extra. Bootstrap's rich built-in style makes it very popular with front-end developers.

　　Foundation has a small base of style . You can also customize a style sheet to overwrite them, referencing an external style sheet, and it will be easier to completely customize a style sheet. In general, for foundation, it is difficult for a developer without a certain foundation to navigate this framework because it requires you to master the knowledge of CSS and sass more than driving bootstrap.

Bootstrap and foundation can be customized before downloading, although it is necessary to simply change some less and Sass. In bootstrap, the Custom option is shown on several pages (in contrast, the foundation is just a little bit of a change). But if you're not familiar with less and sass, it's a little bit quicker but dirty.

Similarly, you can define a feature by defining JavaScript. The latest versions of Bootstrap and foundation support the use of jquery to customize parts.

If you use a dedicated screen to refer to a frame, you'll need to customize it again the next time the framework is updated.

Note that the foundation has many JavaScript semicolons, but only a small amount of bootstrap, which affects the developer's choice.

　　Accessibility

Accessibility has become increasingly important for developers. These two frameworks have effective HTML, but it is necessary to compare the accessibility of the two frameworks beyond HTML.

Bootstrap with the help of Joomla made some progress. Joomla is an open-source CMS that leads Bootstrap to the 3rd version. The developers of Joomla have done a long discussion on its accessibility, and they do not want bootstrap to reduce the accessibility of the CMS, so they cite the ARIA specification and the screen reader-only style.

It is unfortunate that the foundation has so far not given priority to accessibility. It does not refer to the ARIA specification and the screen reader-only style. But Zurb has said the foundation will do more.

Webflow

Webflow, citing Bootstrap made a drag-and-drop website production site.

Iii. Summary

No one response frame is perfect. As a tool for performing various tasks, additional code is required to enable this framework to respond to our needs. Of course, completely customizing a website might be more effective than using a framework.

Some front-end developers tell me that they have their own grid systems, CSS, and JavaScript components to maintain their websites. Of course there's nothing wrong with this approach, but you need to maintain your own code to do so. and a popular framework can reduce your maintenance costs.

I call on my front-end developers to reconsider the prospect of using a responsive design framework. think of it as a productivity tool that you can use as part of it, even all of it. Download some files or all, use just one prototype or all, in short you know how much you need to use on your project.

A framework is designed to allow websites to run quickly with minimal debugging. The process of customizing it is completely different, perhaps you will change a few colors or something else. But no matter what the customization, you need to do the specification definition, all standardize, record the code, so that it can be easily passed to another developer and he is familiar with. The code is certainly not perfect, but it's good enough. it greatly reduces the time we need to develop a website.

The world certainly has a completely customizable space. I don't mean to support mass customization. When a customer wants to add more content to the design, it is necessary to consider a responsive framework. In general it is a very useful tool. Make your customers happy with rapid prototyping, testing, and even production code.

Original address: Smashingmagazine translation: UISDC

Responsive design frameworks that designers should not miss