Why Separate Mobile & Desktop Web Pages?

Why Separate Mobile & Desktop Web Pages?

왜 모바일과 데스크탑 사이트를 별도로 만들어야 하는가

(역시 구글 번역기를 사용해서 번역한 내용입니다.  원문링크)

As use of mobile devices continues to skyrocket across the globe, we're seeing more ways to tackle the challenge of creating great Web experiences across multiple devices. But which approach is right for any given project? In an effort to help answer that question, I've compiled the reasons we opted to use a dual (separate mobile and desktop) template system to build our start-up, Bagcheck.

모바일 기기의 사용이 세계의 급등을 계속했다대로, 우리는 여러 장치간에 위대한 Web 환경을 만드는 과제를 해결하기위한 더 많은 방법을 찾고 있습니다. 그러나 그 방법은 어떤 프로젝트를 위해 맞다? 응답을 돕는 노력에서 질문하는 것은 나는, 우리는 듀얼을 사용하도록 선택할 이유 (다른 모바일 및 데스크톱) 템플릿 시스템 당사의 시작, Bagcheck를 구축하기 위해 정리했습니다

I'm a big proponent of Responsive Web Design so I often get asked why we built a "separate" mobile experience for Bagcheck instead of using fluid grids, flexible images, and media queries to deliver a responsive Web solution to our mobile audience.

우리는 그 대신에 우리의 휴대 전화 경청자에 따라 Web 솔루션을 제공하는 유체 그리드, 유연한 이미지, 미디어 쿼리를 사용하여 Bagcheck를위한 "개별"모바일 환경을 구축하고 왜 자주 묻는 그래서 레스 폰 시브 Web 디자인의 큰 지지자이다.

For us site performance and speed of development were crucial. So many of the decisions we made were designed to make both of these as fast as possible. (We were a start-up after all!) As part of our focus on performance, we also had a philosophy of "just what's necessary". This meant sending things to devices (and people) that didn't actually need them made us squeamish. We liked to optimize. With a dual template system we felt we had more optimization of: source order, media, URL structure, and application design (more on each of these below).

우리를 위해 개발 사이트 성능과 속도가 중요했다. 우리는 의사 결정의 대부분은 가능한이 모두 빨리 할 수​​ 있도록 설계되었다. (우리는 결국 시작이었다!) 성능상의 우리의 노력의 일환으로, 우리는 또한 "단지 무엇이 필요하다"철학을 가지고 있었다. 이것은 실제로 그들은 우리가 시끄러 우니 될 필요가 없습니다 장치 (과 명)에 물건을 보낼 의미. 우리는 최적화하는 것을 좋아했다. 소스 순서, 미디어, URL 구조 및 응용 프로그램 설계 (이하, 이들 각각에 대한 자세한 정보) : 듀얼 템플릿 시스템에서 우리가 더 최적화하고 있었다고 느꼈습니다.

We built Bagcheck as a command-line interface first. From there we created a mobile Web experience, then followed on with a desktop Web experience shortly after. This process probably influenced our development approach as well.

우리는 첫 번째 명령 줄 인터페이스로 Bagcheck을 구축했습니다. 거기에서 우리는 그후 곧 후 데스크톱 Web 체험으로 로그온 계속 모바일 Web 환경을 만들었습니다. 이 과정은 아마뿐만 아니라 우리의 개발 방식에 영향을 주었다.

It's also worth noting that, while competent in code, I am primarily a designer. So I've focused on design considerations and tried to include ample links to folks more versed on the technical side of things in this article. If you have more resources or implementation ideas... send them my way!

또한 코드의 유능한 동안, 나는 주로 디자이너입니다, 것은 주목할 만합니다. 그래서 디자인 고려 사항에 초점을 맞춘이 기사에서 사물의 기술적 측면에 더 익숙한 사람들에게 충분한 링크를 포함하도록 시도했다. 당신은 더 많은 자원 및 구현 아이디어가 있다면 ... 그들에게 나의 방법을 전해드립니다!

Source Order

At its core, Responsive Web Design is about serving the same HTML to every device and adapting its presentation (mostly through CSS) based on the specific capabilities of the device being used to access it. HTML markup has a source order, which (mostly) defines how a Web page is rendered by a browser. While HTML elements can be repositioned using Javascript and CSS, doing so reliably across a wide range of devices can be challenging.

