Tất cả những người thiết kế email tiếp thị đều đã xem qua tác phẩm của người khác và thích những gì họ thấy. Trong những lúc như vậy, bạn có thể muốn biết cách sử dụng ý tưởng hoặc bố cục của họ trong email hoặc chiến dịch tiếp theo của mình. May mắn thay, có nhiều cách bạn có thể tìm ra những gì họ đã làm Mặc dù, đối với một số ứng dụng, email văn bản đơn giản vẫn phù hợp, nhưng hầu hết các email tiếp thị đều có nội dung phong phú và tương tác Show
Chúng phản hồi nhanh và sử dụng các tiết lộ được kiểm soát để giúp điều hướng chúng dễ dàng, bất kể thiết bị là gì Mã HTML trong email là gì?Nếu bạn không có kinh nghiệm với mã HTML, bạn vẫn có thể xem mã từ mọi email bạn nhận được mà không cần bất kỳ phần mềm đặc biệt nào. Có thể truy cập mã từ máy tính để bàn và máy khách web Tương tự, nếu bạn đang thiết kế các mẫu của mình từ Trình giám sát chiến dịch, bạn cũng có thể kiểm tra mã HTML cơ bản. Bạn thậm chí có thể tải xuống, sửa đổi và tải lên lại Và nếu bạn không muốn tìm hiểu về mã hóa, điều đó cũng không sao cả. Trình chỉnh sửa kéo và thả của Campaign Monitor giúp dễ dàng tạo các email đẹp mắt mà không cần phải chạm hoặc chỉnh sửa mã Làm cách nào để xem HTML trong Outlook?Trong Microsoft Outlook, bấm đúp để mở email. Bạn sẽ thấy menu “Hành động” trong tab “Tin nhắn”. Nhấp vào menu đó và chọn “Other Actions”, sau đó nhấp vào “View Source” để xem mã HTML Bất kể trình soạn thảo văn bản mặc định của bạn là gì, tệp HTML sẽ mở dưới dạng. tập tin txt Làm cách nào để xem HTML trong Gmail?Nếu bạn sử dụng ứng dụng khách web của Gmail, bạn có thể nhấp chuột phải vào email và chọn “Xem nguồn trang. ” Tuy nhiên, thao tác này sẽ hiển thị cho bạn toàn bộ mã HTML của trang web, bao gồm cả thông tin về thông báo Sử dụng Outlook được kết nối với tài khoản Gmail của bạn sẽ cho phép bạn chỉ xem trực tiếp HTML của email Làm cách nào để xem HTML trong Giám sát Chiến dịch?Trong Campaign Monitor, bạn có thể xem mã HTML từ cửa sổ xem trước. Khi bạn đã thiết kế mẫu của mình, bạn có thể mở cửa sổ xem trước trên trang Ảnh chụp chiến dịch và chọn “Xem nguồn trang. ” Bạn có thể lưu tệp bằng cách nhấp chuột phải và chọn “Lưu dưới dạng” hoặc sao chép văn bản và dán vào trình soạn thảo văn bản hỗ trợ HTML yêu thích của bạn. Điều này sẽ cho phép bạn sửa đổi mã HTML cục bộ và sau đó nhập lại vào Trình giám sát chiến dịch để sử dụng trong các chiến dịch trong tương lai Lưu ý rằng, sau khi bạn sửa đổi HTML và nhập lại trực tuyến, bạn sẽ không thể sửa đổi nó bằng giao diện người dùng nữa. Bạn sẽ phải thực hiện tất cả các thay đổi trong tương lai đối với email trong mã HTML Cách đo lường mức độ thành công của mã email HTMLHTML có thể cung cấp các email mạnh mẽ, phản hồi nhanh. Mặc dù email văn bản đơn giản cũng hoạt động tốt cho một số mục đích hoặc đối tượng, nhưng các nhà tiếp thị thường thích quảng cáo sản phẩm hoặc dịch vụ của họ thông qua email HTML Bằng cách theo dõi tỷ lệ mở và tỷ lệ nhấp, bạn sẽ biết định dạng nào phù hợp với thương hiệu cụ thể và đối tượng cụ thể của mình Bằng cách phân đoạn tỷ lệ mở theo thiết bị, bạn sẽ thấy khi nào email của mình không có tác dụng mong muốn đối với khách hàng di động. Bạn có thể làm điều này từ phần "Thông tin chi tiết" trong Giám sát chiến dịch Thật sự nó có ảnh hưởng sao?Với email HTML hiện đại, bạn có thể thêm hình nền, video, nút và hầu hết mọi thứ khác mà trang web có. Bạn cũng có thể đảm bảo email của mình phản hồi nhanh, bất kể thiết bị được sử dụng để mở chúng Một điều tuyệt vời khác về email dựa trên HTML là các phân tích mà chúng thu thập cho các nhà tiếp thị. Với các email dựa trên HTML, bạn có thể theo dõi mọi tương tác mà người nhận thực hiện Với các email văn bản thuần túy thực sự, đây không thực sự là trường hợp. Tuy nhiên, các email văn bản thuần túy thực sự là các email HTML được định dạng giống như văn bản thuần túy có thể cho phép phân tích Gì bây giờ?Nếu bạn muốn biết thêm về cách sử dụng mã HTML trong thiết kế email của mình, hãy xem hướng dẫn này để biết thêm chi tiết về cách sử dụng nó trong các mẫu. Mặc dù bạn có thể biết HTML và CSS, nhưng có một số lưu ý khi sử dụng chúng để thiết kế email hỗ trợ HTML, vì vậy điều quan trọng là phải làm quen với chúng HTML đại diện cho Ngôn ngữ đánh dấu siêu văn bản và là ngôn ngữ kịch bản dựa trên web. Đối tượng chính của nó là tạo và thiết kế các trang web. Các bản ghi có phần mở rộng HTML (hoặc HTM) chỉ giữ lại văn bản và tham chiếu đến các tài liệu khác, chẳng hạn như hình ảnh hoặc video Nhấp chuột phải vào bất kỳ trang web nào, nhấp vào Kiểm tra và bạn sẽ thấy các phần bên trong của trang web đó. mã nguồn của nó, hình ảnh và CSS tạo nên thiết kế của nó, phông chữ và biểu tượng mà nó sử dụng, mã Javascript cung cấp hoạt ảnh, v.v. Bạn có thể xem trang web mất bao lâu để tải, lượng băng thông được sử dụng để tải xuống và màu sắc chính xác trong văn bản của trang web Hoặc, bạn có thể sử dụng nó để thay đổi bất cứ điều gì bạn muốn trên trang Inspect Element là một cách hoàn hảo để tìm hiểu điều gì làm cho trang web được đánh dấu, tìm ra những gì bị hỏng trên trang web của bạn, mô phỏng sự thay đổi màu sắc và phông chữ sẽ trông như thế nào và giúp bạn không phải Photoshop các chi tiết riêng tư trong ảnh chụp màn hình. Đó là một siêu năng lực mà bạn không hề biết rằng trình duyệt của mình sở hữu Hãy tìm hiểu cách sử dụng Google Chrome Inspect Element để hỗ trợ công việc của bạn, cho dù bạn là nhà phát triển hay nhà tiếp thị chưa từng viết một dòng mã nào. Nếu bạn đang đọc nội dung này trên điện thoại, thì đã đến lúc chuyển sang máy tính xách tay của bạn, hãy mở Google Chrome và sẵn sàng chỉnh sửa một số mãHầu hết các trình duyệt web—bao gồm Mozilla Firefox và Safari của Apple—bao gồm công cụ Kiểm tra phần tử, trong khi trình duyệt Internet Explorer và Edge của Microsoft bao gồm một bộ Công cụ dành cho nhà phát triển tương tự. Hướng dẫn này tập trung vào các công cụ Kiểm tra phần tử của Google Chrome, nhưng hầu hết các tính năng đều hoạt động giống nhau trong các trình duyệt khác Chờ đã, tại sao tôi nên sử dụng Inspect Element?Google Chrome Inspect Element cho phép bạn xem một trang webNếu bạn chưa bao giờ xem mã của một trang web vì tò mò, bạn có thể thắc mắc tại sao bạn nên học cách sử dụng Inspect Element
Không bao giờ bỏ lỡ một bài đăng trên blog của Zapier Đặt mua Đối với những trường hợp này và hàng chục trường hợp sử dụng khác, Inspect Element là một công cụ hữu ích để theo dõi. Đó là một phần của Công cụ dành cho nhà phát triển trong trình duyệt của bạn, bao gồm một số tính năng bổ sung. bảng điều khiển để chạy mã, trang Xem nguồn để chỉ xem mã thô phía sau trang web, trang Nguồn có danh sách mọi tệp được tải trong trang web, v.v. Bạn có thể tự mình khám phá tất cả những thứ đó, nhưng bây giờ, hãy xem cách sử dụng tab Thành phần chính để tự chỉnh sửa trang web của chúng tôi Cách bắt đầu với Kiểm tra phần tửCó một số cách để truy cập Google Chrome Inspect Element. Chỉ cần mở một trang web mà bạn muốn thử chỉnh sửa (để làm theo hướng dẫn này, hãy mở Zapier. com), sau đó mở công cụ Kiểm tra phần tử theo một trong ba cách sau
Theo mặc định, Công cụ dành cho nhà phát triển mở trong một ngăn ở cuối trình duyệt của bạn và sẽ hiển thị tab Thành phần—đó là công cụ Kiểm tra thành phần nổi tiếng mà chúng tôi đang tìm kiếm Bạn sẽ không có nhiều không gian để làm việc với Kiểm tra phần tử ở cuối màn hình, vì vậy hãy nhấp vào ba dấu chấm dọc ở phía trên cùng bên phải của ngăn phần tử kiểm tra gần chữ "X" (bạn sẽ nhấp vào biểu tượng này để đóng . Bây giờ, bạn sẽ thấy một tùy chọn để di chuyển ngăn sang bên phải trình duyệt của mình (chế độ xem neo bên phải) hoặc để mở ngăn trong một cửa sổ hoàn toàn riêng biệt (chế độ xem bỏ neo) Đối với hướng dẫn này, hãy gắn ngăn ở bên phải cửa sổ trình duyệt của bạn để có thêm không gian làm việc. Bạn có thể làm cho bảng Công cụ dành cho nhà phát triển rộng hơn hoặc hẹp hơn bằng cách di chuột qua đường viền bên trái. Khi con trỏ Bây giờ chúng ta đang ở phần Kiểm tra phần tử, có một loạt các công cụ hữu ích trong tầm tay mà chúng ta có thể sử dụng để làm cho bất kỳ trang web nào trông chính xác như cách chúng ta muốn. Đối với hướng dẫn này, chúng tôi sẽ tập trung vào các tab Thành phần, Mô phỏng và Tìm kiếm Tìm kiếmTab "" cho phép bạn tìm kiếm một trang web cho nội dung cụ thể hoặc phần tử HTML. Nó hơi ẩn. bạn sẽ cần nhấp vào 3 dấu chấm, sau đó nhấp vào Tìm kiếm tất cả các tệp để khám phá nó. Sau đó, bạn sẽ có thể tìm kiếm mọi tệp trong trang web để tìm bất kỳ thứ gì bạn muốn yếu tố"Kiểm tra phần tử" là công cụ mà chúng ta sẽ khám phá nhiều nhất trong hướng dẫn này và là công cụ mở ra đầu tiên khi bạn khởi chạy Công cụ dành cho nhà phát triển trong hầu hết các trình duyệt. Hoặc, nhấp vào tab "" trong Công cụ dành cho nhà phát triển để quay lại nếu bạn đang khám phá ở nơi khác Trong tab Khám phá, bạn có thể xem tất cả HTML, JavaScript và CSS đã tạo nên một trang web. Nó gần giống như việc chỉ xem nguồn của một trang web, với một điểm khác biệt quan trọng. bạn có thể thay đổi bất kỳ mã nào và xem các thay đổi trong thời gian thực trên trang web bạn đã mở. Bạn có thể thay đổi mọi thứ từ bản sao sang kiểu chữ, sau đó chụp màn hình thiết kế mới hoặc lưu các thay đổi của bạn (chỉ cần đi tới Xem > Nhà phát triển > Xem nguồn và lưu trang dưới dạng tệp HTML hoặc sao chép các thay đổi mã vào trình soạn thảo văn bản của bạn). Tuy nhiên, khi bạn tải lại trang, tất cả các thay đổi của bạn sẽ biến mất vĩnh viễn thi đuaBạn đã bao giờ muốn xem trước một trang web trên điện thoại mà không cần rút điện thoại ra khỏi túi chưa? . Bạn thậm chí có thể đặt tốc độ internet mô phỏng để xem trang web sẽ tải nhanh như thế nào qua quay số Nó cũng có một chút ẩn. bạn sẽ cần mở Inspect Element và nhấp vào nút biểu tượng điện thoại để bắt đầu. Sau đó, bạn sẽ có một công cụ hoàn hảo để hiểu cách người khác trải nghiệm một trang web Đã đến lúc phải đi làm. Trước tiên, chúng tôi sẽ sử dụng Tìm kiếm để tìm mọi thứ trên trang web, sau đó sử dụng Phần tử để chỉnh sửa văn bản và hơn thế nữa trên trang web và cuối cùng sẽ sử dụng Mô phỏng để xem trang web của chúng tôi trông như thế nào trên điện thoại từ một vị trí cụ thể Tìm mọi thứ trên một trang web với Tìm kiếm phần tử kiểm traTự hỏi những gì đi vào các trang web yêu thích của bạn? . Bạn chỉ có thể mở chế độ xem Thành phần mặc định, nhấn Để bắt đầu, hãy mở Zapier. com trong Chrome nếu bạn chưa có, sau đó mở Kiểm tra phần tử, nhấp vào 3 dấu chấm dọc ở góc trên cùng bên phải của ngăn Công cụ dành cho nhà phát triển (gần chữ "X") và chọn "Tìm kiếm tất cả tệp. " Tab Tìm kiếm sẽ xuất hiện ở nửa dưới của ngăn Công cụ dành cho nhà phát triển Nhớ cách mở Inspect Element? Trong trường tìm kiếm, bạn có thể nhập bất kỳ thứ gì—BẤT CỨ ĐIỀU GÌ—mà bạn muốn tìm trên trang web này và nó sẽ xuất hiện trong ngăn này. Hãy xem làm thế nào chúng ta có thể sử dụng này Nhập Hãy thử một truy vấn khác. Xóa Tìm kiếm cũng là một công cụ hiệu quả cho các nhà thiết kế vì bạn cũng có thể tìm kiếm theo màu sắc. Nhập Đây là một cách thuận tiện để các nhà thiết kế đảm bảo rằng một trang web đang tuân theo hướng dẫn về phong cách thương hiệu của họ. Với công cụ "Tìm kiếm", các nhà thiết kế có thể dễ dàng kiểm tra CSS của trang web để xem liệu một màu có được áp dụng cho thành phần sai hay không, nếu một họ phông chữ không chính xác được sử dụng trên trang web hoặc nếu bạn vẫn đang sử dụng Công cụ "Tìm kiếm" cũng là cách hoàn hảo để giao tiếp tốt hơn với các nhà phát triển vì bạn có thể chỉ cho họ chính xác nơi bạn đã tìm thấy lỗi hoặc chính xác những gì cần thay đổi. Chỉ cần cho họ biết số dòng nơi có sự cố và bạn sẽ khắc phục nhanh hơn nhiều Hoặc, bạn có thể tự thay đổi trang web bằng Thành phần, phần cốt lõi của Công cụ dành cho nhà phát triển của Chrome Thay đổi mọi thứ với các yếu tốCác nhà phát triển giao diện người dùng sử dụng công cụ Kiểm tra phần tử hàng ngày để sửa đổi giao diện của trang web và thử nghiệm các ý tưởng mới—và bạn cũng có thể làm như vậy. Inspect Elements cho phép bạn điều chỉnh giao diện và nội dung của trang web bằng cách thêm các chỉnh sửa tạm thời vào các tệp CSS và HTML của trang web Khi bạn đóng hoặc tải lại trang, các thay đổi của bạn sẽ biến mất; . Bằng cách đó, bạn có thể thoải mái thử nghiệm và thay đổi mọi thứ—sau đó sao chép và lưu những thay đổi tốt nhất để sử dụng lại sau này Hãy xem những gì chúng ta có thể làm với nó Nhấp vào tab "Thành phần" trong ngăn Công cụ dành cho nhà phát triển—và nếu bạn muốn có thêm chỗ, hãy nhấn phím "Esc" để đóng hộp tìm kiếm mà bạn đã mở trước đó. Bạn sẽ thấy HTML của trang này—bây giờ bạn đã biết xúc xích được làm như thế nào Ở góc trên cùng bên trái của ngăn nhà phát triển, bạn sẽ thấy biểu tượng con chuột ở phía trên hình vuông. Nhấp vào nó, sau đó bạn có thể chọn bất kỳ yếu tố nào trên trang mà bạn muốn thay đổi. Vì vậy, hãy thay đổi một số điều Thay đổi văn bản trên trang webBạn đã bao giờ muốn thay đổi văn bản trên một trang web—có lẽ để xem dòng giới thiệu mới sẽ trông như thế nào trên trang chủ của bạn hoặc để xóa địa chỉ email của bạn khỏi ảnh chụp màn hình Gmail? Nhấp vào biểu tượng "chuột ở đầu hình vuông", sau đó nhấp vào bất kỳ văn bản nào trên trang—có thể là dòng giới thiệu trên trang chủ Zapier. Trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một dòng văn bản có phần tô sáng màu xanh giống như thế này Nhấp đúp vào văn bản "Kết nối ứng dụng của bạn" được tô sáng màu xanh lam trong ngăn Công cụ dành cho nhà phát triển và văn bản này sẽ chuyển thành trường văn bản có thể chỉnh sửa Nhập bất cứ thứ gì bạn thích vào trường văn bản này ("Auri là một thiên tài" sẽ hoạt động tốt) và nhấn enter. thì đấy. Bạn vừa thay đổi văn bản trên trang web Làm mới trang và mọi thứ sẽ trở lại bình thường Niềm vui? Ngăn Công cụ dành cho nhà phát triển của bạn tải lại cùng với trang, nhưng hãy đóng nó lại. Nhấn "X" ở góc trên bên phải của trang Mát mẻ. Bây giờ chúng ta sẽ mở nó trở lại—ngay tại văn bản mà chúng ta muốn chỉnh sửa. Tất cả những gì bạn phải làm là nhấp chuột phải vào phần trang bạn muốn thay đổi, sau đó nhấp vào liên kết Kiểm tra hoặc Kiểm tra phần tử xuất hiện ở cuối menu chuột phải Khi ngăn Công cụ dành cho nhà phát triển của bạn mở ra, nó sẽ tự động đánh dấu câu đó. Khá gọn gàng, phải không? Bây giờ chúng tôi đã chọn dòng giới thiệu trên trang web Zapier, hãy thay đổi giao diện của nó Thay đổi màu sắc và phông chữ của các phần tửỞ bên phải của câu này trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một ngăn phụ có 3 tab bổ sung. Trình xử lý kiểu, tính toán và sự kiện. Mỗi cái cho phép bạn thay đổi giao diện của câu này trên trang. Hãy bắt đầu trên tab "Kiểu" Bạn có thể nhận thấy rằng một số nội dung bị gạch bỏ trong tab "Kiểu". Điều này có nghĩa là các kiểu này không hoạt động đối với phần tử mà chúng tôi đã chọn chúng, vì vậy việc thay đổi các giá trị này sẽ không có hiệu lực. Chúng ta có thể bỏ qua những điều này cho mục đích của chúng tôi Hãy thử thay đổi một cái gì đó. Nhấp lại vào biểu tượng mũi tên ở đầu Kiểm tra phần tử và chọn văn bản ngay bên dưới nút "Đăng ký" trên trang. Tìm "text-align" trong tab "Styles" (bạn có thể phải cuộn một chút để tìm cái này) Ngay bây giờ, nó được đặt thành "trung tâm", nhưng hãy nhấp đúp vào "trung tâm" và nhập Bây giờ hãy thử với màu sắc. Sử dụng biểu tượng chuột trong Kiểm tra phần tử để chọn nút lần này, sau đó trong tab Kiểu tìm dòng này Và nhấp đúp vào "#ff4a00". Nhập Chúng tôi vừa thay đổi màu của nút từ cam sang xanh lam. Bây giờ hãy thử một cái gì đó thực sự mát mẻ Thay đổi trạng thái phần tửBạn muốn xem nút hoặc liên kết sẽ trông như thế nào khi ai đó di chuột qua hoặc nhấp vào nút hoặc liên kết đó? . Bạn có thể thấy phần tử sẽ trông như thế nào sau khi khách truy cập di chuột qua phần tử (trạng thái di chuột), chọn phần tử (trạng thái tiêu điểm) và/hoặc đã nhấp vào liên kết đó (trạng thái đã truy cập) Hãy thử điều này. Đảm bảo bạn đã chọn nút đăng ký trên trang chủ Zapier. Sau đó, nhấp chuột phải vào mã đó trong tab Thành phần và chọn Điều đó sẽ thay đổi nút thành màu xám, trang web của Zapier hiển thị khi bạn nhấp vào nút Bây giờ hãy thay đổi giá trị màu nền thành Hãy thử trải nghiệm—thay đổi màu của Thay đổi hình ảnhBạn cũng có thể dễ dàng thay đổi hình ảnh trên trang web bằng Inspect Element. Hãy hoán đổi hình nền Siêu anh hùng trên trang web Zapier với bức ảnh ấn tượng về ngọn lửa mặt trời từ NASA Đầu tiên, sao chép và dán liên kết này vào hình ảnh
Bây giờ, hãy mở Inspect Element trên nền của trang chủ Zapier và đảm bảo rằng bạn đã chọn dòng Nhấn "enter" và thấy ngay sự khác biệt Ghi chú. Bạn cũng có thể thay đổi ảnh thành GIF hoặc video—tất cả những gì bạn cần là liên kết tới tệp và bạn có thể thêm liên kết đó vào Chỉnh sửa văn bản rất tiện lợi, hoán đổi hình ảnh rất thú vị và việc thay đổi màu sắc cũng như kiểu dáng có thể giúp bạn nhanh chóng mô phỏng những thay đổi bạn muốn thực hiện cho trang web của mình. Nhưng thiết kế nút và khẩu hiệu mới đó sẽ trông như thế nào trên thiết bị di động? Đó là lúc Thi đua xuất hiện—đó là lúc mọi thứ chúng tôi đã xem xét cho đến nay có thể được áp dụng hơn nữa. Hãy xem làm thế nào Kiểm tra trang web trên bất kỳ thiết bị nào có mô phỏngTất cả mọi thứ phải được đáp ứng ngày hôm nay. Các trang web không còn chỉ được xem trên máy tính—chúng có nhiều khả năng được xem trên điện thoại, máy tính bảng, TV hoặc bất kỳ loại màn hình nào khác hơn bao giờ hết. Điều đó phải luôn được ghi nhớ khi tạo nội dung và thiết kế mới Mô phỏng là một công cụ tuyệt vời để ước tính giao diện của các trang web đối với người dùng trên nhiều thiết bị, trình duyệt và thậm chí cả các vị trí. Mặc dù điều này không thay thế việc thử nghiệm thực sự trên nhiều thiết bị và trình duyệt, nhưng đó là một khởi đầu tuyệt vời Trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một biểu tượng điện thoại nhỏ ở góc trên cùng bên trái. Nhấp vào nó. Điều này sẽ thay đổi trang thành một trang nhỏ, kiểu điện thoại với menu ở trên cùng để thay đổi kích thước Thay đổi kích thước trình duyệt nhỏ để xem mọi thứ trông như thế nào nếu bạn đang duyệt trên máy tính bảng, điện thoại hoặc thậm chí màn hình nhỏ hơn. Hoặc, nhấp vào menu ở trên cùng để chọn kích thước thiết bị mặc định như Màn hình trang web sẽ thu nhỏ lại bằng kích thước của iPhone 8 Plus và bạn có thể phóng to một chút bằng cách nhấp vào biểu tượng + bên cạnh số ở trên cùng bên phải của lưới—đó là giao diện của trang web nếu ai đó phóng to Tiếp tục phóng to chế độ xem bằng cách kéo cạnh phải của mô phỏng trang web sang phải. Xem những gì xảy ra? . Kéo màn hình dọc theo lưới cho phép bạn xem trang web sẽ thay đổi như thế nào khi kích thước màn hình thay đổi, nhưng chế độ xem của bạn sẽ không còn phản ánh kiểu thiết bị mà bạn đã chọn trước đó Hãy quay lại chế độ xem iPhone 8 Plus bằng cách chọn lại chế độ xem này trong danh sách kiểu máy thả xuống. Bên cạnh danh sách thả xuống là từ "Chân dung. " Như bạn có thể đoán, điều này cho phép bạn chuyển đổi giữa chế độ xem ngang và ngang Bây giờ, chúng ta có thể xem bài đăng này sẽ trông như thế nào nếu bạn đang đọc nó trên iPhone 8 Plus. Vui lòng chơi xung quanh với các thiết bị khác để xem trang web này và độ phân giải màn hình thay đổi như thế nào. Tất cả các công cụ dành cho nhà phát triển khác mà chúng tôi đã giới thiệu cho đến nay cũng sẽ phản ứng với chế độ xem thiết bị. Ví dụ: chọn lại văn bản khẩu hiệu của Zapier Ở chế độ xem iPhone 8 Plus, chúng ta có thể thấy dòng chữ này là 2em, trong khi ở chế độ xem mặc định trên máy tính là 3em "Em" là đơn vị cỡ chữ cho phép bạn tự động thay đổi kích thước của văn bản so với văn bản xung quanh. Ví dụ: giả sử chúng tôi có một người dùng có cài đặt phông chữ tùy chỉnh lớn trên trình duyệt của họ. Nếu bạn đặt kích thước phông chữ đoạn văn của mình thành 14px, thì phông chữ của bạn sẽ luôn là 14px cho người dùng đó bất kể điều gì. Tuy nhiên, nếu bạn đặt kích thước phông chữ của đoạn văn thành 1em, trình duyệt của người dùng sẽ sử dụng đơn vị này để chia tỷ lệ văn bản của bạn theo cài đặt lớn của người dùng. Điện thoại và máy tính bảng làm điều này để thu phóng văn bản độc đáo Bây giờ, hãy chuyển sang chế độ xem Apple iPad và chọn tiêu đề "thử nghiệm trên các thiết bị" ở trên. Lần này, cỡ chữ là 3em. Kích thước phông chữ đã thay đổi dựa trên chế độ xem thiết bị, trở lại kích thước mặc định mà phông chữ sẽ sử dụng trên máy tính nhờ màn hình lớn hơn của máy tính bảng Giả lập cảm biến thiết bị di độngBạn có thể nhận thấy rằng con chuột của bạn bây giờ xuất hiện dưới dạng một vòng tròn nhỏ trên trang web. Điều này cho phép bạn tương tác với trang như thể bạn đang ở trên thiết bị di động của mình. Nếu bạn nhấp trong khi kéo trang xuống, thao tác này sẽ không làm nổi bật văn bản như bình thường trong trình duyệt của bạn—nó sẽ kéo màn hình xuống giống như bạn đang sử dụng thiết bị màn hình cảm ứng. Sử dụng chế độ xem này, bạn có thể thấy các vùng cảm ứng lớn như thế nào trên một trang web. Điều này có nghĩa là bạn có thể xem các nút, biểu tượng, liên kết hoặc các yếu tố khác có thể dễ dàng chạm bằng ngón tay Bạn thậm chí có thể làm cho trình duyệt của mình hoạt động như một chiếc điện thoại. Nhấn phím "Esc" để mở lại ngăn tìm kiếm trong Kiểm tra phần tử và lần này nhấp vào menu 3 chấm ở bên trái để có menu tùy chọn. Chọn Cảm biến để nhận ba công cụ mới. Định vị địa lý, Định hướng và Cảm ứng Cảm ứng cho phép bạn bật hoặc tắt bộ chọn vòng tròn mặc định hoạt động giống ngón tay hơn là con trỏ chuột thông thường. Định hướng cho phép bạn tương tác với các trang web nhạy cảm với chuyển động, chẳng hạn như trò chơi trực tuyến cho phép bạn di chuyển mọi thứ bằng cách di chuyển điện thoại của mình. Và Định vị địa lý cho phép bạn giả vờ như mình đang ở một địa điểm khác Hãy thử xem trang web này từ Trụ sở chính của Google ở Mountain View, CA Chọn hộp bên cạnh "Mô phỏng tọa độ định vị địa lý" và nhập giá trị Không có gì thay đổi, phải không? Điều này là do không có nội dung nào trên trang này thay đổi dựa trên vị trí của bạn. Tuy nhiên, nếu bạn thay đổi tọa độ trên một trang web như Mô phỏng là một cách tuyệt vời để đặt bạn vào vị trí của người dùng và xem xét những gì người dùng có thể thấy trên trang web của bạn—và đó là một cách thú vị để khám phá web quốc tế Mô phỏng mạng di độngBạn cũng có thể xem nó như thế nào khi duyệt một trang web trên các mạng khác nhau, có lẽ để xem liệu trang web của bạn có tải ngay cả khi người dùng của bạn sử dụng mạng 3G chậm hơn không Để dùng thử, hãy nhấp lại vào nút ba vòng tròn ở bên trái tab tìm kiếm của Kiểm tra phần tử và chọn "Điều kiện mạng". Ở đó, bạn có thể chọn 3G nhanh hay chậm, hoặc ngoại tuyến để xem trang hoạt động như thế nào khi không có internet. Hoặc, nhấp vào Thêm. để bao gồm thử nghiệm của riêng bạn (có thể thêm 56 Kbps để kiểm tra internet quay số). Bây giờ, hãy tải lại trang và bạn sẽ thấy trang web mất bao lâu để tải khi kết nối chậm—và trang web trông như thế nào khi đang tải. Điều đó sẽ cho thấy lý do tại sao bạn nên cải thiện trang web của mình để tải nhanh hơn trên các kết nối chậm Bạn cũng có thể thay đổi tác nhân người dùng của mình—bỏ chọn "Chọn tự động" bên cạnh "Tác nhân người dùng" và chọn "Internet Explorer 7" để xem liệu trang web có thay đổi kết xuất của nó đối với các trình duyệt cũ hơn không. Đó cũng là một thủ thuật hữu ích để làm cho các trang web tải ngay cả khi chúng tuyên bố rằng chúng chỉ hoạt động trong một trình duyệt khác như Internet Explorer thử tháchHãy kết thúc với một vài thử thách. Hãy cho chúng tôi thấy những gì bạn đã học được
Nhóm Tiếp thị tại nhóm Zapier dựa vào Kiểm tra phần tử để chỉnh sửa thông tin cá nhân từ ảnh chụp màn hình trong các bài đánh giá ứng dụng của chúng tôi, trong khi nhóm thiết kế của chúng tôi sử dụng nó để mô phỏng các thay đổi và xem mọi thứ sẽ trông như thế nào trên các màn hình khác nhau Làm thế nào để bạn sử dụng Inspect Element? Thưởng thức các kỹ năng hack mới của bạn? Hướng dẫn này ban đầu được xuất bản vào ngày 5 tháng 1 năm 2015, sau đó được cập nhật và xuất bản lại vào ngày 6 tháng 6 năm 2017 và ngày 25 tháng 1 năm 2018 với ảnh chụp màn hình và các bước từ phiên bản Google Chrome mới nhất |