Designers should not miss the responsive design framework. Designers should not

Designers should not miss the responsive design framework. Designers should not

Ethan Marcotte said the responsive design is to build a website based on a grid. After Marcotte defined this technology, the responsive design framework began to appear, mainly the combination of css and JavaScript. Many frameworks are open-source and can be downloaded for free and quickly customized.

Currently, the most popular frameworks are Bootstrap and Foundation.

As responsive design frameworks become increasingly popular, a huge controversy arises: why do professional designers still need to use these frameworks?

Many people claim that responsive frameworks are terrible because they do not understand a little bit of html and css knowledge. The following are some other comments that have a symbolic objection to the use of the framework:

• Designers can write their own frameworks. They should write their own frameworks if they know a little bit about html and css.
• Framework-based website loading is very slow.
• Framework-based websites look similar.
• With the redundant div labels, more javascript files are added to the css of more than 5000 rows, which is common for website expansion.

Despite the strong protests from opponents, the framework is not affected. I think the framework is useful. Even the most experienced web Front-end developers can study it well. I will explain the reasons for my support for the framework.

Paul-rand

The US website Paul Rand was built using Foundation.

I. responsive design framework

One morning, I was watching the key demonstration of Eli White on Northeast PHP Conference. He was a PHP developer and talked about the development of web and PHP over the past 20 years. He said: 15 years ago, background developers started building everything from scratch. At that time, there were not many available open-source resources, and there was no dedicated Content Management System (CMS) or several hundred thousand dollars in cost. If you want to make an overview of your website, you need to write one from scratch.

Today, in 2014, background developers no longer do this. Now they can use the SurveyMonkey API to create content for users within 10 hours, no longer 100 or 1000 hours. Is the SurveyMonkey code terrible? Are they the most efficient and ingenious? I am not a PHP developer. I don't know the answer to this question, but this API is continuously tested and debugged. It runs well and can be used in other projects for a long time, this is where its value lies.

White said that unless your customers want something very special and have enough financial support, most PHP developers have no reason to write their own overview from the very beginning in 2014.

So ~ What can be equivalent to quick website front-end technology? Unfortunately, we do not.

Currently, we have two options to create a website front-end. The first option isDownload a topic (or template ).It is usually used for CMS-based websites. A set of themes may provide some color options and some variable adjustments. On the other hand, compared with the cost of the entire website, a set of theme is mostly free or low-cost. Download a set of themes and change the color to a logo.

More importantly, a set of good themes will be updated on a regular basis. The instructions will be attached to make the modifications intuitive and easy. In the negative aspect, a set of theme may be used by many people, and it does not seem very novel and unique, more like a specific content management system.

Another option isCustomized solutions. We need to hire a designer to discuss the brand solution. They will experience repeated design and modifications, maybe directly implement the prototype on the browser, or use html and css to implement the design draft on the website, using CMS integrated design, consider not to use background management, and finally deliver the perfect product to the customer. On the other hand, each label is precisely placed, and the code is completely mutually exclusive, without any redundant labels.

To achieve this, developers must be well-trained and experienced. Once such a high level of members are added, the project price will go up. The project has been moved from the customer's target to the target customer's target, and the cost will rise. In addition, unless you write the document at an additional cost, once the initial member leaves, the new member must read the code of the old member again, be familiar with it, And then modify it, this is not a small cost.

Where can I download something between low-end design, Internet and advanced customization, and extremely expensive? What is equivalent to an API or code library of a background developer? Can we create something customized for the front-end?

We need to be able to use some pre-written elements to add them to custom columns and develop a custom solution. This is the product between low-end and high-end. We no longer need to build a framework from scratch. We can save several hours!

I mean, should we discard the framework of customized solutions? No, of course not. In the world of web development, a complete custom solution already exists, just like the existence of CMS, and each has its own application. If your customers have time and money to build the most perfect results, why not?

However, you need to know that customers generally do not have enough funds and time to wait for you to structure from the ground up. It may be "not perfect" and the code to be downloaded may be a little longer. However, this solution will be recorded and play a positive role during development. It can quickly produce a non-low-level product, which is worth it.

In the web world, other technologies have their own advantages and disadvantages in response-oriented design. Therefore, we can take this framework into consideration.

Grk

Grk, built by Bootstrap.

Ii. Advantages and Disadvantages of responsive design framework

Focus on Bootstrap 3 and Foundation 5. Let's take a look at the advantages and disadvantages of using one of the frameworks to build our own websites.

　　Browser compatibility

Browser debugging sometimes takes time to make the website itself. If you can reduce the time it takes to debug your browser, you are saving costs for the customer (of course, it is also protecting your hair from being lost so early ).

