Mobile-First Engineering Portfolios için Vaka

Bir mühendislik portföyü geçmiş projelerin koleksiyonundan daha fazlasıdır - bir akıllı telefonda sorunsuz bir iş veya işbirliği fırsatınızı iletişimleyen bir yaşam belgesidir. İşe alım uzmanları, problem çözme yetenekleri ve tasarım düşüncesi.Bir dönemde, web trafiğinin% 60'ından fazlası mobil cihazlardan kaynaklandığında, bir akıllı tasarım size bir iş maliyetinin, bir sözleşmeye veya işbirliği fırsatının maliyetinin ne kadar olduğunu garanti eder.

Ancak birçok mühendis - özellikle de donanım, yazılım veya sistemler üzerinde yoğunlaştı - mobil optimizasyonu bir sonraki olarak tedavi edecek. Bu kılavuz sizi sadece 6 inçlik bir görüntü üzerinde değil, aynı zamanda mühendislik taleplerinin güvenilirliğe sahip olması için gereken stratejiler ve araçlar aracılığıyla taşıyacaktır.

Neden Mobile-Friendly Design, Mühendisler için Başarısız

Mobilite Davranışı Mobilite

QUŞA'ya göre:0)Statista[[[DÜDÜDÜDÜŞÜNÜDÜŞÜNÜŞÜNÜye Olmayanlar İçin:0)[[[Üye Olmayanlar İçindekiler, Platformda bulunanlar, 3 saniyeden fazla yüklenecekler, güçleriniz garip bir menünün arkasındaki anahtar projeleri hesaplayabilir veya işe alımcınız muhtemelen hareket edecektir.

SEO ve Discoverability

Google mobil ilk indeksleme kullanır, yani arama motoru öncelikle sıralama için sitenizin mobil versiyonunu değerlendirmektedir.Bir mobil deneyim, portföyünüzü ikinci arama sonuçları sayfasında tutabilir, hatta masaüstü sürüme güvenen mühendislerdir (örneğin, kişisel bir web sitesi aracılığıyla) bu cezayı artırabilir.

Mühendislik Mindsetinizi Yanmak

Bir portföy kendi bir projedir. Bir işe alım yöneticisi bir telefonda bir kovalama gördüğünde, doğrudan mühendislik çalışmanıza dikkatinizi bilinçaltında sorgulayabilirler.Perverse olarak, kullanıcı merkezli tasarıma olan bağlılığınız.

Mobil-Friendly Design Foundational Principles of Mobile-Friendly Design

Sorumluluk

Sorumluluk tasarımı esnek ağlar, göreceli birimler (örneğin yüzdeler veya afyonlar gibi) ve CSS medya sorguları herhangi bir görüntüye uyum sağlamak için yapılandırın.Bir mühendislik portföyü için, bu sizin masaüstü proje kartlarınız, teknik beceri barları ve görüntü galerileri kırılmadan yeniden boyutlandırmalı veya yeniden taşımalıdır.

Touch-Friendly Navigation

Masaüstü hover menüleri dokunmatik ekranlarda kullanılamaz.Bir hamburger menüsünü, alt navigasyon çubuğunu veya kolayca atılabilecek basit bir bağlantı listesini uygulamanız. interaktif elementler (amatonlar, proje başparmak, bağlantıları) malzeme tasarım yönergelerine göre 48×48 pikselin minimum dokunuş hedefine sahiptir.

Bir özellik olarak performans

Mobil kullanıcılar genellikle sınırlı bant ve daha yüksek gecikmeli olan hücresel ağlara güveniyor. Bir sonraki-gen formatlara (WebP, AVIF) hizmet ederek ve tembel yükleme kullanarak. Minimise CSS ve JavaScript, ve JavaScript ile inşa edilen bir CDN'ler için (React, Vue, Svelte), statik site nesli (SSG) yalnızca kullanıcı deneyimini geliştirir ve aynı zamanda olumlu etkiler SEO ve dönüşüm oranları da geliştirir.

Okunabilir Typography

En az 16px'nin vücut metinleri için küçük ekranlarda bir temel font boyutu ayarlayın. Line yükseklikleri, sadece tarayıcı araçları üzerinde değil, 45-75 karakter için bir telefondan kaçının.

İçerik özellikle Mühendislik Portföyleri için tasarım

Öncekiitise Your Best Projects

Küçük bir ekranda, bir tane için yer yoktur. Tam proje sayfası ek ayrıntılar sunabilir, ancak mobil ev sayfası beş saniye içinde güçlü bir izlenim yapmalıdır.

Show, Don't Just Tell

