Web-Responsive design skills inventory

Responsive web design has become a new Web standard, and many companies have embraced this 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.

　　 1. Planning

As usual, the plan always has to be placed at the first priority level. Once you start solving your design problems on paper, you're ready to build your site.

　　 2. Make good use of prototype software

We recommend using Adobe Edge Reflow, which allows you to use media queries, set breakpoints within your program, and design layouts for your desktop, tablet, and phone. You can then copy the CSS to another like Adobe Dreamweaver or another HTML editor to further refine your design.

　　 3. First consider a mobile-side strategy

If you're creating a mobile site for the first time, then you can scale up and design your pages on tablets and desktops. The three platforms are focused on Web logo and text. If text can be easily read on a mobile device, then you won't have a problem with the tablet and desktop platforms.

　　 4. Use Navigation with caution

If your site has only two to three navigation buttons, you can include these buttons in a simple menu on the screen. If you have more menu elements, you might want to consider creating a single icon with a drop-down menu item.

　　 5. First create the site roughly, the overall feeling under

Some companies, like Jiffy Software, start by creating the entire page layout before they begin to write code, which ensures that they do the look and feel the customer wants. When creating a mobile page, it is important to have the button design enough to cover the size of the fingertips, and the other point is to keep the interface both concise and practical. Many designers tend to add too many elements to the mobile interface, which can lead to problems with design and usability. When in doubt, keep the page simple.

　　 6. Get ready to use many software programs

For many users, using a WordPress template is enough, but if you want to implement a complex design, you might want to use a custom program and write individual code for each site individually.

For example, if your layout is simple, you can use a template like Moboom, but for a more complex layout, you might want to use a program like Adobe Dreamweaver to design a desktop layout and design a mobile page layout like Gomobi.

　　 7. Image

When you create a responsive design layout, you use an optimized image for each layout. This reduces scaling and broadband issues, using JPEG, GIF, and PNG-8 format images instead of PNG format because it expands your file size by 5 to 10 times times.

　　 8. Use Accurate image parameters

For example, 500x300 pixels, 100ppi, and match the size of the image, which eliminates scaling and preserves the resolution and quality of the image. If your image needs to be scaled, this can lead to a range of issues such as color depth and resolution.

　 9. Using parallax scrolling

This will make your site more popular in the way it responds. Designed with many design elements, this effect may be overkill, so there are some examples of sites that use this good effect.

　 10. Questions about the upgrade

If you are designing a Web site that is a one-time project, there is no need to think about updating the issue. But if you want to make a website that you give to someone else to maintain the update, make sure it's easy to get updated, including having to write the upgrade guide to Yimeimei, make sure that you have the proper comments and documentation in your code so that other people who need to update can see what you've done, and it's often necessary to maintain/update this.

　 11. Use as little text as possible on your mobile device

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

　　 12. Using Google design standards

On this page, you'll learn what Google gives you when designing a site for smartphones, and beyond that, you'll find out how you can make your mobile page load faster.

　　 13. Test code Snippets and templates

When using the API, be careful. One of your occasional behaviors can lead to site performance issues. If in doubt, test the component first.

　　 14. Tools for creating frames

A quick way to create a responsive design is to make two designs on an existing basis, such as creating sub-themes with ready-made themes. This saves you a lot of time, because you don't have to start building a new layout from scratch.

　　 15. Simple Design

This is especially important for responsive web design. Be sure to remove all non-essentials when designing your site, which will significantly shorten the page load time.

Web Responsive design skills Market point