{"id":465,"date":"2015-03-19T13:55:37","date_gmt":"2015-03-19T13:55:37","guid":{"rendered":"http:\/\/blog.jpegmini.com\/?p=465"},"modified":"2015-03-19T13:55:37","modified_gmt":"2015-03-19T13:55:37","slug":"responsive-design-hack-for-mobile-devices","status":"publish","type":"post","link":"https:\/\/blog.jpegmini.com\/es\/responsive-design-hack-for-mobile-devices\/","title":{"rendered":"Website Design Hack for Mobile Devices"},"content":{"rendered":"<p>As a website designer you know that an important part of the user experience is page loading times. It doesn&#8217;t make a difference what type of website you are, or\u00a0which bells and whistles you&#8217;ve added to the page. All your visitors care\u00a0about is speed. Additionally, if a page loads slowly, it&#8217;s going to play a big role in SEO rankings. Not to mention that if the page loads slower, your visitor will go elsewhere. So what&#8217;s weighing your\u00a0web page down\u00a0and\u00a0making it slow to load?<\/p>\n<p><a href=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-470\" src=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages-1024x682.jpg\" alt=\"seo-slow-loading-pages\" width=\"770\" height=\"512\" srcset=\"https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages-1024x682.jpg 1024w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages-300x199.jpg 300w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages-570x379.jpg 570w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages-1170x779.jpg 1170w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/seo-slow-loading-pages.jpg 1698w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/a><\/p>\n<p>KISSmetrics\u00a0has a great post entitled, &#8220;<a href=\"https:\/\/blog.kissmetrics.com\/ecommerce-load-time-hazards\/\" target=\"_blank\"><em>15 Hazards That Will Cripple Your E-Commerce Site\u2019s Load Time<\/em><\/a>.&#8221; \u00a0The author, <a href=\"https:\/\/plus.google.com\/u\/0\/+AlesiaKrush\/posts\" target=\"_blank\">Alesia Krush<\/a>, writes, &#8220;According to the already-quoted <a href=\"http:\/\/www.slideshare.net\/Radware\/radware-web-performanceecommerceinfographic\" target=\"_blank\">research<\/a> by Radware, roughly 45% of top 100 e-commerce sites on the web don\u2019t bother to compress their images.&#8221; This holds true to any website today that is telling their story through images, especially news websites and blogs. Well, it&#8217;s those image sizes that are weighing your web page down. The image sizes are just way too heavy! Yes, you can argue that if\u00a0you&#8217;re\u00a0using\u00a0a high-bandwidth connection and you have plenty of disk and RAM space, then page weight is not really an issue. What about\u00a0smartphones and tablets? This is where it becomes a big issue since the exact opposite is true.<\/p>\n<p><a href=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-471\" src=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250-1024x682.jpg\" alt=\"Buzzfeed-on-cellphone-JPEGmini\" width=\"770\" height=\"512\" srcset=\"https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250-1024x682.jpg 1024w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250-300x200.jpg 300w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250-570x380.jpg 570w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/IMG_0250-1170x780.jpg 1170w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/a><\/p>\n<p>Why should you care about page load times? So what if it&#8217;s just a few seconds?\u00a0It&#8217;s those few critical seconds that will cause\u00a0people to either stay\u00a0on your website or abandon it. We live in the age of now and no one has the patience for a slow loading website. According to <a href=\"http:\/\/www.radware.com\/Products\/FastView\/\" target=\"_blank\">Radware<\/a>, &#8220;time is money and customers don&#8217;t use slow sites. A one second delay in page time equals a 7% loss in conversions, 11% fewer page views and 16% decrease in customer satisfaction. Faster is better and your website and web-based applications need to be lightning quick or you will lose customers and revenue.&#8221;<\/p>\n<p>Trilibis\u00a0conducted a survey which\u00a0found that the majority of top news websites performs poorly when viewed on a smartphone or tablet. They\u00a0analyzed 100 business, technology and entertainment news websites that employ responsive design. They\u00a0found that only 26 percent load in less than four seconds on a mobile device, and 27 percent take more than 8 seconds to load. These tests were conducted on a 4G network and should be considered \u201cbest-case\u201d scenarios.<\/p>\n<p>When Trilibis\u00a0calculated load times of the 100 sites on a mobile phone over an LTE network, the effect of heavy images became particularly apparent.<br \/>\n<a href=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-11.21.39.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-474\" src=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-11.21.39.png\" alt=\"Page-load times\" width=\"881\" height=\"198\" srcset=\"https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-11.21.39.png 881w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-11.21.39-300x67.png 300w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-11.21.39-570x128.png 570w\" sizes=\"auto, (max-width: 881px) 100vw, 881px\" \/><\/a><\/p>\n<p>So, how can you lower page weight\u00a0without compromising on user experience? The answer is image optimization! To prove that\u00a0optimizing\u00a0your images will really\u00a0lower\u00a0page weigh and make the web page load faster,\u00a0Trilibis\u00a0replicated 2\u00a0site\u2019s content on their own webserver. Here&#8217;s what they found on the first one, startupchronicle.com:<\/p>\n<p><a href=\"http:\/\/www.trilibis.com\/responsivewebdesign2015.jsp\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-476\" src=\"http:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-17.42.06.png\" alt=\"Image optimization\" width=\"926\" height=\"520\" srcset=\"https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-17.42.06.png 926w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-17.42.06-300x168.png 300w, https:\/\/blog.jpegmini.com\/wp-content\/uploads\/2015\/03\/Screenshot-2015-03-17-17.42.06-570x320.png 570w\" sizes=\"auto, (max-width: 926px) 100vw, 926px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><strong>&#8220;Reduced image weight from 4.7MB to 834KB (82% reduction)&#8221;<br \/>\n&#8220;Shortened load time from 7.2 seconds to 3.7 seconds (48% reduction)&#8221;<\/strong><\/p>\n<p>At the end of the day, you have to make some pretty important design considerations for your website. You know you can&#8217;t forget about the smartphone and tablet visitors to your website. So why have them struggle to open your webpage? Why let them\u00a0bounce because of your\u00a0slow page loading time?<\/p>\n<p>The bottom line is this: lower your page weight by putting your images on a diet! Want to know\u00a0how much faster your website can load if you optimized your images? No problem! Just <a href=\"http:\/\/goo.gl\/x140bW\" target=\"_blank\">click here<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>As a website designer you know that an important part of the user experience is page loading times. It doesn&#8217;t make a difference what type of website you are, or\u00a0which bells and whistles you&#8217;ve added to the page. All your visitors care\u00a0about is speed. Additionally, if a page loads slowly, it&#8217;s going to play a [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":469,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,20],"tags":[],"class_list":["post-465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-photography","category-photoshop","category-website-design"],"blocksy_meta":[],"aioseo_notices":[],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/posts\/465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":0,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/posts\/465\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/media?parent=465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/categories?post=465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jpegmini.com\/es\/wp-json\/wp\/v2\/tags?post=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}