Customizing Ionic Apps for Web & Mobile

Toggle navigation

FrameworkProductsShowcaseBlogDocsSupport Getting StartedCommunity ForumCustomer SupportTrusted PartnersEcosystem MarketJobsShopCreatorTwitterSlackGitHubLog inSign up

Customizing Ionic Apps for Web & Mobile


This is a guest post from Simon Grimm, speaker and educator at Ionic Academy. Simon writes about Ionic frequently on his blog Devdactic.

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

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 (or perhaps PWA?) and also as a native mobile app (perhaps even on phone and tablet devices).

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

App Starting Template Setup

For this article run the command below to start a new Ionic app with the side menu template:

ionic start devdacticResponsive sideMenu

It’s 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 which is available since Angular 5 and Ionic 3.9.0.

Simply change your app/app.module.ts to:

import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ MyApp, HomePage, ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, ListPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}

That’s all we’ll need for our examples, so now let’s dive into our areas.

1. Responsive Grid Layout

Most Ionic components already adapt to screen changes and look good across various sizes. However, having something like a list item full size or an Ionic Card displayed full width on my large iMac screen kills my eyes. 

If you need your app to look good on a small device and in a desktop web browser, you’ll need to make it as responsive as possible. And what’s better then using the Ionic Grid layout system?

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 like this:

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Observable } from 'rxjs/Observable'; import { HttpClient } from '@angular/common/http'; import "rxjs/add/operator/map"; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { users: Observable<any>; constructor(public navCtrl: NavController, private httpClient: HttpClient, private plt: Platform, private alertCtrl: AlertController) { this.users = this.httpClient.get('') .map(res => res['results']) } }

Now we have an array of users from the Randomuser API 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.

A breakpoint is a predefined 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. However, at 577px your design will get the sm category applied, so you must prepare your design to also look good there, and at later breakpoints as well.

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.

Let’s take our example and add this code to our pages/home/home.html:

<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-grid> <ion-row> <ion-col *ngFor="let user of users | async" col-12 col-xl-2 col-lg-3 col-md-4> <ion-card> <ion-item> <ion-avatar item-start> <img [src]="user.picture.medium"> </ion-avatar> <h2 text-capitalize>{{ }} {{ }}</h2> </ion-item> <ion-card-content> Bacon ipsum dolor amet salami prosciutto ham hock, strip steak buffalo ribeye pork chop. Beef ribs tenderloin tail shoulder. Spare ribs ham shoulder brisket rump hamburger. Pork belly kevin shoulder prosciutto ribeye pork chop chicken strip steak pig. </ion-card-content> </ion-card> </ion-col> </ion-row> </ion-grid> </ion-content>

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.

The syntax for the column isn’t immediately obvious, so let’s dive deeper into what it actually means:

col-12: If no other rules match, the column will take all 12 units (greedy column!)col-md-4: At a minimum width of 768px, each column will only use 4 units. This means, a row can now handle 3 columnscol-lg-3: As the screen gets bigger than 992px, a column only needs 3 units which means the row how holds 4 columnscol-xl-2: On the largest screens (1200px+), a column only needs 2 units and a row will display 6 columns

In our example, a column always holds a card, so the design ranges from seeing only 1 card to 6 cards maximum (seen below).

Using a decent flexible layout is definitely mandatory if your app is going to run on multiple platforms and screen sizes. If you don’t invest time into doing this, your app might scare off potential users because it just looks odd.

There’s a lot more to the Grid like setting your own breakpoints, reordering columns, and more so go check it out!

2. CSS Media Queries

While we can’t really accredit this one directly to Ionic, we are still lucky that Ionic bets strongly on the Web and we can thus take advantage of languages like CSS, which most of us have all learned years ago.

Just like the grid layout, we can make use of breakpoints here as well by using @media and different sizes to change part of our UI.

In a recent app, we needed an ion-fabbutton at the top right corner on the web version as it was too hard to spot when it was at the far bottom right corner. However, on a mobile version of your app users are already familiar with having the button floating above lists at the bottom right.

