How to design a responsive web? Advantages and disadvantages of responsive web design
|
I have been learning about responsive design recently and have done some sorting on this. Some of the pictures are from the Internet. 1. Why do we need responsive web design? Due to the widespread use of mobile devices and the gradual differences in the sizes of PC monitors, traditional web pages can no longer meet the browsing effects of multiple devices. For example, traditional pages will have large blank areas in large browsers, and cannot be fully displayed in small browsers and mobile devices, or the page will be reduced to fit the size of the mobile device and cannot be browsed normally. It also affects the click points. Many people will choose to enlarge the page before browsing, so the entire page needs to be dragged continuously, which gives the user a bad experience. In short, here are the points: Various screen sizes Various operating systems Various access devices Various needs
2. What is responsive web design? One website is compatible with multiple terminals. The same code can show different effects by device adaptation to meet different access devices. Always prioritize content. Mobile devices first: unobtrusive js and gradual enhancement. Browser-based: gradual enhancement of features and device detection.
3. Alternatives to Responsive Design Develop a completely independent mobile version for the website and develop a mobile application APP. But there are some shortcomings in doing so: Develop an independent version of the web page, which can be redirected through device adaptation. It requires the maintenance of multiple pages. It is suitable for homepage-level pages, but not suitable for content pages to develop mobile applications. The development cost is high and it is not conducive to search engine inclusion.4. Advantages and disadvantages of responsive web design Advantages: Multi-terminal visual and operation experience style is unified. Low development, maintenance and operation costs. Strong compatibility between different devices. Flexible operation: Responsive design is for pages, and only necessary parts of the page can be changed. User-friendly: Users can always stay connected with the website, such as the URL remains unchanged. Accumulate sharing: Collect all social sharing links through a single URL address. Optimize search engines: Can complete the connection between mobile websites and desktop websites. No redirection: Includes no user agent targeting.insufficient: Compatibility: Lower version browsers may have incompatibility issues. Mobile bandwidth traffic: Compared with the mobile version of the customized website, the traffic is slightly larger. Loading takes a certain amount of time: In responsive design, some seemingly unnecessary HTML and CSS need to be downloaded. Apart from that, the images were not resized to the right size according to the device and that’s what caused the loading time to double. Optimizing Search Engines: With responsive web design, determining keywords for search engines is not an easy task. Therefore, compared with general desktop users, mobile users tend to use different keywords, and it is more difficult to modify titles and other matters. Google ranking: If a responsive website is based only on mobile content, it is difficult to affect the website's Google ranking. As Google does not support such websites, it will not index your website. Time Spent: Developing a responsive website is a time-consuming task. If you plan to convert an existing website to be responsive, it may take more time. If you want a responsive website, it’s best to redesign the layout from scratch: the layout of responsive web design is mainly liquid, which is why designers have little control over the design style. And now is the time for designers to display various "replicas" in advance. Designers try to display wireframes and design prototypes for mobile and desktop layouts respectively. Only once both of these layouts are improved can a responsive web design strategy be truly realized.5. The difference between responsive and adaptive Responsive Layouts: Fluid Web Changing the layout of a web page to rearrange it for a better user experience makes testing difficultAdaptive Layout: Fixed Breakpoints Fully scalable web pages are cheap to implement, easy to test, and more controllable by design.6. Mobile terminal screen display elements Mobile device browser kernels: Trident (IE), Gecko (FF), Presto (opera, abandoned), Webkit (Safari, Chrome), Blink (Google) Size of mobile devices: iPhone (980), iPad (1024), Android (980 at 480*800 resolution), WinPhone (1024), etc. Resolution of mobile devices:
7. Responsive web design process User research and device specification estimation
Framework prototype planning & testing
Visual Design
Front-end construction
|
<<: Summary of the process and common problems of connecting VS2019 to MySQL database
>>: In-depth understanding of the seven communication methods of Vue components
Recommend
Solution for front-end browser font size less than 12px
Preface When I was working on a project recently,...
Ubuntu compiles kernel modules, and the content is reflected in the system log
Table of contents 1.Linux login interface 2. Writ...
WeChat applet realizes the function of uploading pictures
This article example shares the specific code for...
Deployment and Chinese translation of the docker visualization tool Portainer
#docker search #docker pull portainer 1. Download...
mysql 5.7.18 winx64 free installation configuration method
1. Download 2. Decompression 3. Add the path envi...
CSS to achieve Tik Tok subscription button animation effect
I was watching Tik Tok some time ago and thought ...
A brief discussion on the role and working principle of key in Vue3
What is the function of this key attribute? Let’s...
Detailed explanation of small state management based on React Hooks
Table of contents Implementing state sharing base...
js to achieve the effect of dragging the slider
This article shares the specific code of how to d...
react-diagram serialization Json interpretation case analysis
The goal of this document is to explain the Json ...
Teach you how to insert 1 million records into MySQL in 6 seconds
1. Idea It only took 6 seconds to insert 1,000,00...
Do designers need to learn to code?
Often, after a web design is completed, the desig...
Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7
Related reading: MySQL8.0.20 installation tutoria...
IIS and APACHE implement HTTP redirection to HTTPS
IIS7 Download the HTTP Rewrite module from Micros...
Solve the problem of IDEA configuring tomcat startup error
The following two errors were encountered when co...