{"id":37985,"date":"2024-04-29T15:13:05","date_gmt":"2024-04-29T09:43:05","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=37985"},"modified":"2024-04-29T15:13:05","modified_gmt":"2024-04-29T09:43:05","slug":"design-mobile-and-browser-layout-view-within-power-bi","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/04\/design-mobile-and-browser-layout-view-within-power-bi\/","title":{"rendered":"Design Mobile and Browser Layout view within Power BI"},"content":{"rendered":"<p style=\"text-align: justify;\">Power BI Desktop empowers users to craft visually compelling dashboards and reports adaptable for both desktop and mobile interfaces. Its intuitive interface facilitates seamless transitions between designing for desktop and mobile platforms, guaranteeing optimal viewing experiences across various devices.<\/p>\n<p style=\"text-align: justify;\">A standout feature of Power BI Desktop is its mobile layout view, which enables users to fine-tune their reports and dashboards specifically for mobile devices. This ensures that visualizations remain crisp, responsive, and user-friendly when accessed on smartphones or tablets.<\/p>\n<p style=\"text-align: justify;\">Within the mobile layout view, users can leverage a suite of tools to customize their content for mobile consumption. This includes resizing visuals, optimizing spacing and alignment for smaller screens, and prioritizing key information for mobile users. By harnessing these tools effectively, users can create immersive and intuitive mobile experiences that effectively communicate insights and data to users on the move.<\/p>\n<p style=\"text-align: justify;\">In this blog post, we will undertake a comprehensive exploration of this feature, delving into its intricacies through a meticulously structured step-by-step process.<\/p>\n<p style=\"text-align: justify;\"><strong>Steps to open the Mobile view within Power BI Desktop:<\/strong><\/p>\n<p style=\"text-align: justify;\">Here are two ways to open the mobile view,<\/p>\n<ol style=\"text-align: justify;\">\n<li>From the taskbar, as shown in the below screenshot<br \/>\n<img decoding=\"async\" class=\"size-full wp-image-37986 alignnone\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1.png\" alt=\"Design Mobile and Browser Layout view within Power BI\" width=\"1178\" height=\"619\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1.png 1178w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1-300x158.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1-1024x538.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1-768x404.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1-660x347.png 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-1-380x200.png 380w\" sizes=\"(max-width: 1178px) 100vw, 1178px\" \/>2. From the &#8216;View&#8217; option located on the Ribbon bar<br \/>\n<img decoding=\"async\" class=\"alignleft size-full wp-image-37987\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"1170\" height=\"583\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2.png 1170w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2-300x149.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2-1024x510.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2-768x383.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-2-660x329.png 660w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Additionally, users can seamlessly transition back to the desktop view by simply clicking on the desktop icon located at the bottom of the interface.<\/p>\n<h3 style=\"text-align: justify;\"><strong>Use case Scenario:<\/strong><\/h3>\n<p style=\"text-align: justify;\">Let&#8217;s consider a scenario for a better understanding the mobile view.<\/p>\n<p style=\"text-align: justify;\">Here is an example of the browser view, and we will convert it into the mobile view.<\/p>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-37988\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"2560\" height=\"1272\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3.png 2560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-300x149.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-1024x509.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-768x382.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-1536x763.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-2048x1018.png 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-3-660x328.png 660w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p style=\"text-align: justify;\">To switch the current browser view to a mobile-friendly layout, simply follow these steps:<\/p>\n<p style=\"text-align: justify;\"><strong>Step 1<\/strong>: Click on the Mobile Icon in order to switch to the Mobile layout.<\/p>\n<p style=\"text-align: justify;\">The screenshot below illustrates the same.<\/p>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-37989\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"2560\" height=\"1272\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4.png 2560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-300x149.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-1024x509.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-768x382.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-1536x763.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-2048x1018.png 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-4-660x328.png 660w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>Step 2:<\/strong> It will be presented with two alternatives, as listed below:<\/p>\n<ol style=\"text-align: justify;\">\n<li>Auto Create<\/li>\n<li>Design Manually<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Opting for &#8220;Auto Create&#8221; entails Power BI Desktop automatically generating a mobile-friendly version of your report, simplifying the process for you.<br \/>\n<img decoding=\"async\" class=\"alignleft size-full wp-image-37990\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"1436\" height=\"715\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5.png 1436w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5-300x149.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5-1024x510.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5-768x382.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-5-660x329.png 660w\" sizes=\"(max-width: 1436px) 100vw, 1436px\" \/><\/p>\n<p style=\"text-align: justify;\">So, a single click on the Auto-Create Mobile Layout option will design the visuals on the mobile layout view, as shown in the below screenshot.<\/p>\n<p style=\"text-align: justify;\"><img decoding=\"async\" class=\"alignleft size-full wp-image-37991\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"1526\" height=\"753\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6.png 1526w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6-300x148.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6-1024x505.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6-768x379.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-6-660x326.png 660w\" sizes=\"(max-width: 1526px) 100vw, 1526px\" \/><\/p>\n<p style=\"text-align: justify;\">If you prefer to do it yourself as manual customization, simply drag and drop the tiles from the page visuals to craft your desired mobile layout.<br \/>\n<img decoding=\"async\" class=\"alignleft size-full wp-image-37992\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"1560\" height=\"768\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7.png 1560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7-300x148.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7-1024x504.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7-768x378.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7-1536x756.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-7-660x325.png 660w\" sizes=\"(max-width: 1560px) 100vw, 1560px\" \/><\/p>\n<h3 style=\"text-align: justify;\"><strong>Page Visuals<\/strong><\/h3>\n<p style=\"text-align: justify;\">This feature lets us set up the mobile version of a report by adding visuals to it. It is visible in the page visuals on the right-hand side, as shown in the screenshot below:<\/p>\n<p style=\"text-align: justify;\"><img decoding=\"async\" class=\"alignleft size-full wp-image-37993\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8.png\" alt=\"Design Mobile and Browser Layout view within Power BI \" width=\"1244\" height=\"576\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8.png 1244w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8-300x139.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8-1024x474.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8-768x356.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/Design-Mobile-and-Browser-Layout-view-within-Power-BI-8-660x306.png 660w\" sizes=\"(max-width: 1244px) 100vw, 1244px\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>\u00a0<\/strong><\/p>\n<h2 style=\"text-align: justify;\"><strong>Conclusion<\/strong>:<\/h2>\n<p style=\"text-align: justify;\">The enhancement improves the user experience by allowing Power BI to simplify the design process with its one-click auto creation of mobile views. This feature saves time and ensures a smooth user experience across various devices.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-bi-data-visualisation\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-37025 size-full aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/01\/Power-BI.gif\" alt=\"Power BI\" width=\"700\" height=\"200\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Power BI Desktop empowers users to craft visually compelling dashboards and reports adaptable for both desktop and mobile interfaces. Its intuitive interface facilitates seamless transitions between designing for desktop and mobile platforms, guaranteeing optimal viewing experiences across various devices. A standout feature of Power BI Desktop is its mobile layout view, which enables users to\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2024\/04\/design-mobile-and-browser-layout-view-within-power-bi\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-37985","post","type-post","status-publish","format-standard","hentry","category-power-bi"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/37985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=37985"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/37985\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=37985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=37985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=37985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}