그 핵심은 레스 폰 시브 Web 디자인은 모든 장치에 동일한 HTML을 제공하고 그것을 액세스하는 데 사용되는 장치의 특정 기능에 따라 프레젠테이션을 (주로 CSS를 사용 하여) 적응에 대해서입니다. HTML 태그는 소스 순 (주로) Web 페이지가 브라우저에서 렌더링되는 방법을 정의합니다. HTML 요소는 장치의 다양한 때문에 보장하고, Javascript 및 CSS를 사용하여 재배치 할 수 있지만 도전 할 수 있습니다.

Consider the simple example of a site-wide navigation menu. On devices with large screens and mouse/keyboard input, it's quite common to position this type of menu at the top of a Web page because:

사이트 전체 탐색 메뉴의 간단한 예를 생각해 봅시다. 큰 화면과 마우스 / 키보드 입력을 갖춘 장치는 그것 때문에, Web 페이지의 상단에있는 메뉴의이 유형을 배치하는 것은 매우 일반적입니다 :

• There's enough screen space available so actual content isn't likely to be pushed off screen.
  실제 내용은 화면에서 푸시 할 것 같지 않기 때문에 충분한 화면 공간이 마련되어 있습니다.
  
  
• There's often a need to communicate what's available on the site through a set of key categories or actions.
  키 범주 또는 액션 세트를 통해 사이트에서 사용할 수있는 것을 통신해야 종종 있습니다.
  
  
• It's potentially quicker to access these top-level categories or actions when they are aligned with the edge of the screen/browser.Since global navigation makes sense at the top of a Web page, it tends to come first in markup source order. On devices with small screens and touch input, however, it often makes sense to position the same global navigation at the bottom of a Web page because:
  그들은 화면 / browser.Since 글로벌 네비게이션의 Web 페이지의 상단에 의미있는 가장자리에 정렬 될 때, 그것은 이러한 최상위 범주 또는 작업에 액세스하기 위해 잠재적으로 빠르고 그것은 태그 소스 순서에서 먼저 오는 경향이있다. 작은 화면과 터치 입력을 갖춘 장치는하지만 종종 Web 페이지의 하단에 동일한 전역 탐색을 배치하는 말이 있습니다 :
  
  
• There's not a lot of screen space so global navigation menus can quickly push actual content off-screen.
  글로벌 탐색 메뉴를 빠르게 실제 내용 오프 스크린을 누를 수 있도록 화면 공간이 많이 없습니다.
  
  
• Instant access to content usually trumps navigation tasks on devices with small screens and low bandwidth. (It probably does on all devices but mobile constraints emphasize the need most.)
  작은 화면과 낮은 대역폭을 가진 장치에서 보통 트럼프 탐색 작업을 콘텐츠에 즉시 액세스. (이것은 아마도 모든 장치가 휴대 전화의 제약에 가장 필요성을 강조하지 않습니다.)
  
  
• Ergonomic factors make it easier to hit touch targets at the bottom of the screen (especially with one handed use).
  인간 공학적 요인은 그것이 쉽게 화면 아래 (특히 손 사용)에서 터치 목표를 달성하기 위해 실시한다.

So on mobile devices, global navigation makes sense at the bottom of a Web page, which means the menu markup is likely to come last in source order. When you are serving the same HTML though, source order can't be changed.With the dual template approach we used when building Bagcheck we were able to serve different markup and thereby a different source order to mobile devices. Which, as you can see in the images below, easily generated a more optimal user interface for each experience: mobile and desktop.

그래서 모바일 장치에서 전역 탐색은 Web 페이지 하단 말이있다, 이것은 메뉴의 마크 업, 소스 순서에서 마지막에 올 수 있다는 것을 의미합니다. 당신은 동일한 HTML을 제공하는 경우, 소스 순서는, 우리는 모바일 장치에 다른 마크 업하여 다른 소스의 순서를 수행 할 수있었습니다 Bagcheck을 구축 할 때 우리가 사용하는 듀얼 템플릿 접근 changed.With 할 수 없습니다. 어떻게 당신은 아래의 그림에서 볼 수 있도록 쉽게 각각의 경험에 대한 더 적합한 사용자 인터페이스를 생성 : 모바일 및 데스크톱.

There are also solutions that can achieve a similar effect without serving different HTML. Box-direction (part of the flexible boxes CSS specification) can reverse the order of an item list without affecting source markup order. You can also try to use display:table to reorder the display of content and navigation in response to screen real estate. These methods might be a better fit for you —depending on your needs.