The responsive design framework is based on successful debugging in various browsers. Using these frameworks can greatly reduce the time required for website construction (the number of tests depends on the number of framework content you have customized. If you have only changed several colors, the number of debugging times is very small. If you change the mesh system of the framework, you need to perform multiple debugging times ).

The latest framework supports IE9 and later browser versions. There are a few tips to use the framework on IE8, but the framework is completely incompatible with IE6 and IE7. Generally, the framework also supports other browsers, such as Firefox, Safari and Chrome, and mobile browsers.

Unfortunately, if you want to apply the framework to a browser that has not been debugged, you need to spend time modifying the code for testing.

　　Custom File

The Bootstrap or Foundation download package contains the most basic website build files, including style icons and widgets. Some files will be relatively large. Generally, files are readable and compressed files.

Since each framework you select is a centralized framework, you do not need to use all the elements of the entire framework completely. Bootstra or Foundation allows you to customize the download of what you need. Therefore, you can simply use the css and javascript file packages you need to use on your web. In this way, the file expansion is reduced, and the download time is reduced, and the effect is the same (as you used to download the entire framework package.

However, if you want to add a previously excluded widget or style, you have to reconfigure the package now. However, this is completely unavoidable.I recommend that you do not consider the appearance of a website first.. First, customize the features you need, and then download the packages that only contain specific features. Once the framework is in place, you can start to customize the website appearance.

　　Note:Every time a new version of Bootstrap or Foundation is released, you have to download the custom package again. Record the files you have used and those you have not used. Therefore, you do not need to repeat this step when updating the files.

CMS Critic

CMS Critic, A previewed file management system built on Foundation.

　　Custom Code

You may need to customize the framework to some extent. The framework can be launched immediately without being downloaded. You may want to change some colors. If you have some experience, you may directly conquer the grid system.

Custom Code is only because you are not using a framework to make your website more popular. You can customize css to improve the appearance of your website. Either reference LESS (Bootstrap) or Sass (Foundation), or directly write it on your own.

　　The box style from the Bootstrap framework is very broad. The assumption here is that you will not change them at all. Therefore, you can reference LESS or Sass files in a separate style sheet to overwrite them. Unfortunately, the LESS and Sass files are extremely small. You need to add additional code. The rich built-in Bootstrap style makes it very popular among front-end developers.

　　Foundation has a few style Basics. You can also customize a style sheet to overwrite them and reference external style sheets. it seems easier to completely customize a style sheet. In general, there is no Foundation for developers to master this framework, because it requires more CSS and Sass knowledge than Bootstrap.

Bootstrap and Foundation can be customized before download, although LESS and Sass need to be changed. In Bootstrap, custom options are displayed on several pages (on the contrary, Foundation only changes a little ). However, if you are not familiar with LESS and Sass, it seems fast but dirty.

Similarly, you can define functions by defining javascript. The latest Bootstrap and Foundation versions support using jQuery to customize components.

If you use a dedicated screen to reference the framework, you need to customize it again when the framework is updated next time.

Note that Foundation has many javascript semicolons, but Bootstrap only has a small number, which affects a developer's choice.

　　Accessibility

Accessibility has become increasingly important for developers. Both frameworks have valid HTML, but we need to compare the accessibility of these two frameworks outside of HTML.

Bootstrap has made some progress with the help of Joomla. Joomla is an open-source CMS that directs Bootstrap to version 3rd. Developers of Joomla have made a long discussion about its accessibility. They do not want Bootstrap to reduce the accessibility of CMS, so they cited the ARIA specification and the screen reader-only style.

Unfortunately, the Foundation has not given priority to accessibility so far. It does not reference the ARIA specification and the screen reader-only style. However, Zurb already indicates that the Foundation will do more.

Webflow

Webflow, a drag-and-drop website created by referencing Bootstrap to create a website.

Iii. Summary

No responsive framework is perfect. As a tool for executing various tasks, additional code is required for this framework to respond to our needs. Of course, completely customizing a website may be more effective than using a framework.

Some front-end developers told me that they have their own grid systems, css and javascript components to maintain their websites. Of course, there are no errors in this method, but you need to maintain your own code. A popular framework can reduce your maintenance costs.

I called on front-end developers to reconsider the prospect of using a responsive design framework.Use it as a productivity toolYou can use part or even all of them. Download some or all files and use only one prototype or all. In short, you know how much you need to use for your project.

A framework is designed to make the website run fast with minimal debugging. The process of customizing it is completely different. Maybe you will change a few colors or others. However, no matter what the definition is, you need to standardize everything, record the code, and easily pass it to another developer and get familiar with it. The code is not perfect, but it is good.It greatly reduces the time required for developing a website.

Of course, this world has a fully customized space. I don't mean supporting mass customization. When the 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. It can satisfy your customers in terms of rapid prototype implementation, testing, and even production code.

Original article address: smashingmagazine Translation: uisdc