In this glorious/terrifying digital age we live in, there truly is an app for everything. We’re talking ordering pizza, operating a drone, learning a new language, even checking out what it would look like if we were to merge faces with Danny Trejo (pretty unsettling, FYI).

There are literally millions of downloadables floating around, a handful of which claim to be able to help us refine our style, but which ones are actually worth having?

To save you from cluttering up your smartphone finding out, we’ve compiled a rundown of the apps we think no stylish man should be without.

Instagram

Instagram isn’t just a place to share pictures of your lunch or funny snaps of your dog – this platform is filled with fashion and style inspiration for men of all ages and tastes.

Not only have global brands flocked to the social media network since its inception back in 2010, but the very best menswear bloggers, street style photographers and publications like us can also be found amongst its millions of profiles.

Available free on iPhone and Android.

Depop

eBay is great and all, but for those who find the process of making a listing a tad arduous, Depop might just be your new best mate.

Best summed up as an Instagram version of the auction site, simply take a few quick snaps of the item you want to sell, fill in some basic details, and your clothes will be listed as images in grid form for all to see and buy at the push of a button.

Available free on iPhone and Android.

In this tutorial, we’re going to learn how to draw the iOS Photos app icon in Adobe Illustrator.

Download Adobe Illustrator.

Mobile devices can not be ignored. People are using them to visit websites instead of their desktop computers. If your site isn’t easy to view on a mobile device, you are decreasing your chances to get more visitors and increase usage of your site.

What’s the difference?
Responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device. This “fluid grid” resizes the page width and/or height to adapt to different screen sizes and show correctly.

Adaptive design uses several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used. Adaptive works to detect the screen size and load the appropriate layout for it.

How do responsive and adaptive compare?
Responsive design is the more difficult choice since it requires extra attention to the site’s CSS and organization to make sure it functions at any possible size. It can be daunting making one layout that can work in any screen size.

Adaptive designs are less flexible, only working on as many screens as its layouts enable. If a new device with a new screen size is released, you may have to edit your design or add a new one. Responsive sites are flexible enough to keep working on their own, but Adaptive sites will likely need some occasional maintenance.

Should I use responsive or adaptive design?
Responsive is the safer option to go with for your site in most cases. It functions well regardless of screen size, improves loading times and is usually well worth the extra initial design time.

Having developed smaller projects using Objective-C/iOS I learned there are many benefits and drawbacks to native applications. HTML5 mobile web apps provide a quicker all-around experience for any mobile device – and even regular desktop monitors. This means you don’t need approval from a marketplace or app store and you can publish online right away.

There are certainly some drawbacks, namely that you can’t access default libraries found in the Android and iOS Swift SDKs. But if your application can work better running on a website then you should consider the possibilities.

In this article I hope to present tips for new designers who may wish to attempt building their own HTML/CSS/JS web application from scratch.

Simplicity vs. Aesthetics

There are so many common web applications online, but not many have been structured for mobile support. You have to weigh the necessities of logos, icons, background textures, and other assets which may require more HTTP requests. Mobile users are not always on wifi so the waiting time could be longer than a visitor is willing to stick around.

I like this little find & replace webapp on CodePen because it defines what a simplistic interface may look like. The form itself is not responsive, but it is small enough that anyone should be able to use it. Before designing your webapp think about which components are absolutely necessary for it to function properly.

Then go over your mockup and consider which areas might be improved upon, and how to do so. Try looking at other native Android/iOS applications to pinpoint trends from other experienced developers. And take a peek at mobile UI/UX animations to find ideas & inspiration you can mimic in your webapps.

The process of replicating an effect to the web can take a lot of work. But stick to your guns and you may be surprised what can be accomplished.

Compact Nav Menus

Page navigation is a key piece to any mobile website or webapp. But one crucially important idea you need to keep in mind revolves around screen real estate. Mobile smartphones do not have the luxurious displays that you find on tablets or laptops. You need to create navigation menus which can expand when appropriate, but also contract and even hide links to avoid clutter.

Here’s a fantastic example of the iOS-style sliding menu which has become wildly popular in recent years. Mobile iOS applications often hide links off to the side so they can be opened and closed at will. This gives more control to the user so they are interacting with links only at times when they actually need to navigate the site.

Other solutions include fixed-top dropdown menus or even stationary links at the bottom of the page. It all depends how your webapp is structured and if you even need multiple pages.

UI Design Patterns

Working towards a native look and feel will take a bit of practice. Common UI design patterns include top title bars, icon-based tab bars, large buttons and pre-formatted tables. Have a look at this CodePen entry playing with the Kendo UI.

