So what are some important considerations to keep in mind when designing for mobile? Let\u2019s take a look.<\/p>\n
Performance<\/strong><\/h2>\nPerformance is one of the biggest problems that many sites experience.<\/p>\n
Not only does it affect SEO, but it also impacts traffic, usability and ultimately, conversions. Since the latter is the one that most businesses care about, it\u2019s worth noting that a Kissmetrics study<\/a> found that most mobile users (30%) wait between 6 and 10 seconds before abandoning a site. That\u2019s a fairly long load time and not very difficult to achieve \u2013 but every second that you can shave offload times counts and you should aim for much less than that.<\/p>\nAfter all, like we stated in Interaction Design Best Practices<\/a>, digital time and real time are not the same.<\/p>\n![\"Interaction](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-16-at-6.34.24-PM.png\")
<\/p>\n
Photo credit: <\/em>KISSMetrics<\/em><\/a><\/p>\nThe study found that there was a strong correlation between page load times and customer behavior. 79% of shoppers said that they would be less likely to buy from a site with poor performance again, whilst a 1-second delay was found to decrease customer satisfaction by 16%.<\/p>\n
So, this shows that site performance is an important factor to UX, SEO and to customer behavior and conversions.<\/p>\n
![\"delay](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-16-at-6.36.01-PM.png\")
<\/p>\n
Photo credits: <\/em>KISSMetrics<\/em><\/a><\/p>\nPerformance issues<\/a> can be caused by all kinds of things, including:<\/p>\n\n- Bloated, untidy code<\/li>\n
- Plugins<\/li>\n
- Themes<\/li>\n
- Under-optimized images<\/li>\n
- Poorly constructed responsive design<\/li>\n
- Render-blocking JavaScript and CSS<\/li>\n
- Lack of GZIP compression<\/li>\n
- Poor server setup<\/li>\n<\/ul>\n
Of the above, poor server setup is likely to be the one that most businesses have the least control over. Cheap or free hosting tends to come with its own issues and should be avoided for business sites.<\/p>\n
In the past, I moved two of my responsive sites across to a managed WordPress service and this fixed a lot of the performance issues overnight. It wasn\u2019t a cheap or free host that I was using previously, but it was affecting site speed. It\u2019s not always simple to diagnose server issues though. The first step would to run a speed test using Google Page Speed Insights<\/a> and\/or GT Metrix<\/a> to see if it picks up a poor server response time. If this is the case, then you can perform a Trace Route test<\/a> and then use an online service to help you to understand the results<\/a> if necessary.<\/p>\nThis should help you to pick up server errors but bear in mind that they can be tricky to pin down.<\/p>\n
Responsive Web Design<\/strong><\/h2>\nIssues only arise from responsive sites that haven\u2019t been correctly built in the first place. For example, broken layouts may be caused by things such as dropping in a viewport meta tag without using media queries to make it properly responsive. This results in a chunk of the page being cut off and other elements \u2013 such as navigation \u2013 being displayed incorrectly.<\/p>\n
Responsive web design is sometimes blamed for offering poor performance, yet it\u2019s not the fault of the technique, but its implementation, as set out by Tim Kadlec<\/a>.<\/p>\n![\"responsive](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-16-at-6.42.03-PM.png\")
<\/a><\/p>\nPhoto credit: UXPin<\/a><\/em><\/p>\nResponsive web projects \u2013 and any web project that you begin \u2013 should always take a mobile-first<\/a> approach. The problem that many have with RWD sites is in conditional<\/a> or lazy loading<\/a>, or rather in the fact that they don\u2019t use it. This results in a full desktop model being delivered to mobile devices, which of course slows down the site.<\/p>\nThis issue was made somewhat famous a few years ago in a study carried out by Guy Podjarny<\/a>. He found that the majority of the responsive sites that he tested for speed performed poorly due to the loading of full desktop sites, as opposed to a pared-down version.<\/p>\nThe problem remains now that it\u2019s fairly complex to build a responsive site that performs well. Not only do you have to reduce the large HTML file that\u2019s initially called for a mobile site, you also must ensure that you avoid running certain scripts, load certain CSS and download specific images. A responsive site is never going to be as fast as a dedicated mobile site, the latter of which usually has small HTML and very few scripts.<\/p>\n
![\"responsive](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/responsive-design-alone-not-mobile-seo.png\")
<\/p>\n
Photo credit: Search Engine Land<\/a><\/em><\/p>\nHowever, from a business standpoint, supporting mobile and the main site means twice the maintenance, and therefore twice the cost. It\u2019s no wonder that many people want the convenience and lower cost of responsive design.<\/p>\n
If you\u2019d like to learn more about improving the performance (and therefore the UX) of responsive sites, check out these tips from CrazyEgg<\/a>. For a quick reference guide on breakpoints, check out our free Responsive Design Cheatsheet<\/a>.<\/p>\nMobile UX<\/strong><\/h2>\nThe basic principles of mobile UX are not really very different from desktop UX. However, mobile is still a rapidly developing medium and as such, this means that best practices are still emerging. As Steve Krug points out in the 2014 edition of his UX classic Don\u2019t Make Me Think: A Common Sense Approach to Web and Mobile Usability<\/em><\/a>, \u201cWeb and app design for mobile devices is still in its formative \u201cWild West\u201d days in many ways.\u201d<\/p>\nMobile UX is all about trade-offs. Once you\u2019ve decided what belongs on the home page, you then have to decide how to prioritize the rest of the content. It\u2019s also necessary when designing for mobile to ensure that you provide strong visual cues that show the user how to use the site.<\/p>\n
For example, clickable areas in purely flat designs can create usability issues since the signifier (what visually defines a button) may not be as clear. Without clearly defined buttons, the design will require other distinguishing elements.<\/p>\n
Color is a great choice for this, as you can see in the image below for SitePoint. The navigation is clearly sectioned using strong colors to ensure that on mobile, these areas are obvious and more importantly, large enough so that a user won\u2019t accidentally click on a link next to the one that they want (unless they have exceptionally large hands).<\/p>\n
![\"color](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-16-at-6.44.49-PM.png\")
<\/p>\n
Photo credit: Sitepoint<\/a><\/em><\/p>\nBest practice for mobile UX dictates that you should then pay attention to the following:<\/p>\n
\n- Clarity <\/strong>\u2013 How can you ensure that the user knows how to use the site? Consider the use of strong visual cues such as the use of color and drop shadows on buttons to prompt the desired user action.<\/li>\n
- Navigation <\/strong>\u2013 Again, you consider if flat design adds anything or if it creates confusion in the user and how you can overcome this. You should also consider if it\u2019s worth having a dropdown menu or a standard, traditional top menu.<\/li>\n
- Gestures <\/strong>\u2013 As designer Thomas Joos suggests<\/a>, you must think in terms of time, dimension, and animation. How will your interface respond when it\u2019s swiped or pulled from the top? Interactions and animations require even more care with regards to visual refinement and response times.<\/li>\n
- Forms <\/strong>\u2013 Input forms need to be short and concise, not ask the user to enter all kinds of details from their age to the name of their dog. Limit forms to one or two fields and ensure that they are big enough to click into. Also, take care with form labels as these can easily be thrown off on mobile devices.<\/li>\n
- Touch <\/strong>\u2013 As discussed earlier, clickable areas should follow the fat finger rule<\/a> and not encroach on surrounding areas.<\/li>\n<\/ul>\n
When it comes to designing for a smaller screen, prototyping and wireframing tools are also helpful once you outgrow the low fidelity of sketching by hand. The sooner you can get your design onto real-world devices the better, but it\u2019s incredibly helpful to have tools at your disposal that can effectively help with layouts.<\/p>\n
Final Thoughts<\/strong><\/h2>\nMobile UX is a sum of its parts.<\/p>\n
It\u2019s not just about performance, nor is it all about how the site and its content are presented. For the designer, it\u2019s become necessary to look at a web project much more holistically than we\u2019ve seen in the past.<\/p>\n
On the small screen, good UX is essential to the success of every site. Consider every navigation element alongside your design choices and how these will work on real-world devices. As championed by Steve Krug, the user should not have to think about what they have to do next, it should be immediately clear to them. <\/em><\/p>\nIf you’d like to learn more about mobile design, check out our free ebook Mobile UI Patterns<\/a>. We include over 46 of some of the best UI patterns for mobile UX and performance.<\/p>\n
After all, like we stated in Interaction Design Best Practices<\/a>, digital time and real time are not the same.<\/p>\n Photo credit: <\/em>KISSMetrics<\/em><\/a><\/p>\n The study found that there was a strong correlation between page load times and customer behavior. 79% of shoppers said that they would be less likely to buy from a site with poor performance again, whilst a 1-second delay was found to decrease customer satisfaction by 16%.<\/p>\n So, this shows that site performance is an important factor to UX, SEO and to customer behavior and conversions.<\/p>\n Photo credits: <\/em>KISSMetrics<\/em><\/a><\/p>\n Performance issues<\/a> can be caused by all kinds of things, including:<\/p>\n Of the above, poor server setup is likely to be the one that most businesses have the least control over. Cheap or free hosting tends to come with its own issues and should be avoided for business sites.<\/p>\n In the past, I moved two of my responsive sites across to a managed WordPress service and this fixed a lot of the performance issues overnight. It wasn\u2019t a cheap or free host that I was using previously, but it was affecting site speed. It\u2019s not always simple to diagnose server issues though. The first step would to run a speed test using Google Page Speed Insights<\/a> and\/or GT Metrix<\/a> to see if it picks up a poor server response time. If this is the case, then you can perform a Trace Route test<\/a> and then use an online service to help you to understand the results<\/a> if necessary.<\/p>\n This should help you to pick up server errors but bear in mind that they can be tricky to pin down.<\/p>\n Issues only arise from responsive sites that haven\u2019t been correctly built in the first place. For example, broken layouts may be caused by things such as dropping in a viewport meta tag without using media queries to make it properly responsive. This results in a chunk of the page being cut off and other elements \u2013 such as navigation \u2013 being displayed incorrectly.<\/p>\n Responsive web design is sometimes blamed for offering poor performance, yet it\u2019s not the fault of the technique, but its implementation, as set out by Tim Kadlec<\/a>.<\/p>\n Photo credit: UXPin<\/a><\/em><\/p>\n Responsive web projects \u2013 and any web project that you begin \u2013 should always take a mobile-first<\/a> approach. The problem that many have with RWD sites is in conditional<\/a> or lazy loading<\/a>, or rather in the fact that they don\u2019t use it. This results in a full desktop model being delivered to mobile devices, which of course slows down the site.<\/p>\n This issue was made somewhat famous a few years ago in a study carried out by Guy Podjarny<\/a>. He found that the majority of the responsive sites that he tested for speed performed poorly due to the loading of full desktop sites, as opposed to a pared-down version.<\/p>\n The problem remains now that it\u2019s fairly complex to build a responsive site that performs well. Not only do you have to reduce the large HTML file that\u2019s initially called for a mobile site, you also must ensure that you avoid running certain scripts, load certain CSS and download specific images. A responsive site is never going to be as fast as a dedicated mobile site, the latter of which usually has small HTML and very few scripts.<\/p>\n Photo credit: Search Engine Land<\/a><\/em><\/p>\n However, from a business standpoint, supporting mobile and the main site means twice the maintenance, and therefore twice the cost. It\u2019s no wonder that many people want the convenience and lower cost of responsive design.<\/p>\n If you\u2019d like to learn more about improving the performance (and therefore the UX) of responsive sites, check out these tips from CrazyEgg<\/a>. For a quick reference guide on breakpoints, check out our free Responsive Design Cheatsheet<\/a>.<\/p>\n The basic principles of mobile UX are not really very different from desktop UX. However, mobile is still a rapidly developing medium and as such, this means that best practices are still emerging. As Steve Krug points out in the 2014 edition of his UX classic Don\u2019t Make Me Think: A Common Sense Approach to Web and Mobile Usability<\/em><\/a>, \u201cWeb and app design for mobile devices is still in its formative \u201cWild West\u201d days in many ways.\u201d<\/p>\n Mobile UX is all about trade-offs. Once you\u2019ve decided what belongs on the home page, you then have to decide how to prioritize the rest of the content. It\u2019s also necessary when designing for mobile to ensure that you provide strong visual cues that show the user how to use the site.<\/p>\n For example, clickable areas in purely flat designs can create usability issues since the signifier (what visually defines a button) may not be as clear. Without clearly defined buttons, the design will require other distinguishing elements.<\/p>\n Color is a great choice for this, as you can see in the image below for SitePoint. The navigation is clearly sectioned using strong colors to ensure that on mobile, these areas are obvious and more importantly, large enough so that a user won\u2019t accidentally click on a link next to the one that they want (unless they have exceptionally large hands).<\/p>\n Photo credit: Sitepoint<\/a><\/em><\/p>\n Best practice for mobile UX dictates that you should then pay attention to the following:<\/p>\n When it comes to designing for a smaller screen, prototyping and wireframing tools are also helpful once you outgrow the low fidelity of sketching by hand. The sooner you can get your design onto real-world devices the better, but it\u2019s incredibly helpful to have tools at your disposal that can effectively help with layouts.<\/p>\n Mobile UX is a sum of its parts.<\/p>\n It\u2019s not just about performance, nor is it all about how the site and its content are presented. For the designer, it\u2019s become necessary to look at a web project much more holistically than we\u2019ve seen in the past.<\/p>\n On the small screen, good UX is essential to the success of every site. Consider every navigation element alongside your design choices and how these will work on real-world devices. As championed by Steve Krug, the user should not have to think about what they have to do next, it should be immediately clear to them. <\/em><\/p>\n If you’d like to learn more about mobile design, check out our free ebook Mobile UI Patterns<\/a>. We include over 46 of some of the best UI patterns for mobile UX and performance.<\/p>\n<\/p>\n<\/p>\n\n
Responsive Web Design<\/strong><\/h2>\n
<\/a><\/p>\n<\/p>\nMobile UX<\/strong><\/h2>\n
<\/p>\n\n
Final Thoughts<\/strong><\/h2>\n
![\"Mobile](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/04\/mobile-ui-patterns-donwload.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"