다른 HTML을 제공하지 않고 비슷한 효과를 얻을 수있는 솔루션도 있습니다. 상자 방향은 (유연한 상자 CSS 사양의 일부)는 소스 ​​마크 업 순서에 영향을주지 않고 아이템리스트의 순서를 반대로 할 수 있습니다. 화면 부동산에 따라 콘텐츠 및 탐색 표시 순서를 변경하려면 테이블 : 또한 디스플레이를 사용하려고 할 수 있습니다. 이러한 방법은 당신의 요구에 따라 당신을 위해 더 나은 적합 할지도 모릅니다.

Media

Another tenant of Responsive Web Design is flexible images (and videos). When set to expand to fill the size of their container, flexible images can resize themselves based on the space available within a browser's viewport.
레스 폰 시브 Web 디자인의 또 다른 세입자는 유연한 이미지 (또는 동영상)입니다. 그들의 컨테이너의 크기를 채우기 위해 확대 설정하면 유연한 이미지는 브라우저의 뷰포트에서 사용 가능한 공간에 따라 자신의 크기를 변경할 수 있습니다.

In large viewports, a flexible image can fill more space by being displayed at its original (large) size. In small viewports, the same image can take up a lot less space by being displayed at a reduced size. In order to achieve this effect, the browser needs large images, which look good when scaled up or down.
대형 뷰포트에서는 유연한 이미지는 원본 (대) 크기로 표시 됨으로써 더 많은 공간을 채울 수 있습니다. 작은 뷰포트에서 같은 이미지가 축소 된 크기로 표시 됨으로써 훨씬 더 적은 공간을 차지 수 있습니다. 이 효과를 달성하기 위해 브라우저가 다운 스케일 업시이나 모양의 큰 이미지를 필요로한다.

The problem is large images have large file sizes. Though not every Web browser will display them at full size, they'll all download them at full size, which can quickly add up to poor performance unless:
문제는 큰 이미지가 큰 파일 크기를 가지고있다. 않은 모든 Web 브라우저가 실제 크기로 그들이 나타납니다 그러나, 그들은 모두 실제 크기로 그들을 다운로드합니다 빨리하지 않으면 성능까지 추가 할 수있다 :

• You use a combination of CSS Media Queries and background images to not display and not load images intended solely for larger viewports. This method does not work for any images specified with image tags only those specified with CSS image backgrounds, which can limit the utility of this approach.
  당신이 표시되지 않도록 CSS 미디어 쿼리와 배경 이미지의 조합을 사용하여 유일하게 큰 뷰포트를 대상으로 이미지를로드하지 않는다. 이 방법은 이미지 태그이 방법의 유용성을 제한 할 수 있고, CSS 이미지의 배경, 그리고 지정된 것으로 지정된 모든 이미지는 작동하지 않습니다.
  
  
• You employ a solution like Responsive Images that relies on Javascript to replace small (performance optimized) images in HTML mark-up with larger ones as viewport size increases. Browsers with Javascript or cookies turned off will just display the small images.
  당신은 뷰포트의 크기가 커지는 등 큰 일이 태그를 HTML로 작고 (성능 최적화)의 이미지를 교체하기 위해 Javascript에 의존 레스 폰 시브 이미지와 같은 솔루션을 채용하고 있습니다. JavaScript와 쿠키와 브라우저 만의 작은 이미지가 표시됩니다 해제.
  
  
• You experiment with ideas like using the noscript tag to prevent unneeded images from loading.
  당신은로드에서 불필요한 이미지를 방지하기 위해 noscript 요소 태그를 사용하여 같은 아이디어를 시험해 본다.
  
  
• You use a server-side solution to detect the device accessing your site and only send down what's necessary.
  귀하의 사이트에 액세스하는 장치를 감지하기 위해 서버 측 솔루션을 사용하고 유일한 필요한 무엇 내려 보낸다.

Underlying each of these solutions is the same philosophy: give each device only what it needs using media queries and background images, JavaScript, or a server-side solution. This philosophy can dramatically cut down file size and increase performance.
이러한 솔루션의 각각의 근저에 동일한 철학이다 : 그것은 미디어 쿼리 및 배경 이미지, JavaScript 또는 서버 측 솔루션을 사용하여 필요로하는 것만을 각 장치를 제공합니다. 이 철학은 극적으로 파일 크기를 줄이고 성능을 향상시킬 수 있습니다.