I’ve built simpler mobile webapps running entirely on CSS3 gradients and media queries. It’s pretty simple to mimic design ideas from native applications by taking screenshots and matching the colors in your CSS file. And the benefit of running a responsive layout means you only need one primary design – as opposed to native apps which require both vertical and horizontal views.

Apple’s iOS is a great framework that runs on top of a well-recognized interface. But you may also prefer the flat design styles on Windows phones and in many Android applications. Toy around with various applications on your smartphone and do some research into what you like and what you don’t like.

Write down a list if that helps you remember ideas. Consider how each user would navigate through your application and how you could simplify this process with more recognizable page elements.

Mobile Frameworks

If you want that real native app UI design style then try starting with a basic framework. Many web developers have put out free open source frameworks that you can build upon and even contribute towards. Most designers are familiar with Bootstrap which is a personal favorite of mine. The components are well-received from everyone and it can behave exactly like a typical mobile-responsive website(or webapp).

One of the newer projects I stumbled onto is called Chocolate Chip UI. This open source project allows developers to create websites using a design like iOS 7, Android Jelly Bean, or Windows Phone 8. Components are easy to setup much like Bootstrap except they are built to render more like a mobile web application.

This is a big step forward as greater layers of abstraction provide quicker turnaround time on new projects. If you have a small webapp idea it could take you less than a week to get it working and launched online. If you’d rather create your own UI with HTML5/CSS3 that is always a possibility, but greater customization will require more time in the development phase.

Another framework you’ll want to remember is called iUI, specifically geared towards mobile websites and webapps. These components are built to match so you can design interfaces for iOS, Android, Blackberry, really anything you’d like. iUI is quite advanced with multi-column navigation and more detailed JavaScript effects.

Take a peek at the live demo to see how this framework behaves on a mobile viewport. Naturally you can allow these webapps to expand out wider for tablets or large monitors. The purpose is greater support within a wider audience all over the planet.

Related Articles

• “Mobifying” Your HTML5 Site
• Full-height app layouts in CSS
• Mobile Website vs. Native App vs. Mobile Web App
• Building Mobile Web Apps the Right Way: Tips and Techniques
• How to create a webapp that looks like a native iOS7 app

Closing

Mobile web trends are evolving faster than one could keep up with. There are so many new ideas worth testing and even though many will be cast aside, designers are always willing to push the envelope further. This article should get you started thinking about mobile web applications, user interface design, and possibly brainstorming your own webapp ideas.

Apple was the first major company to introduce standard retina screens on many devices. The newer MacBook Pro computers have been launched with a retina monitor, along with most iOS devices. This means a larger consumer market is growing and designers have to keep up with the changes.

In this guide I want to share ideas about retina displays and their purpose. Building a native application for Android or iOS is much simpler than a retina-ready website. It will take a bit of practice if retina design is unfamiliar to you. But it’s worth the effort when your final product comes out looking spectacular on all monitor resolutions.

The Basics of Retina

When you think about screen density the units attempt to compare digital pixels with physical inches. PPI(Pixels Per Inch) is the common unit of measurement and it changes for each device. Regular density screens have a certain number of pixels found in a 1×1 inch block.

This amount would double in a retina display. Apple packs a double-dense number of digital pixels into the same physical screen. The technology is supposed to be dense enough that a human eye couldn’t tell where the individual pixels appear.

You can see this in a lot of modern designs along with iPhone device mockups where the PSD files are double the size to fit this higher resolution.

Scalable page objects like text, CSS containers, and SVG graphics can naturally adapt to this double(and sometimes triple) resolution.

Bitmap images and fixed-width objects tend to remain stationary while trying to spread out the pixels more evenly. The goal of designing for retina is to create most of your website using flexible content. Images should be SVG when possible, or you can provide duplicate images for both resolutions.

Take a peek at this retina-focused article published on Smashing Magazine. It goes into more depth about the design techniques and how you might code an HTML/CSS website for natural adaptation. I’m more interested in the techniques you can use right now to update any current websites. You could also start practicing these methods in newer projects as time goes by.

Replacing Icons with Fonts

Some designers who are familiar with CSS3 will know about custom fonts. You can include a local or remote link to font files, and this becomes a new family accessible within CSS. Aside from letters and numbers you can include icon-based fonts as well.

This can work much better than making vector icons, or creating a double set for each image. Font icons will naturally scale up based on the screen size. Using percents or ems for units will ensure the font stays at an appropriate size for the monitor resolution. And you can write the icons into your HTML code without needing to reference an HTTP request to an image file.

