5 Mobile Design Tips For some time now, mobile phones have been the main device for accessing the internet. Most websites are now more by mobile phones than by desktops. Thinking about mobile phones when creating a website layout is no longer secondary; it is the main task for those who work with web design. According to data from the IBGE (Brazilian Institute of Geography and Statistics) from 2015, 92.1% of internet access is done via mobile devices. Data from 2017 from the company SEMrush reveals that 52% of accesses to the Google website are made by mobile phones, 2% by tablets and 43% by desktops.
Mobile First
The “mobile first” concept has been by more and more web design agencies every day. Nowadays, thinking about mobile access is as important, if not more important, than thinking about desktop access.
The challenge for the web designer
>>>>>>>>>>>>>>>>>>When a web designer designs a website for a client, he or she usually presents the proposal showing the desktop version, since the client usually prefers to approve the layout iceland phone number list on the big screen. It is a big challenge for the web designer to make the client understand that he or she should give the same (or greater) importance to the mobile version.
5 Mobile Design Tips
1. Think in lines
Typically, users view their mobile screens vertically while browsing the internet. This means that the width of the screen is not very large. If you divide this width, the space for the content will be very tight. In other words. If you divide your layout into columns, the content in these columns will be “stuck” and without any “breathing space”. Therefore, the ideal is for the content blocks to be one below the other, that is, for you to divide your layout into rows .
2. Layout dimensions
This is a question that many people have: in what dimensions should I create the layout? The big problem is actually knowing what width to use, since the height can be “infinite” since the phone number digital library user can scroll the page. Our tip is to work with responsive images, in other words, images that adapt to the width of the screen dimensions. However, to create the layout, you can check the screen resolution of different devices using the element inspector in Google Chrome or Firefox, as in the following figures.
Firefox Element Inspector</p>
If you are remodeling an existing website that uses an access statistics tool such as Google Analytics, check the access data by device type, so you can know which screen dimensions are most used by users who access this webs
ite.
3. Effects and animations
Avoid using too many animations and visual effects. In addition to making the layout difficult to view and read, especially on small screens, this can affect the performance and graphic andorra business directory processing of the website. Many cell phones do not have enough graphic processing to render animations. We recommend, at least for now. Avoiding the use of sliders and carousels.
4. Touch areas (links)
When creating buttons, menus or links. Remember that mobile devices use small screens and navigation is done by finger touch. Therefore. The tip is to create large buttons and links with enough space for action so that they can be touched without error. One tip is to apply the CSS padding attribute (internal margin) to the links and to create space between different menu items using the margin attribute .
5. Submenus
Be careful when using submenus. Screen space is which can make it difficult to view all the menu items if the menu is too long. Often the menu won’t even fit on the screen. Try creating menus with only the primary navigation and leaving the next level of navigation within the page corresponding to that menu. Or spread the links throughout the content. For example: the company offers 10 product lines. of placing the “Products” item in the menu and 10 more items to the product line in the submenu, leave only the “products” item and, when . The user will be taken to the products page where they can view all the product lines. It’s an extra click that is worth it in usability.