{"id":858,"date":"2018-10-23T16:00:26","date_gmt":"2018-10-23T20:00:26","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=858"},"modified":"2018-10-23T16:00:26","modified_gmt":"2018-10-23T20:00:26","slug":"how-does-it-look-on-a-mobile-device","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/how-does-it-look-on-a-mobile-device\/","title":{"rendered":"How Does It Look on a Mobile Device?"},"content":{"rendered":"<p>In the past, we have run Google Analytics which told us that the majority of the web sessions on the OCPS portal were coming from desktop computers. In fact the number was as high as 95% in recent months. However, that does not tell the whole story. I recently extracted the most recent month&#8217;s worth of session data by device type and was able to group and summarize the data by domain. In other words, I was able to get the total count of sessions by device type for each school as well as for the overall Internet and the overall intranet. When looking at these totals by school, I was able to determine that there is quite a difference between district web access and school access. In fact, desktop sessions accounted for 97% of all Internet usage and 88% of all intranet usage. However, for most schools, the most common device type used to open sessions on our school sites were mobile devices. Mobile devices actually accounted for between 11.5% and 79.5% of all sessions on our school sites with an average of 51.03% and a median of 52.38%. But what does that mean to you?<\/p>\n<p>It means that you have to place more attention on what your web pages look like on mobile devices. Especially important are whether images or tables are cropped off or require the user to horizontally scroll which nobody likes to do. So how can you tell what your page looks like on a mobile device? With the most recent update to our SchoolMessenger portal platform, checking your site&#8217;s appearance on different device formats is as easy as a click of a button, a button that is in the menu bar of all site editors. Just look for the icon that looks like a screen as shown in the following image:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo1.png\" alt=\"\" \/><\/p>\n<p>Click this icon after navigating to any of your site pages to show the page first in a simulation of a desktop monitor as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo2.png\" alt=\"\" \/><\/p>\n<p>This is a fairly typical page that uses a table to display data. When I switch to mobile mode by clicking the Mobile button, the page looks like the following image:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo3.png\" alt=\"\" \/><\/p>\n<p>Still readable although the wrapping of the text make it a little harder to know what belongs in each row. A simple rotation of the device however (by clicking the Rotate button at the top of your screen while in edit mode), shows the table is fairly easily read.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo4.png\" alt=\"\" \/><\/p>\n<p>On the other hand, suppose you have a page that has larger graphics or a table that was not created within the SchoolMessenger platform so that it is not resizeable, (perhaps it was copied from Microsoft Word). In this case notice that the table in the following image only has breakfast prices and that part of the image below the table is truncated.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo5.png\" alt=\"\" \/><\/p>\n<p>Here is what the page looks like on a desktop screen.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/10\/102318_1950_HowDoesItLo6.png\" alt=\"\" \/><\/p>\n<p>As you can see, it easy to lose important information if you do not test your pages first using this new feature in your editor&#8217;s toolbar.\u00a0 By the way, this second example was from an Internet page, showing that it is not just school web site editors that need to pay attention to how their pages render on mobile devices.<\/p>\n<p>In subsequent posts, I will talk about specific techniques to insure that your pages display well on desktop and mobile devices so that everyone can see all of the information that you want them to view.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the past, we have run Google Analytics which told us that the majority of the web sessions on the OCPS portal were coming from desktop computers. In fact the number was as high as 95% in recent months. However, that does not tell the whole story. I recently extracted the most recent month&#8217;s worth &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/how-does-it-look-on-a-mobile-device\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How Does It Look on a Mobile Device?&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_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":""},"categories":[33,34,35],"tags":[59,60,61,51],"class_list":["post-858","post","type-post","status-publish","format-standard","hentry","category-post-that-explains-how-to-perform-a-specific-activity","category-something-to-think-about-related-to-web-sites","category-opinions-from-the-district-about-web-sites","tag-images","tag-resizing","tag-responsive","tag-tips"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":434,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/where-should-i-put-my-content\/","url_meta":{"origin":858,"position":0},"title":"Where Should I Put My Content?","author":"Carlos Hernandez","date":"January 26, 2018","format":false,"excerpt":"I originally wrote this article for our Web Services Newsletter almost 3 years ago when we were still using SharePoint for the Internet, Intranet, and school sites. However, the fundamental principals that applied then apply today for the SchoolMessenger platform. So, it is worth revisiting. The Internet Content on the\u2026","rel":"","context":"In &quot;Governance News&quot;","block_context":{"text":"Governance News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-site-governance-at-ocps\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1575,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/shorts-storing-images-and-files\/","url_meta":{"origin":858,"position":1},"title":"Shorts \u2013 Storing Images and Files","author":"Carlos Hernandez","date":"November 12, 2020","format":false,"excerpt":"Adding Images to a Page: All images should be added to a page after uploading the image to the Image folder. First select File Administration under the Site Administration dropdown menu. Then navigate to the folder where you want to store the image. Note that the first level of folders\u2026","rel":"","context":"In &quot;Tips\/Tricks&quot;","block_context":{"text":"Tips\/Tricks","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-showing-a-specific-tip-or-trick-related-to-web-sites\/"},"img":{"alt_text":"Start by selecting File Administration from the Site Administration dropdown menu","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/11\/111220_1418_ShortsStori1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":730,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/district-web-site-webinar-now-available-in-house\/","url_meta":{"origin":858,"position":2},"title":"District Web Site Webinar Now Available In-House","author":"Carlos Hernandez","date":"August 16, 2018","format":false,"excerpt":"The video recording from the August 13, 2018 webinar for district web admins\/authors is now available from our intranet site page: https:\/\/intranet.ocps.net\/cms\/One.aspx?portalId=125187&pageId=338087 The videos on the left side of the page are the introductory videos created in 2017. The Mastering video on the right side is the most recent addition\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1175,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/is-your-site-everything-it-could-should-be\/","url_meta":{"origin":858,"position":3},"title":"Year End Web Site Review","author":"Carlos Hernandez","date":"June 12, 2019","format":false,"excerpt":"The 2019-2020 school year is essentially over. Now is a good time to review your school or department web site. Did it do everything you hoped it would? If not what could you do different to change that? Are you missing information that would be helpful for the public, for\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":690,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/to-hide-section-or-to-hide-selection-that-is-the-question\/","url_meta":{"origin":858,"position":4},"title":"To Hide Section or to Hide Selection, That is the Question","author":"Carlos Hernandez","date":"July 26, 2018","format":false,"excerpt":"When you open Page Status (under the Page Options menu), you see all the active child pages beneath the current page. Of course this is only one level down. So see the page under any child page, you have to first go to that page. But that's another story for\u2026","rel":"","context":"In &quot;Getting Ready for the New School Year&quot;","block_context":{"text":"Getting Ready for the New School Year","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-specifically-to-school-sites\/getting-ready-for-the-new-school-year\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2018\/07\/072618_1328_ToHideSecti1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":866,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/new-portal-branding\/","url_meta":{"origin":858,"position":5},"title":"New Portal Branding","author":"Carlos Hernandez","date":"November 6, 2018","format":false,"excerpt":"School Messenger will be implementing the new branding for the OCPS district web sites (not employee intranet or school sites) overnight on November 13th while you all are watching the election results in this country. You will see the changes in the morning of November 14th.","rel":"","context":"In &quot;Flash News&quot;","block_context":{"text":"Flash News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/a-quick-notice-about-the-portal\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/858\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/858\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}