The largest drawback is getting icons which look shiny, colorful, and utilize detailed graphic styles. Most icons will display just like a font, using one color and maybe some text effects. If this can work for parts of your website I’d highly recommend it. Otherwise you may need to split the difference using some real images along with some fonts.

If you’re looking for a nice font collection, start out browsing the directory We Love Icon Fonts. Many designers will host their files on Github but they won’t always appear in Google searches. You can use this tool for locating new icon fonts to include for your own projects.

Scalable Vector Graphics

Vectors are commonly built for logos and icons that need to scale for different resolutions. But these graphics don’t have support for displaying naturally in a web browser – until SVG was recently pushed through with tremendous support. These are simple vector graphics which define points of data in a key-value syntax.

The graphics themselves include data about how to display colors, curves, line segments, shadows, and other typical features. Older web browsers can’t support these graphics when the page renders, but you can include a script like SVGeezy to handle fallback methods.

Sitting down to design a full graphic will take some reading and most likely a vector design suite. If you’re not a skilled designer then try checking Google for open source freebies to download and play with. I would also very much recommend this primer to hacking SVGs for web developers.

CSS3 Retina BG Images

The two most common solutions for handling retina replacement graphics are through CSS3 media queries or JavaScript libraries. CSS3 is less supported in older browsers, while JavaScript can still be disabled by anyone. Either can work fine it just depends on your purpose and how you generally code websites.

Replacing the images with CSS3 follows the premise of media queries to check when a user is on a retina screen. Then we can replace the image through a background URL setting, which only displays for the retina user. Check out the code below found in this Sitepoint article.

#myimage {
  width: 400px;
  height: 300px;
  background: url('lo-res.jpg') 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
  #myimage {
    background-image: url('hi-res.jpg');
  }
}

Checking each screen device for the min-device-pixel-ratio value will always return something. Modern browsers supporting CSS3 will typically react quickly and it seems almost instantaneous to the visitor. And you will definitely want to take a peek at this article on vendor prefixes which states an opposing property name for min–moz-device-pixel-ratio in Mozilla Gecko browsers.

Media queries today are built around the newer CSS3 specifications. It’s very popular but still gaining traction among newer designers who haven’t tried out these techniques. Just keep yourself practicing and search through Stack Overflow whenever you run into code problems.

JavaScript Implementation

Not all browsers can support CSS3 effects, although most browsers on a retina display certainly would. But in any case I still recommend JavaScript solutions where appropriate. Smartphones and tablets come with JS support enabled by default.

I’d like to share two libraries which are definitely worth checking out. The first is called Foresight.js which detects if a device has the retina display or not. Then it will automatically pull the correct image based on your settings. Take a peek at some live demos along with source code examples.

The other library I’ve come to enjoy is Retina.js. It’s an open source jQuery plugin which performs many of the same tasks as Foresight. It will determine if the user’s display has retina properties or not, and then replace regular images with the @2x counterpart. It will only pull if there is a replica on the server, otherwise it leaves everything alone. A very small script and pretty simple to work with.

Further Reading

• Why should you become retina ready?
• Creating Retina Images for Your Website
• Implementing Retina-Ready Images on the Web
• Amazing Selections and Examples of Retina Ready Websites
• Retina HiDPI and your Webapp

Closing

I hope these tips can get you started on the path to building flexible retina-ready website layouts. Planning a design is the first step and using this knowledge can really expedite the process. How will the site look in a responsive style? It’s wise to plan out which techniques you need(if any) to handle average retina displays. If you have any questions or related suggestions feel free to share in the post discussion area.

The prepaid wireless market has been rejuvenated by Virgin for years. Their goal was to offer a solution for young adults or non-technical people who don’t want(or need) a monthly cell phone bill.

Virgin Mobile uses a minimalist design style which follows suit along with other tech companies. Lots of photos and product shots illustrate the items Virgin has to offer their customers. I’ll be delving into a brief overview of their website including layout, typography, patterns, and content organization.

Recognizable Header

Virgin Mobile and many other companies utilize their website header as a point of reference for all visitors. Once the page loads everyone gets a chance to see the header – this is a good reason to include as much pertinent information as possible in this small area of the screen.

Composition is slightly misaligned to draw attention through asymmetry. The Virgin Mobile logo hangs ever-so-slightly over the header bar with a crooked orientation. Since everything else aligns horizontally this rotation brings more attention to the logo & the company identity.