For example, our mobile optimized template for category pages on Bagcheck used a single compressed 50x50 pixel image (averaging 3KB) for each item listed. The desktop optimized template used a 200x125 pixel image (averaging 15KB) and a second 50x50 image (averaging 3KB) for each item. On a page with 20 items that's a 300KB difference plus 20 less http requests, which has a big impact on performance. But because we had a separate mobile template, we went one step further and only displayed the first ten items in the list on mobile (with an easy option to see more) saving another 30KB.
예를 들어, Bagcheck에 카테고리 페이지에 대한 우리의 모바일 최적화 된 템플릿에 포함 된 각 항목에 대해 단일 압축 50 × 50 픽셀의 이미지를 (3 킬로바이트 평균)을 사용했습니다. 데스크톱 최적화 된 템플릿은 200x125 픽셀의 이미지 (15 킬로바이트 평균)와 각 항목의 두 번째 50 × 50의 이미지 (3 킬로바이트 평균)을 사용했습니다. 성능에 큰 영향을 가지고 300 킬로바이트 차이 플러스 20 다음 HTTP 요청이야 20 항목이있는 페이지에. 우리는 다른 모바일 템플릿을 가지고 있었으므로,하지만 우리는 한 걸음 더 가서 유일한 다른 30 킬로바이트을 저장 휴대 전화 목록의 처음 10 개 항목을 (더보기위한 간단한 옵션을 사용하여) 표시되었다.

In total, a category page on the desktop had 360KB of images while the same page on mobile only had 30KB of images. That's a pretty big difference.
휴대폰에서 동일한 페이지에 이미지 만 30 킬로바이트 가지고 있었지만, 합계에서는, 바탕 화면의 카테고리 페이지로는, 이미지의 360 킬로바이트을 가지고 있었다. 꽤 큰 차이다.

But optimized images aren't just about file size. Some images can be designed explicitly for small screens, not just scaled down to fit them. This is especially important when the details (or animations) in an image matter. Once again we can set our mobile-specific HTML templates to only reference the images explicitly designed for mobile devices.
그러나 최적화 된 이미지뿐만 아니라 파일 크기는 약입니다. 일부 사진은 작은 화면에 명시 적으로 디자인 할 수 있고 다만 그들을 맞게 축소하지 않는다. 이것은 특히 중요한 경우에, 이미지의 문제 세부 사항 (또는 애니메이션). 다시 한번, 우리는 명시 적으로 모바일 기기 용으로 설계된 이미지를 참조하기 위해 우리의 모바일 고유의 HTML 템플릿을 설정할 수 있습니다.

The same system can be used to optimize videos as well. On all devices, we wanted simple video playback that works with a single click/tap. So while our desktop template embeds video files directly on the page and our mobile template only displays a thumbnail, both start to play the video with a single action. Using just a thumbnail in the mobile experience, however, makes it faster to load and provides more control over layout/pixel size.
동일한 시스템뿐만 아니라 영상을 최적화하는 데 사용할 수있다. 모든 장치는 우리는 한 번의 클릭 / 탭에서 실행하고 간단한 비디오 재생을 희망하고 있었다. 우리의 데스크탑 템플리트가 페이지에 직접 비디오 파일을 포함 당사의 모바일 템플릿이 썸네일 만 표시하면서 그래서 둘 다 싱글 액션에서 동영상을 재생하기 시작한다. 모바일 경험에만 썸네일을 사용하지만, 그것은 빨리로드하게 레이아웃 / 픽셀 크기를보다 세밀하게 제어를 제공합니다.

URL Structure

Source order and media aren't the only things we might want to optimize for mobile use. In some cases a distinct URL structure can have a significant impact on performance or usability on small screens and slow connections. (Seeing a theme yet?)
소스 순서 및 미디어, 우리는 휴대 전화의 사용을 최적화 할 수있는 유일한 것은 없습니다. 어떤 경우에는 개별 URL 구조는 작은 화면과 느린 연결의 성능이나 유용성에 큰 영향을 미칠 수 있습니다. (아직 테마를보고?)

For example, the Bagcheck desktop experience has all the information about a list of content, its comments, updates, and likes at a single URL. We bundle all of these sections (or modules) into a single file then load each section dynamically (as people request them) without a page refresh. While this creates a smooth transition on the desktop, it adds up to a lot of bytes on mobile.
예를 들어, Bagcheck 데스크톱 경험은 콘텐츠 목록은 그 의견, 업데이트 및 단일 URL에서 좋아 관한 모든 정보를 가지고 있습니다. 그런 다음 페이지를 새로 고침하지 않고 (사람들이 그들을 요구 한대로) 동적으로 각 섹션을로드 우리는 하나의 파일에이 섹션의 모든 (또는 모듈) 번들. 이것은 바탕 화면의 원활한 전환을 만들지 만, 그것은 휴대 전화에서 아르바이트를 많이까지 추가.