Mühendisler interaktif elementler aracılığıyla yetenekleri gösterebilirler.Zenginlik düşünün:

  • [0]Live code sandboxes[[Dönetici:0)[Dönder: 0,3|Dönder, Kodlar ve kutu, Codepen) ziyaretçi ayar parametrelerine izin veren.
  • [FONT:0]3D modeller (üç.js veya glTF viewer) mekanik veya yapısal projeler için.
  • [FONT:0]Video, gömülü sistemler veya donanım prototipleri tarafından ilerlenir.
  • [FONT=0)Performance grafikler[[[Döneticileri gibi hafif kütüphaneler) daha önce/en optimizasyonlardan sonra gösterir.

Her interaktif element mobilde iletişim dostu ve test edilmelidir. Sayfayı yavaşlatan ağır bağımlılıklardan kaçının.

Consistent Branding Across Breakpoints

Kişisel markanız – renkli palet, logo, ton – masaüstünden mobile kadar tutarlı kalmalıdır. ancak, daha küçük ekranlarda belirli öğeleri basitleştirmek gerekebilir. Örneğin, tam geniş bir kahraman görüntüsü ile metin aşırı yükleme ile çalışır, ancak bir telefonda, Figma'nın altındaki metinleri kodlamadan oluşturmak için bir tasarım aracı kullanabilirsiniz; bu uygulama sırasında sürprizleri önler.

Eylem Çağrıları

Ziyaretçilerin dokunmasını kolaylaştırır. Üst navigasyon çubuğunda veya her proje özetinin sonundaki önemli bir “İletişim” düğmesine tıklayın. Kullanıcılara ayak basmasına yol açmasını engellemeyi bırakın; bunun yerine, bir çubukla veya yüzen bir aksiyon düğmesine sık sık sık sık sık sık kod örnekleri veya işbirliği için talepler alın - doğrudan bir GitHub profiline veya mobil üzerinde iyi çalışan bir iletişim formuna bağlanmak.

Teknik Uygulama: Doğrudanus ve Modern Frontends ile Portföyü Yapın

Neden Direktus bir Mühendislik Portföyü için?

[FONT:0)Directus[DÜDÜT:1], herhangi bir ön uç çerçeveden tam kontrol etmenizi sağlayan açık kaynaksız CMS. Çünkü bir mühendislik portföyü için, özel koleksiyonları küresel bir CDN için tanımlayabilirsiniz - mobil performans için kritik.

Ayarlayın İçerik Modelini Ayarlayın

AFL:0)Projeler[Dönemli:0)[Dönemli) koleksiyonlar:

  • [FONT:0)Title[[Döncükler)
  • [FONT:0)Description[[DÜDÜDÜDÜDÜDÜDÜŞÜN)
  • [FONT:0)Teknolojiler kullanılır[[Dönemli: 1)
  • [FONT=0)Öyle İLGİLİ:0)Öyle İLGİLİ (gönetici, çoklu duyarlı stilleri ile)
  • [FONT=0]Dönder Link[Dönemli:0)
  • [FONT=0)Embedded Media[[Dönemli: 1)[Dönemli URL veya kod sandbox iframe)
  • [FONT=0)[[[FONT=0)

Directus'un görüntü dönüşümü API'si otomatik olarak başparmak ve WebP versiyonlarını üretebilmek için, o zaman cihazın görüş alanına göre farklı boyutlarda hizmet edebilirsiniz.Bu, manuel görüntü optimizasyonu ihtiyacını ortadan kaldırır ve portföyünüzü hafif tutar.

Frontend Framework'ü seçin

Mobil ilk mühendislik portföyleri için statik site jeneratörleri (-SSG) idealdir çünkü zamanında önceden gelen sayfalar inşa ederler, yakın zamanda yük süreleri ile sonuçlanır.

  • [FONT:0)Sonraki.js (React))[tr| Geniş bir şekilde kullanılan, mükemmel görüntü optimizasyonunu [[ENFLT:4) ve CSS modülleri veya Tailwind CSS ile yanıt veren ayarlamalar.UseENFLT:5) Directus'tan veri almak ve her proje sayfası için HTML oluşturmak için.
  • [FONT:0)Nuxt.js (Vue))[0)[FONT=0))[0)Nuxt.js (Vue)[Vue)[D)[Döneticiler için daha basit bir öğrenme eğrisi ile benzer SSG yetenekleri zaten Vue ile tanıdıktır.

Her iki çerçeve de, hızlı destek gibi ve bildirimleri zorlayan ilerici web uygulamasını destekliyor ve mobil deneyimi daha da artırabilir.

Performans Uygulamayı Uygulamayı Uygulamayı İyileştirmeler

Görüntü optimizasyonunun ötesinde, bu adımları göz önünde bulundurun:

  • [FONT:0)Kom bölme[[Dönetici:0)[[Dönetici:0)Komşu bölmesi[Dönetici:0)[Dönetici: Yük sadece mevcut sayfa için gerekli olan JavaScript.For project details pages, bring additional content on demand.
  • [FONT:0) Dış kaynaklara bağlantı kurun[[Dön 1: 1) – KodSandbox veya YouTube videosu koyarsanız, [[DÜSÜSÜSÜSÜSÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN
  • [FONT:0]Font subcept – Kullandığınız karakterler ve ağırlıkları içerir. Self-host fontlar ekstra DNS görünümlerinden kaçınmak için.
  • [FONT=0]Critical CSS[[Dönetici:0)[Döneticileri yukarıdan aşağıya doğru çevirip geri atepıcı olarak yüklediğiniz stillerin.

Son sonucu test edin:0)Google PageSpeed Insights[[Dönetici: 1) en az 90 mobil performans puanı için bir simülasyonda.

Mobil Portföyünüzü Test Etmek

Oyuncular, Simulators ve Gerçek Cihazlar

Tarayıcı geliştirici araçları hızlı çekler için harika, ancak gerçek bir telefon hissini çoğaltmaz. BrowserStack veya LambdaTest gibi hizmetleri kullanarak siteyi onlarca gerçek cihazda önizlemeniz için kullanın. dikkat edin:

  • [FONT=0) <0><0|><0|><0}|><0|><0|><0|><0|><0|><0|><0|>|>|>|>|>|>|Dönderlik[Dönderlik|Döndergiler · herhangi bir gecikme var mı?
  • [FONT:0)Orientation[[[Dönetici: 1 ) – Her iki portre ve manzarada test edin. Bir portföy, cihazın döndürüldüğü zaman hala kullanılabilir olmalıdır.
  • [FONT:0) Ağ koşulları – Chrome'un throttling'i yavaş 3G'yi simüle etmek ve tembel yüklerin etkili bir şekilde yükleyeceğini görmek.

Kullanıcı Test with İşeers

Mümkünse, birkaç arkadaş veya mentorlar, portföyünüzü telefonlarında göz önünde bulundurmalarını isteyin. Zaman, belirli bir proje veya iletişim bilgilerinizi bulmak için ne kadar sürer. Arama, ve görsel temyiz hakkında yorum isteyin.Bu gerçek dünya sinyalleri sentetik metriklerden daha değerli.

Gerçek Dünya Örneği: Mobilitede Excels yapan bir Portföy

Sonlu bir element analizinde uzman olan bir havacılık mühendisi düşünün. portföyleri interaktif FEA sonuçları (ısıt haritaları, stres konsüsü) Python senaryolarından üretilen ve hareketli projelerle yapılan bir uçak mühendisi düşünün; mobil kullanıcılar tam genişleyen ve en iyi görüntülerle dolu listelenir.Para biriminde bir sonraki sürümde iki saniye içinde inşa edilir.InsApp kullanıcıları, iOS işlemi sırasındaki herhangi bir iletileri tekrar başlatır ve otomatik olarak otomatik olarak görürler.

“Bir portföyün iş aramamı yapabilir veya kırabileceğini düşünmemiştim, ancak mobil ilk olarak, işe giderken işe yaradıklarını söyleyen işe mesaj almaya başladım. ”-Ahkanık T.

Common Pitfalls Kaçmak için

Tasarımdan Fazlası

Bazı mühendisler portföylerini her teknoloji için bir vitrin olarak görürler, ağır, aşırı karmaşık bir siteye yol açarlar. Parallax kaydırma, animasyon arka planlarını veya birden fazla JavaScript kütüphanesi eklemeye hazırlar.Her ekstra özellik düşük uç mobil cihazlarda potansiyel bir başarısızlık noktasıdır.

Accessability

Mobil-işitsel HTML ([[Dönetici: 9), [[[0|0|0|)))) kullanılabilir. yeterli renk kontrastı sağlar ve ekran okuyucuları ile test edin ve kullanıcıların ses kontrolüne güvendiğini düşünün.

Yönetici Deneyimini Neglecting the Admin Experience

Doğrudanus veya başka bir CMS’yi portföyünüzü yönetmek için kullanıyorsanız, yönetici arayüzünün mobil düzenleme deneyimine de uyarılabilir olduğundan emin olun.You may want to add or edit project while away from your desk. Directus offers a sensitive admin dashboard out-of-the-box, but be careful when you customize it -don't break the mobile editing experience.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Mobil dostu bir mühendislik portföyü lüks değildir; işe alım kararlarının genellikle bir akıllı ekrandan başladığınız bir dünyada temel bir gerekliliktir.Sorulama tasarım ilkeleri, optimize performansı uygulayın ve Directus gibi esnek bir CMS kullanarak, profesyonel görünen ve sorunsuz bir şekilde tüm cihazlara yatırım yapan bir portföy oluşturabilirsiniz.

Bugün başlayın. Mevcut portföyünüzü bir telefonda kontrol edin, en büyük sürtünme puanlarını tanımlayın ve mobil kullanıcıları ilk önce koyan bir yeniden tasarım planlayın.