Also notice how the navigation text is slightly above normal size. It may not come off as “unnatural” but it certainly feels big & bold.

Nav links with a small triangle icon represent dropdown menus. When hovering over these links an internal dropdown box slides down from the top. This adds more content for user interaction without taking up major parts of the header.

But perhaps the most magnetic area of the header is the sliding photo carousel.

Each slide includes a photo with some extra details for customer info. You can switch between slides using the “1-4” numbered links in the lower-left corner. When you hover these buttons a little tooltip appears to explain each feature. Pretty darn nifty!

Fullscreen Backgrounds

Major pages in the side use full-width backgrounds that span the entirety of the screen. These are meant to draw attention and keep people focused on what’s new(deals, products, etc).

Although photos are a huge part of the operation, you’ll also find rendered photos and distinct extras with text & digital composites. The footer also includes a repeating pattern tile which blends nicely into the whole layout design.

Overall this fullscreen effect is meant to draw attention. It makes the Virgin Mobile site appear a lot bigger and wider, especially on large-screen monitors.

Since the website is fully responsive these fullscreen headers will automatically resize to fit into the appropriate browser window. Take this consideration with any fullscreen sections like on the cell plans page using the wide grey background.

Grid Layout for Products

On the Virgin Mobile homepage you’ll notice a distinct grid-style layout promoting individual products and/or services. These include special rates, new phones, and upcoming releases.

Many other pages on the Virgin website use this same design style to attract attention. In fact, many websites follow a similar grid system to organize their products according to rank.

The cell phone shop lists phones in a similar grid structure like you might expect in an e-commerce store.

Also the phone contract page organizes wider squares like rectangles. This creates an asymmetrical grid that remains balanced while giving prominence to certain features.

This grid design trend is perfect for almost any corporate layout because it appears organized and easy to read.

Sliding Interface Blocks

Everyone knows about parallax scrolling and how it affects modern web design. Single page layouts often incorporate parallax effects to create an easier browsing experience.

Virgin mobile uses a similar feature on their “why choose us” page. It has a fixed side navigation that animates down to individual sections. While browsing the layout each section will auto-hide the label until you hover.

It’s a rather ingenious design with the added benefit of a crisp user experience. The page serves as a representation of what Virgin Mobile can offer its customers.

Keeping all this information contained on one page makes browsing the site a heck of a lot easier. Consider this design for your own sites and study how Virgin makes this page easy to use yet futuristic and modern with parallax effects.

Tech Company UI

Every website is created differently with different goals in mind. It’s up to the designer to recognize the purpose of a website and how to pursue it accordingly. I hope this breakdown of Virgin Mobile gives a bit of insight into tech company design trends and how content for mobile communication companies are structured on the web.

Mobile is the dominant computing platform of this generation, but plenty of people still discover and download apps from traditional websites.

Since the launch of the app store, we’ve seen countless posts on the topic of landing page inspiration and optimization that commonly tout the obvious: showcase a benefit; establish a clear call to action; place a download button above the fold, etc.

In 2015, these patterns have solidified and continued to evolve. See some of the best designed app landing pages of the year below.

Operator(Single Non-Scrolling Page)

Operator is the best example of 2015’s big shift to non-scrolling landing pages.

It’s extremely difficult to introduce an app, articulate its value, and offer it for download on a single page while maintaining visual clarity. Operator does an incredible job of all three, with room to spare for header and footer links. A friendly emoji even welcomes visitors to the app’s waiting list.

Mylo(App Preview)

Previewing an app’s capabilities is an important feature of today’s landing pages, many of which integrate demonstration videos. Mylo has done the best job this year, implementing an auto-play feature along with a narrator (defaulted to mute), which clearly details the app’s value.

Following the splash, Mylo introduces visitors to its app, brand, and values with fashionable fullscreen photography, highlighting the company’s philosophy of simple living.

Swifty(Live App Demo)

Swifty takes in-app demonstrations to another level this year with a live demo that encourages users to test the app on their landing page.

If you interact with the demo, you receive your first one minute lesson, followed by another trend that has emerged this year: the replacement of “Download on the App Store” with “Get the App”, mirroring the App Store’s recent shift in language.

Facebook Moments(Video)

Explainer videos are nothing new on landing pages, but the production value of the Moments video, and its completely seamless integration into the browser, certainly is.

The player is completely embedded into the browser, and the video’s first screen matches the landing page, which enables the Moments site to transition seamlessly from browser to video. The video is clear, well animated, and unique, explaining the value of the app while barely showcasing it.

Facebook Messenger(Cross Platform)

