{"id":479,"date":"2021-10-19T16:47:15","date_gmt":"2021-10-19T16:47:15","guid":{"rendered":"https:\/\/www.confidant.ca\/blog\/?p=479"},"modified":"2021-10-25T15:44:16","modified_gmt":"2021-10-25T15:44:16","slug":"mobile-first","status":"publish","type":"post","link":"https:\/\/www.confidant.ca\/blog\/2021\/mobile-first\/","title":{"rendered":"Mobile First?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">One of the recent catch phrases in web development these days is \u201cMobile First\u201d. The idea behind it is that since mobile now comprises the majority of web traffic, that&#8217;s what should get our most attention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To many web designers, mobile first means \u201cdo a mobile layout first and then worry about the desktop experience later.\u201d As a result, these designers give up the freedom that having a blank canvas affords. In other words, their designs look overly simplistic when viewed on a large device.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"1024\" src=\"https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-833x1024.png\" alt=\"\" class=\"wp-image-483\" srcset=\"https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-833x1024.png 833w, https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-407x500.png 407w, https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-768x944.png 768w, https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-1250x1536.png 1250w, https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2-1667x2048.png 1667w, https:\/\/www.confidant.ca\/blog\/wp-content\/uploads\/2021\/10\/pcf2.png 1680w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><figcaption>Should it take many screens of scrolling to find the information I need?<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">We fought for this<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I started building websites professionally in 1996, when dial-up internet was the norm, and layouts were done using HTML tables. Once a page size exceeded 200KB, it was considered too large. We designed for 640 pixel wide screens at first, and if you happened to have 800 pixels on your CRT monitor you learned to live with condensed layouts. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine my delight when CSS allowed designers to really work with the screen size instead of against it. Soon you could use fancy graphic backgrounds, custom graphic buttons, even rollover effects which didn&#8217;t require JavaScript programming. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Along the way bandwidth steadily increased. Nowadays a single homepage can easily exceed 10 MB and nobody complains. In the right hands, this can result in very beautiful experiences on the web. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The better way: User First<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Websites are for people, not devices. If you remember that, a lot of the building blocks become easier to craft:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>User interface isn&#8217;t just simple<\/strong>\u2014it should be always organised to take advantage of the space available so the user can get more done, quicker.<\/li><li><strong>Use less data<\/strong> if you can provide a comparable user experience. Compress your scripts. Lazy load your images. Choose the <a rel=\"noreferrer noopener\" href=\"https:\/\/www.designpowers.com\/blog\/image-file-formats\" target=\"_blank\">right image formats<\/a>. Use an <a rel=\"noreferrer noopener\" href=\"https:\/\/www.extly.com\/utilities\/xt-adaptive-images.html\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.extly.com\/utilities\/xt-adaptive-images.html\">adaptive image compressor<\/a> on your server to serve smaller images to mobile users.<\/li><li><strong>Make it pretty<\/strong> and then simplify for mobile. People simply like to see graphics and the simple fact is that larger screens allow for more. Make sure it&#8217;s appropriate, but let your creative muscle get some exercise.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Web design is a craft, and it is communication. Embrace your end user and you will enjoy your job, and your users will enjoy what you produce. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the recent catch phrases in web development these days is \u201cMobile First\u201d. The idea behind it is that since mobile now comprises the majority of web traffic, that&#8217;s what should get our most attention. To many web designers, mobile first means \u201cdo a mobile layout first and then worry about the desktop experience &hellip; <a href=\"https:\/\/www.confidant.ca\/blog\/2021\/mobile-first\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Mobile First?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[5,3,47],"tags":[],"class_list":["post-479","post","type-post","status-publish","format-standard","hentry","category-design","category-development","category-technology"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p28GE6-7J","_links":{"self":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/comments?post=479"}],"version-history":[{"count":2,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/479\/revisions"}],"predecessor-version":[{"id":485,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/479\/revisions\/485"}],"wp:attachment":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/media?parent=479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/categories?post=479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/tags?post=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}