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
How to prevent website content from being included in search engines
Usually the goal of building a website is to have...
Small paging design
Let our users choose whether to move forward or ba...
Pure CSS drop-down menu
Achieve results Implementation Code html <div ...
Virtual Box tutorial diagram of duplicating virtual machines
After getting used to VM, switching to BOX is a l...
Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk
Problem Description When using Windows Server 201...
Fall in love with the simple CSS details, although insignificant, can improve efficiency
The future of CSS is so exciting: on the one hand,...
Detailed explanation of several ways to create a top-left triangle in CSS
Today we will introduce several ways to use CSS t...
mysql wildcard (sql advanced filtering)
Table of contents First, let's briefly introd...
Why does MySQL database index choose to use B+ tree?
Before further analyzing why MySQL database index...
Navicat for MySQL 11 Registration Code\Activation Code Summary
Recommended reading: Navicat12.1 series cracking ...
How to force vertical screen on mobile pages
I recently wrote a mobile page at work, which was...
How to create your own image using Dockerfile
1. Create an empty directory $ cd /home/xm6f/dev ...
MySQL sorting principles and case analysis
Preface Sorting is a basic function in databases,...
How to build lnmp environment in docker
Create a project directory mkdir php Create the f...
Docker image creation and one-click packaging and deployment of the entire project
Introduction to common Dockerfile instructions in...