Increasingly, mobile apps are becoming more than just mobile apps: they’re becoming single pieces of a cross-platform strategy that encourages users to connect on any device with transferable data and a consistent experience.

In addition to showcasing their ubiquity across phones, Messenger includes a laptop view of the app in the background, making it clear that Messenger is a cross-platform app that can be used anywhere. Add an integration that retains your Facebook login and greets you by name rather than asking you to Sign In (not pictured above) and you’ve got a messaging app that feels like it will follow you anywhere.

Trippeo(Rich Media)

With their compelling single page narrative following a users app experience, Trippeo is 2015’s best landing page for interactive design, rich media integration, and digital advertising.

The site is well realized with a smooth, animated flow, a subtle (but effective) use of video, and a clear value proposition told through a simple story. It’s questionable, however, if sites like this convert. Either way, it’s a pleasure to browse through.

Kong

Kong’s page ignores conventional landing page wisdom (especially for apps), but still manages to create a compelling, albeit mysterious splash that encourages visitors to explore the app in depth.

Periscope

Periscope’s user experience focuses almost exclusively on its live-view screen, and this is demonstrated perfectly on their landing page. From the video of the hot air balloons to the tagline: “Explore the World Through Someone Else’s Eyes”, the value of the app is easy to understand and definitely encourages a download.

Stripe

Stripe does an excellent job of building trust with potential customers through a few subtle touches: a cleanly animated walk-through; the use of tablets and phones to demonstrate app capabilities; and a trustworthy blue palette that suggests your finances and personal information will be handled carefully.

Black

What else would you expect from a film emulator app? Giant, striking photography, black and white imagery, and contemporary web design position Black as the artsy alternative to Instagram and a throng of other photo filter apps on the market.

NeuBible

NeuBible has all of the bases covered: a striking hero shot, clear messaging, and a prominent download button. Combined with a gorgeously realized app, these three features may help NeuBible convert the masses.

Filters

A large, eye-catching icon gets prime real estate on Filters’ landing page, a clear indicator that the visitor is perusing an application page. The splash also features a subtle mosaic of Filters’ capabilities. Everything one needs to know about the app is communicated in a single page and a single sentence.

Todoist

Todoist is a cross-platform application, which means things can get complicated. Fortunately, this well-constructed landing page frames Todoist with a clear value proposition and some clever button copy. Visitors can take a dive deep if they like – the features of each platform are neatly organized with a series of buttons along the footer of the splash.

Faces

Faces makes use of some simple but effective scrolling techniques to compliment its clear and concise copy. Users scroll through a three step application demo while sampling a few of Faces’ caricature options. As effortless as an demo gets!

GameIt

GameIt is a fun landing page with a splashy aesthetic and smooth flash animation. Visitors scroll through a series of app screen demos that might feel like an information overload in lesser hands. However, GameIt’s smooth animation and sharp copy are easily digested.

Qapital

Qapital is notable in that it takes a visual approach to a market that is usually appealed to with practical messaging and conservative imagery. Large images dominate the splash page to reflect the app’s interface. Qapital does an excellent job making finance feel exciting: a very tall task.

Docady

In tandem with a full page splash video, a prominent preview button does the heavy lifting on Docady’s landing page. A wonderfully animated app preview is also put to good use. Simplicity may not be their forte, but Docady has a host of bells and whistles at their disposal.

Rizon

Rizon is an exercise in clean design and clear messaging. In a nice touch, Rizon’s logo mirrors the app’s main screen, which lets the user know what hour the best photos are taken (“The Golden Hour”). Visitors are prompted to sign up through a centrally located button and a straightforward preview of the application.

Peeq

Prefer not to read? Peeq’s landing page is for you. A 6 second visit is all you need to understand Peeq’s 6 second approach to social media. Enough said?

Urban Walks

Urban Walks is billed as “A Better Way to Explore NYC.” If that’s not true, it’s a pity, because their landing page is a master class in rich media. Visitors are encouraged to scroll through a host of Urban Walk’s functions, and I encourage you to do so, whether you’re planning to visit NYC or not.

QuizUp

QuizUp, the successful trivia game turned social media app, has a single page experience that makes use of 3D imagery, concise messaging and clearly labelled buttons. QuizUp is a confidently designed page that places their app demo and CTA front and center.

Did I miss any great landing pages? Feel free to share in the post comments below.

Author Bio: Daniel Eckler is the founder of Mylo, the simplest way for men to dress well. You can find him on Twitter @mylo_daniel or read more about him on his personal website.