This means the element needs exist in completely different places depending on screen size (and this is a simple element).

One way to achieve this is by having the element there twice, but only displaying it when the media query of your CSS matches. To do this, add the Fab button to your your pages/home/home.html after the list we already have:

<ion-fab right bottom class="web-fab"> <button ion-fab icon-only color="primary" (click)="checkPlatform()"> <ion-icon name="help"></ion-icon> </button> </ion-fab> <ion-fab right top edge class="mobile-fab"> <button ion-fab icon-only color="primary" (click)="checkPlatform()"> <ion-icon name="help"></ion-icon> </button> </ion-fab>

If you want to make only one button visible, you could use the follow CSS inside your pages/home/home.scss:

page-home { @media (max-width: 576px) { ion-card-content { font-size: 2rem !important; } } @media (max-width: 820px) { .mobile-fab { display: none; } } @media (min-width: 820px) { .web-fab {

. . .
Posted by 홍반장水 홍반장水
TAG App, ionic, Mobile

한국어로 배우는 리액트

Let's learn React in Korean!!! (⚛ + :kr: = :smiling_imp: :smiling_imp: :smiling_imp:)

한국어로된 리액트 관련 포스팅이나 웹사이트의 모음입니다. 현재 직접 링크를 모으고 있습니다. PR은 언제나 환영입니다.


처음 리액트를 접하시는 분들께 추천할만한 글들입니다.


리액트를 100% 활용하기 위해 꼭 읽어 볼 만한 내용들 입니다.




리액트와 관련된 좋은 리소스를 제공하는 블로그들입니다.


Posted by 홍반장水 홍반장水

[APP] AWS 모바일 - AWS에서 모바일 앱을 구축하는 가장 빠른 방법

모바일 앱을 구축하는 데 필요한 모든 것

다양한 클라우드 서비스 세트

AWS에서는 확장성이 뛰어난 완전관리형 서비스를 다양하게 제공하고 있으므로 인프라를 관리할 필요 없이 로직, 스토리지, 데이터베이스, 모니터링, 스트리밍, 콘텐츠 전송, 데이터 웨어하우징 및 기계 학습 같은 기능을 앱에 추가할 수 있습니다.

구축에 도움이 되는 도구

AWS를사용하면 손쉽게 클라우드 서비스를 모바일 앱에 추가할 수 있습니다. 서버 없는 모바일 백엔드를 생성하고, 사용자 자격 증명과 로그인을 관리합니다. 푸시 알림을 전송하고, 사용 패턴을 추적하며, 인앱 분석으로 앱을 최적화합니다. 다양한 실제 디바이스에서 테스트합니다.


Posted by 홍반장水 홍반장水

[Angular2] Angular2 -



Posted by 홍반장水 홍반장水

Mockup tool

To find out more about Balsamiq Mockups 3, head to the product page at

Download a free trial here:

Posted by 홍반장水 홍반장水

[IONIC2] IONIC2에서 안드로이드 backbutton 시 액션 적용. 

안드로이드 backButton 버튼 사용시 앱에서 처리. 앱을 종료할 것인지 아닌지 물어봄,. 

app.component.ts 에 적용해보면 된다. 

import ~~~ 
import { App, Platform, ActionSheetController,AlertController } from 'ionic-angular';

      //-- android backbutton process
      platform.registerBackButtonAction(() => {
        let navv = app.getActiveNav();
        if (navv.canGoBack()){ //Can we go back?
          let confirm = alertCtrl.create({
            title: '앱을 종료하시겠습니까?',
            message: '',  //'OK를 선택하면 앱이 종료됩니다.',
            buttons: [
                text: 'OK',
                handler: () => {
                text: 'Cancel',
                handler: () => {

      //-- 액션 시트를 사용한 예제
      platform.registerBackButtonAction(() => {
          let nav = app.getActiveNav();
          if (nav.canGoBack()){ //Can we go back?
              let actionSheet = actionSheetCtrl.create({
              title: '앱을 종료하시겠습니까?',
              buttons: [
                  text: '예, 종료하겠습니다. ',
                      handler: () => {
                          platform.exitApp(); //Exit from app
                      text: '아니오.',
                      role: 'cancel',
                      handler: () => {
                          console.log('Cancel clicked');

Posted by 홍반장水 홍반장水

Everything You Should Know About Progressive Web Apps

What is a Progressive Web App

In its core a progressive web app isn’t any different from a normal website – it’s made of HTML, CSS and JavaScript, and lives in the browser. What separates PWAs from regular websites is a list of 10 key concepts that need to be fulfilled. Here they are, taken directly from the Google Developers website.

  1. Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  2. Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  3. Responsive – Fit any form factor: desktop, mobile, tablet, or whatever is next.
  4. Connectivity-independent – Enhanced with service workers to work offline or on low quality networks.
  5. App-like – Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
  6. Fresh – Always up-to-date thanks to the service worker update process.
  7. Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  8. Re-engageable – Make re-engagement easy through features like push notifications.
  9. Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  10. Linkable – Easily share via URL and not require complex installation.

What a Progressive Web App is NOT

The concept of PWAs shouldn’t be confused with:

앞서 언급 한 모든 기술은 HTML 앱을 포장하여 .apk , .exe 또는 기타 다른 앱 파일처럼 실행 파일로 패키지화합니다.이 파일 은 각 앱 스토어에서 다운로드 받아 사용자 기기에 설치해야합니다.


PWA는 설치가 필요하지 않으며 Google Play 또는 iTunes App Store에서 사용할 수 없습니다. PWA를 다운로드하려면 웹 사이트를 방문한 다음 홈 화면에 바로 가기로 저장해야합니다. 별도의 iOS 및 Android 버전을 개발하고 유지 관리하는 것은 더 이상 문제가되지 않지만 브라우저 지원을 고려해야합니다.

Posted by 홍반장水 홍반장水

Redbeard: Boilerplate-free native app development


Redbeard makes it faster and easier to create native apps without a boilerplate. It’s a complete framework with tons of components.









Posted by 홍반장水 홍반장水

GoPro 앱 | 데스크톱용

옮기고, 편집하고, 즐기기.
GoPro 사진 및 동영상을 쉽게 옮겨서 즐기고, 빠르게 편집하여 마음에 드는 장면을 공유하세요.

제품 활동

장바구니에 추가 옵션

GoPro App | 데스크톱용 v1.3.0(GoPro Studio 포함)

시스템 요구사항 >

옮기고, 편집하고, 즐기기.

데스크탑용 GoPro App을 사용하면 GoPro 사진 및 동영상을 매우 간단하게 옮기고 즐길 수 있습니다. 자동으로 장면을 한곳에 옮겨 정리해 두면 최고의 장면을 빠르게 찾을 수 있습니다. 가장 마음에 드는 사진 및 동영상을 빠르게 편집하고 Facebook 및 YouTubeTM에 바로 공유하거나, GoPro 템플릿, 슬로우 모션 효과 등을 비롯한 기타 고급 편집 기능을 이용할 수 있는 GoPro Studio 앱 번들을 사용할 수 있습니다.

주요 기능
  • GoPro 사진 및 동영상을 옮기고, 정리하고, 공유하는 데 최적화된 기능
  • 버스트 및 타임랩스 사진을 보고 편집할 수 있는 강력한 기능 포함
  • 최고의 순간을 빠르게 찾아주는 HiLight Tag(하이라이트 태그) 기능
  • 짧은 클립을 만들고 공유기 쉽도록 해주는 간단한 동영상 자르기 도구
  • 보다 고급 기능을 사용할 수 있는 GoPro Studio와 함께 제공
  • 최적화된 성능을 위한 최신 기능의 GoPro 업데이트

Posted by 홍반장水 홍반장水


The open source Parse backend.

Setup your self.

hosted Parse API today.


설명 :



Posted by 홍반장水 홍반장水