So the mobile Web experience uses a different URL structure. The same URL loads the same initial content but each sub-section (comments, updates, likes) is a separate page with a unique URL as visualized in the image below.
그래서 모바일 Web 경험은 다른 URL 구조를 사용합니다. 동일한 URL은 같은 초기 콘텐츠를로드하지만, 각 서브 섹션 (의견, 업데이트 좋아)는 아래 그림에서 시각화 등의 독특한 URL을 사용하여 다른 페이지입니다.

In this model
이 모델은

bagcheck.com/bag/7811

loads the same content on mobile and desktop but
그러나 모바일 및 데스크톱에서 동일한 콘텐츠를로드

bagcheck.com/mobile/bag/7811/updates
bagcheck.com/mobile/bag/7811/comments
bagcheck.com/mobile/bag/7811/likes

are mobile-only URLs. With this structure, we once again optimize for performance by breaking large files into smaller ones. It's also worth noting that we set these mobile-specific URLs to "nofollow" so search engines don't index them.
휴대 전화 전용 URL입니다. 이 구성에 의하면, 우리는 다시 작은 것들로 큰 파일을 끊는하여 성능을 최적화한다. 또한 검색 엔진은 그들을 인덱스하지 않도록, 우리는 "nofollow를"이러한 모바일 고유의 URL을 설정하는 것은 주목할 만하다.

Application Design

URL structure can also help optimize extended interactions on mobile. Organizing lengthier tasks or multi-step/modal applications across several pages on mobile devices allows people to manage one aspect of an involved interaction at a time. Interactions that happen through modal dialogs or across modules/panels on large screens often make more sense as separate pages on smaller screens.
URL 구조는 또한 휴대 전화에 최적 확장 상호 작용을 도울 수 있습니다. 모바일 장치에서 여러 페이지에 걸쳐 장대 한 작업이나 multi-step/modal 응용 프로그램을 정리하는 사람이 한 번에 관련된 상호 작용의 한 측면을 관리 할 수 있습니다. 모달 대화를 통해 또는 모듈 / 대화면에서 패널 전체에서 일어나는 상호 작용은 종종 작은 화면의 다른 페이지와 같은 것이 말이있다.

Device capabilities can also differ significantly between modern smartphones and desktop/laptop computers. For example, accurate (10-50m) location information is usually available on mobile devices but less so on desktops/laptops. The availability of this information can dramatically change the design of an application interface.
장치의 기능 또한 현대의 스마트 폰, 데스크탑 / 노트북 컴퓨터 사이의 상당히 다를 수 있습니다. 예를 들면, 정확한 (10 ~ 50 미터) 위치 정보는 일반적으로 모바일 장치에서 사용할 수 있지만 그만큼의 데스크톱 / 노트북. 이 정보의 이용 가능성은 극적으로 응용 프로그램 인터페이스 디자인을 변경할 수있다.

The dual template system we used to build Bagcheck allowed us to optimize lengthier interactions and take advantage of device capabilities within our application interfaces. We enabled barcode scanning in the mobile experience because it's easy for people to point their mobile's built-in camera at something. We also reorganized our rather non-linear list creation tool into a series of focused, shorter tasks on mobile.
우리는 Bagcheck를 구축하는 데 사용되는 듀얼 템플릿 시스템은 우리가 더 긴 상호 작용을 최적화하고 우리의 응용 프로그램 인터페이스의 장치 기능을 사용할 수있었습니다. 사람들이 지적하는 것은 간단하기 때문에 우리는 휴대 전화의 경험에서 바코드 스캔을 사용하여 자신의 휴대폰의 내장 카메라를 무언가. 우리는 또한 휴대 전화에 초점을 맞추고, 짧은 일련의 작업 저희가 아닌 비선형 목록 작성 도구를 재편.

Doing It Again

When we designed and built the Bagcheck mobile Web experience (about nine months ago), a desire to optimize source order, media, URL structure, and application designs made separate mobile and desktop templates a great fit for us. But we also learned a lot along the way including a few new ideas on how to tackle the same issues.
우리는 디자인과 Bagcheck 모바일 Web 체험 (약 9 개월 전), 소스 순서, 미디어, URL 구조 및 독립적 인 모바일 및 데스크톱 템플릿들에게 딱 만든 응용 프로그램 설계를 최적화하는 욕망을 세운 때. 그러나 우리는 또한 같은 문제를 해결하는 방법에 대한 몇 가지 새로운 아이디어를 포함하여 도중에 많은 것을 배웠습니다.

But I'll save that for another article...
하지만 다른 기사를 위해 그것을 저장거야 ...