Shulou(Shulou.com)06/02 Report--

What this article shares to you is about mastering the 15 suggestions of responsive web design, which the editor thinks is very practical, so I share it with you to learn. I hope you can learn something after reading this article. Let's take a look at it with the editor.

Responsive web design has become the new web standard, and many companies have accepted the challenge and have established specialized web design solutions (such as mobile-only development) or have begun to try to solve cross-platform responsive web design solutions. This article will show you some practical suggestions to help your design process and make it more efficient.

1. plan

As always, plans are always given priority. Once you start solving your design problems on paper, you are ready to build your site.

two。 Make full use of the prototype software

Adobe Edge Reflow is recommended, which allows you to use media queries, set breakpoints in the program, and design layouts that fit desktops, tablets and phones. You can then copy the CSS to another editor like Adobe Dreamweaver or other HTML to further refine your design.

3. First, consider a mobile strategy.

If you create a mobile website for many times, you can then scale up and design web pages on tablets and desktops. The focus of all three platforms is on web logo and text. If text can be read easily on mobile devices, then you won't have a problem on tablets and desktops.

4. Use navigation cautiously

If your site has only two or three navigation buttons, you can include them in a simple menu on the screen. If there are more menu elements, you may want to consider creating a single icon with drop-down menu items.

5. First roughly set up the website and feel it as a whole

Some companies, such as Jiffy software, create the entire page layout before they start writing code to ensure that they look and feel the way their customers want. When creating a mobile page, it is important to design the buttons to cover the size of your fingertips, and to keep the interface simple and practical. Many designers tend to add too many elements to the mobile interface, which can lead to design and practical problems. When in doubt, just keep the page simple.

6. Be ready to use many software programs

For many users, using a WordPress template is sufficient, but if you want to implement a complex design, you may need to use custom programs and write some personalized code for each site.

For example, if your layout is simple, you can use a template like Moboom, but for a more complex layout, you may need to use programs like Adobe Dreamweaver to design desktop layouts and mobile web layouts like GoMobi.

7. Image

When creating responsive design layouts, use optimized images for each layout. This will reduce zooming and broadband problems, using images in JPEG, GIF and PNG-8 format instead of PNG format, as it will inflate your file size by 5 to 10 times.

8. Use precise image parameters

For example, 500X300 pixels, 100ppi, and resize the image to match, which will eliminate the scaling and preserve the resolution and quality of the image. If your image still needs to be scaled, this may lead to a series of problems such as color depth and resolution.

9. Scroll with parallax

This will make the way your site responds more popular. Designed with many design elements, this effect may go too far, so here are some examples of using this effective site.

10. Questions about upgrades

If you design an one-time website, there is no need to consider the issue of update. But if you want to be a website that someone else can maintain and update, make sure it is easily updated, including writing upgrade guidelines for future generations, and making sure you have reasonable comments and documentation in your code, so that other people who need to be updated can see what you have done, which is often necessary to maintain / update.

11. Use text as little as possible on mobile devices

Use only the necessary text instead of copying your desktop computer design to your mobile. The latter often results in long-term scrolling pages, and this bad experience can cause you to lose a lot of users on mobile.

twelve。 Use Google design standards

On this page, you'll learn the advice Google gives you when designing sites for smartphones, and beyond that, you'll find out how to make your phone's web pages load faster.

13. Test code snippets and templates

Be careful when using API. Your accidental behavior may lead to performance problems on the site. If in doubt, test the components first.

14. Tools for creating frames

A quick way to create a responsive design is to redesign on the basis of what you already have, such as using ready-made themes to create subthemes. This will save you a lot of time because you don't have to build a new layout from scratch.

15. A simple design

This is especially important for responsive web design. Be sure to get rid of all non-essentials when designing your website, which will greatly shorten the page loading time.

Summary

As responsive web design becomes more and more popular, performance becomes more and more important. Think more about such things: accurate code, test template components, optimizing images, etc., all of which will make your site load faster and perform better.

These are the 15 tips to be proficient in responsive web design. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.