{"id":2118,"date":"2018-02-12T17:52:55","date_gmt":"2018-02-12T17:52:55","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2118"},"modified":"2018-02-12T22:21:06","modified_gmt":"2018-02-12T22:21:06","slug":"customizing-ionic-apps-for-web-mobile","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/customizing-ionic-apps-for-web-mobile","title":{"rendered":"Customizing Ionic Apps for Web & Mobile"},"content":{"rendered":"

This is a guest post from Simon Grimm, speaker and educator at Ionic Academy<\/a>. Simon writes about Ionic frequently on his blog Devdactic<\/a>.<\/em><\/p>\n

With the development of Ionic apps comes the promise that your code will run on various platforms and screen sizes once it\u2019s ready. While this can work and look fine on your targeted devices out of the box, it might not at first for everyone.<\/p>\n

In this post, we’ll take a look at 4 areas to keep an eye on – especially if you plan to ship your Ionic app both as a website<\/strong> (or perhaps PWA<\/a>?<\/em>) and also as a native mobile app<\/strong> (perhaps even on phone and tablet devices).<\/p>\n

Everything we need is already built into Ionic, but sometimes it’s easy to forget about all the awesomeness. So let\u2019s get started with a tiny base for our examples!<\/p>\n

<\/p>\n

App Starting Template Setup<\/h3>\n

For this article run the command below to start a new Ionic app with the side menu template:<\/p>\n

ionic start devdacticResponsive sideMenu\n<\/code><\/pre>\n
It\u2019s a super basic app with just 2 pages and a side menu (otherwise the name would be kinda bad) but we also need to make HTTP calls, therefore we use the new HttpClient<\/strong> which is available since Angular 5 and Ionic 3.9.0.<\/p>\n
Simply change your app\/app.module.ts<\/code> to:<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { ErrorHandler, NgModule } from '@angular\/core';\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\n\nimport { MyApp } from '.\/app.component';\nimport { HomePage } from '..\/pages\/home\/home';\nimport { ListPage } from '..\/pages\/list\/list';\n\nimport { StatusBar } from '@ionic-native\/status-bar';\nimport { SplashScreen } from '@ionic-native\/splash-screen';\n\nimport { HttpClientModule } from '@angular\/common\/http';\n\n@NgModule({\n declarations: [\n   MyApp,\n   HomePage,\n   ListPage\n ],\n imports: [\n   BrowserModule,\n   IonicModule.forRoot(MyApp),\n   HttpClientModule\n ],\n bootstrap: [IonicApp],\n entryComponents: [\n   MyApp,\n   HomePage,\n   ListPage\n ],\n providers: [\n   StatusBar,\n   SplashScreen,\n   {provide: ErrorHandler, useClass: IonicErrorHandler}\n ]\n})\nexport class AppModule {}\n<\/code><\/pre>\n
That\u2019s all we’ll need for our examples, so now let\u2019s dive into our areas.<\/p>\n
1. Responsive Grid Layout<\/h3>\n
Most Ionic components already adapt to screen changes and look good across various sizes. However, having something like a list item full size<\/strong> or an Ionic Card displayed full width on my large iMac screen kills my eyes. \ud83d\ude35<\/p>\n
If you need your app to look good on a small device and<\/em> in a desktop web browser, you’ll need to make it as responsive as possible. And what\u2019s better then using the Ionic Grid<\/a> layout system?<\/p>\n
But first we need some data we can display inside a list, so let’s add a simple HTTP call to your pages\/home\/home.ts<\/code> like this:<\/p>\n
import { Component } from '@angular\/core';\nimport { NavController } from 'ionic-angular';\nimport { Observable } from 'rxjs\/Observable';\nimport { HttpClient } from '@angular\/common\/http';\nimport "rxjs\/add\/operator\/map";\n\n@Component({\n selector: 'page-home',\n templateUrl: 'home.html'\n})\nexport class HomePage {\n\n users: Observable<any>;\n\n constructor(public navCtrl: NavController, private httpClient: HttpClient, private plt: Platform, private alertCtrl: AlertController) {\n   this.users = this.httpClient.get('https:\/\/randomuser.me\/api\/?results=20')\n   .map(res => res['results'])\n }\n}\n<\/code><\/pre>\n
Now we have an array of users from the Randomuser API<\/a> which we can display as cards. You could make this as simple iteration without any further testing, but if you’re serious about your design (which, of course you are!), you’ll want to make sure to test different sizes and breakpoints<\/strong>.<\/p>\n
A breakpoint is a predefined<\/a> value at which your design snaps from one category to the next. If your screen is smaller than 576px, you fall into the smallest category which is xs<\/strong>. However, at 577px your design will get the sm<\/strong> category applied, so you must prepare your design to also look good there, and at later breakpoints as well.<\/p>\n
With Ionic, we can use the row and column system plus the breakpoints to build interfaces that look great across different platforms and adapt to display the best and most intuitive interface to the user.<\/p>\n
Let\u2019s take our example and add this code to our pages\/home\/home.html<\/code>:<\/p>\n
<ion-header>\n <ion-navbar>\n   <button ion-button menuToggle>\n     <ion-icon name="menu"><\/ion-icon>\n   <\/button>\n   <ion-title>Home<\/ion-title>\n <\/ion-navbar>\n<\/ion-header>\n\n<ion-content>\n <ion-grid>\n   <ion-row>\n     <ion-col *ngFor="let user of users | async" col-12 col-xl-2 col-lg-3 col-md-4>\n       <ion-card>\n         <ion-item>\n           <ion-avatar item-start>\n             <img [src]="user.picture.medium">\n           <\/ion-avatar>\n           <h2 text-capitalize>{{ user.name?.first }} {{ user.name?.last }}<\/h2>\n         <\/ion-item>\n         <ion-card-content>\n           Bacon ipsum dolor amet salami prosciutto ham hock, strip steak buffalo ribeye pork chop. Beef ribs tenderloin tail shoulder.\n           Spare ribs ham shoulder brisket rump hamburger. Pork belly kevin shoulder prosciutto ribeye pork chop chicken\n           strip steak pig.\n         <\/ion-card-content>\n       <\/ion-card>\n     <\/ion-col>\n   <\/ion-row>\n <\/ion-grid>\n<\/ion-content>\n<\/code><\/pre>\n
One Ionic row offers 12 units space for columns, so each column can take an amount of those 12. If your row takes 12 units, it means the row is already full and the next column will be displayed in the following row.<\/p>\n
The syntax for the column isn’t immediately obvious, so let\u2019s dive deeper into what it actually means:<\/p>\n