• Read more about temp

h1 title

h2 title

h3 title

h4 title

• Read more about Replicate Bootstrap 3 Grid Using CSS Grid

Replicate Bootstrap 3 Grid Using CSS Grid

The past few years have seen a wide variety of methods for creating web page layouts. CSS Grid is one of the newest and most game-changing tools at our disposal. If you haven’t started tinkering with it yet, now is the time. It is a wildly different way of thinking about positioning content, and it currently has nearly full support across all common web browsers.

In order to replicate the majority of the features of the Bootstrap 3 grid system, we only require a small portion of the features that CSS Grid has to offer.

The key concept introduced in the Bootstrap 3 grid system which we will be replicating is the ability to explicitly define a grid container’s proportions for each responsive breakpoint. In comparison, Bootstrap 2 only defined the proportions for desktop, and any viewport smaller than 767px would render all grid items at full width, stacked vertically, in a single column.

1. Define our class names similar to those used in Bootstrap 3.

.row for a grid container

.col-[screenSize]-[numColumns] for a grid item where [screenSize] is one of our size abbreviations (xs,sm,md,lg,xl) and [numColumns] is a number from 1 to 12.

To use the CSS Grid, we simply apply display: grid; to our row class

.row {
  display: grid;
}

2. Define the number of columns in our grid and the size of the gutters (the space between items/columns).

Bootstrap uses 12 columns with 15px gutters.

.row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 15px;
}

repeat(12, 1fr) is a shorthand for “1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr” where ‘fr’ is a fractional unit. Setting all 12 of our columns to 1fr means they will all be the same width. By changing these values, we could easily create a grid with a different number of columns or with columns of varying widths.

3. Define the grid items that will go into it.

To do so we need only set the grid-column-end property for each variation of the grid item. Setting it to a value of ‘span 1’ would make the item one column wide. ‘Span 6’ would make it 6 columns wide, half of our 12 column grid.

There is much more that we could achieve with this property or with similar properties and shorthands for these properties. I encourage you to explore the possibilities and understand that we are only scratching the surface in this demo. https://css-tricks.com/snippets/css/complete-guide-grid/

4. Fill out all the different span sizes at all the different breakpoints.

This is the most complex task we have to  The pattern is as follows:

@media (min-width: 0) {
  .col-xs-1 {
    grid-column-end: span 1;
  }
  .col-xs-2 {
    grid-column-end: span 2;
  }
  .col-xs-3 {
    grid-column-end: span 3;
  }
  // ...up to .col-sm-12
}
@media (min-width: 768px) {
  .col-sm-1 {
    grid-column-end: span 1;
  }
  .col-sm-2 {
    grid-column-end: span 2;
  }
  .col-sm-3 {
    grid-column-end: span 3;
  }
  //...up to .col-sm-12
}

...repeat for ‘md’ at 992px and ‘lg’ at 1200px

5. Build the pattern with a nested loop in Sass (once we understand the pattern) like so:

// Loop through responsive breakpoints
@each $size, $abbr in (0,xs),(768px,sm),(992px,md),(1200px,lg){
  @media (min-width: $size){
    // Loop through col classes
    @for $i from 1 through 12{
      .col-#{$abbr}-#{$i}{
        grid-column-end: span $i;
      }
    }
  }
}

6. Set a full width default for situations where the width is not defined.

For example, a grid item with the classes “col-md-4, col-sm-6” does not have a width defined when the viewport is smaller than 768px (the sm breakpoint).

However, it is defined for viewports larger than 992px (the md breakpoint) because the media query will continue applying the width for all viewports wider than 992px unless it is overridden by defining the lg width.

Rather than requiring devs to assign xs width for every item, we can safely make it full width as a default that the user can override if they choose to.

[class^=col-]{
  grid-column-end: span 12;
}

This style rule will apply to any element with a class that begins with “col-” and set a 12 column width. The rule will be placed above our nested loop to ensure that the other grid styles override it.

See it in action. (Open in Codepen and change the viewer size)

[codepen_embed height="265" theme_id="dark" slug_hash="MpxQmW" default_tab="css,result" user="mobomo"]See the Pen Bootstrap 3 Grid with CSS Grid by Mobomo LLC (@mobomo) on CodePen.[/codepen_embed]

 

This implementation has several advantages over Bootstrap 3’s grid:

• Read more about The Future Of User Interfaces

Interfaces are intrinsic to technology 

Each piece of technology that is used by a user has an interface. Computers date back from the first half of 20th century, their physical appearance… well let’s just say, we have come a long way with the look.  Nevertheless, those big pieces of machinery were designed for users to operate them. The user physically had to get their hands on the hardware of the machine to operate.

Technology is constantly changing

Companies like Apple and Samsung are bringing new devices to the market with capacity and intelligence that definitively surpasses all of NASA’s computing power 50 years ago. This level of sophistication begins to explain the user experience, being further from the manual tweaking or direct manipulation of the technology itself. The user experience was the connector or rather the middleman between the user and the physical machine. The user needed to find value in the user experience in order to satisfy the purpose the user had in using the machine in the first place.  If we extrapolate this idea, we can predict the next trend should be about reducing physical stress from the user interaction. This notion has already been seen with each iteration of smartphones-  with the transition towards chamfered edges, bluelight/night screen filters, and each generation becoming a little more ‘wireless’ (whether it be wireless charging or wireless earbuds).

The hypothetical extreme of this will be not having to physically move your body but instead just thinking of the action that is needed, resulting in a response from the machine (creepy sci-fi, right?). Ergonomics is playing a much more prominent role now that technology has reached the point of where it is at today. Comfort and reliability are key aspects that allow the general public to reach and utilize these interfaces on a daily basis.

Voice Technology 

At one time, speech recognition was a concept that seemed like something of the distant future, machine speech recognition has now made its way to be the reality. Most smartphones and online chatbots allow for full-fledged conversations in various languages. Consistent upgrades and machines are being pushed out to implement this field and technology into the home as “Amazon’s Alexa” and “Google Home”. Of course, it is still not perfect and its application as a user interface tool is in its infancy but the technology has already pushed past many fundamental checkpoints. As a result, the artificial intelligence behind it has outperformed.

Bridging the Gap

Besides this race towards smoothness and fluidity, there is also the issue of merging with the environment. Many of the current interface prototypes are intending to bridge the gap between flat, two-dimensional screens and our 3D space. For example, we already know about augmented reality - having some form of visualization tool overlaying graphical elements and information over real world objects (be it a phone screen using the camera, a VR helmet, or special glasses). Yet developers are also leaning towards a more immersive augmented reality, whether that means aligning alongside virtual reality or somehow bridging the two to find a middle ground. Virtual reality has also began to make its mark in the market with larger companies such as HTC, Google, and Samsung paving the way with their higher end VR headsets and constantly updated software for it. Virtual reality’s claim for computer simulated, three-dimensional environments is a clear step into the more immersive and interactive interface space.

The real challenge designers and engineers are facing is to make 3D space be the interface. Ideas and prototypes of kinect-like applications, where items are accessed and arranged back and forth through air gestures are in development. The actual ‘things’ being manipulated are graphical elements projected either to or from a flat surface. There is certainly the ability to ‘read’ or track gestures in space but creating digital imagery that appears in that space as if it were an organic entity is not here...yet. However, prototypes where physical objects are manipulated around space in order to interact with technology are being developed.

There is another possible route ahead for the future of interfaces related to biotechnology, or the implant of synthetic materials/technology into the body. Research is advancing in this field, mainly for repairing body functions, leveling body chemistry, and gathering information. At the moment, common products in this area consist of synthetic body parts. Interfaces have become integral in our daily lives, ranging from the slabs of glass in our pockets we call cell phones to screens in our cars that help us navigate- there is no chance of backtracking to a simpler time without them.

So now it is time to think of a future where these goals are met and we can trigger events with our body so that we can feel and see things beyond our natural perception.

• Read more about Mobomo Named To Washington Technology Fast 50

The 2017 list has been released

Each year, Washington Technology ranks the fastest growing small businesses in the government market. The rankings are determined by the annual growth rate based on five years of federal customer revenue. This year, Mobomo made the list!

Mobomo has successfully led federal agencies and government entities such as NASA, USGS, and NOAA NMFS to effective platforms that has saved the federal government millions of dollars. We have prime contracts at agencies including USGS, NOAA, and GSA and hold subcontracts at NASA, VA, and Department of State.

For NASA, our team the continues to operate, maintain, and development www.nasa.gov and science.nasa.gov. www.nasa.gov just broke the record of website visitors with more than a million simultaneous users on the site during the August 2017 solar eclipse. science.nasa.gov was developed in both English and Spanish for the Science Mission Directorate (SMD). Mobomo drove the development team, oversaw the training of SMD staff, and ensured the the goals of mission directorate were achieved: increasing the ease of public access and volume of public access to NASA material. Both nasa.gov and science.nasa.gov are actively running in AWS as true scalable, native cloud offerings. Our design at NASA.gov has won the Webby Award in 2014, 2016, and 2017.

Our federal team also oversaw the digital transformation of the USGS agency web site, a responsively designed site that provides access to over 300 USGS component programs. Our team directed the successful launch of the responsive redesign of the USGS Store map purchasing web property, featuring integration with a SAP inventory management and billing system. Analytics show that traffic to the post- launched USGS Store has spiked in July, going from 60,000 page views to peak 600,000+ page views a day, with increased Store purchase volume going from 900 to 9800 at peak, averaging an 8x increase in traffic and a 5.5x increase in sales across the month. The USGS agency site runs in AWS, while the Store offering will be migrating to the cloud from USGS data centers over the next quarter.

Mobomo is working with the NOAA National Marine Fisheries Service on a multi-year consolidation of 17 web properties across 5 regions, 7 science centers, and 5 headquarters based programs. Built on a FedRAMP accredited PAAS service, the consolidated web property will be publicly launched in September 2017. The site has been constructed to support the ongoing migration of the first 7 of the 17 web properties representing 10 of thousands of pages and documents.

Finally, at GSA, Mobomo supported the teams operating, maintaining, and developing usa.gov, sites.usa.gov, and challenge.gov.

Congratulations to all of this years Fast 50 - be sure to see the full list!

• Read more about The History of the Web: The Evolving Role of the Designer

Did you know the first website was created only 27 years ago? We tend to forget how young the internet actually is - it has made tremendous advancements since the first website was launched. We are now living in an age where websites have to be responsive, dynamic, and user-centric, all these things we will continue to see enhancements as the years go on.

Let’s walk through the history of the website designer and the evolution of the role, shedding some insight into what led to the death of the web designer and how specialist dominated the industry.

When Webmasters Ruled the Web (1991-1997)

The first website went live on August 6, 1991 - while very few had access to the internet it opened a new world of possibilities. In the mid-90’s, only 30-70 million had access compared to today's 3.1 billion.

At the time, web design did not even exist because a website consisted of just text and links. Webmasters (aka the developers of those days) dominated this new world wide web since graphics were limited. A web designer was not a common position that you would see on someone’s staff and “digital design” was more often associated with software. Moveover, design tools like Adobe Photoshop 2.0 were on the rise to popularity and Macromedia Flash didn’t appear until 1996. It wasn’t until 1998 when the design industry began to see its golden era.

Freedom of Design (1998-2004)

The internet became more accessible to the public in the late 90’s as 100 million new users started using the internet each year. Everyone wanted to carve out their own space on this strange new medium known as the ‘web’. Site builders like Geocities, Tripod, Angel fire were some of the first in the market to create basic website templates, anyone who wanted to create a website could - no designer or developer needed. During this timeframe, the amount of websites grew 438%, as websites were created and launched - more and more users flooded to the internet, supporting the correlation of website growth meant more internet users.

From kids to adults, everyone at the time seemed to be a webmaster and a designer. The web started to become a visual medium as images, music, animations started to scatter the internet. Macromedia Flash grew in popularity giving designers the freedom to be truly original on the web. No longer were the days that website designers were limited to table base layouts, more creative freedom was finally insight.

It was common to see agencies such as 2Advanced who solely focused on web design- they were able to gain an early footprint in this unknown market. At this point, graphic designers were listing web design as one of their many abilities. However, the largest limitation during this era was the fact that dynamic content did not yet exist. It wasn’t until the creation of PHP and MySql to mark a new era of the Web 2.0 and how we would start building and designing a website.

The Rise of the PSD Templates (2004-2007)

The turning point of modern web design was the introduction of server-side scripting and database management. This gave the perfect entryway to content management systems like Wordpress, Joomla, Drupal, and Brogger. It was apparent at the time the industry needed talent who understood the ‘new’ web, this was a defining point because web design started to become a stand alone profession.

Through the mid 2000’s the web as a whole was moving to an organized standardization. As this standardization was becoming known, designers had a new role which was to create template based layouts for dynamic content. By implementing this new role, this shifted the design process from building unique static pages to creating uniformed dynamic templates with CSS. Adobe Photoshop finally became the dominate design tool after Adobe purchased Macromedia. Google Analytics made its introduction in 2005 to better monitor site traffic and behavior.

Even though designers had new responsibilities within their roles - web design best practices didn’t really exist even though the web was becoming more advanced. The web was full of images of fonts, shadows, and large textures. CSS did not exist - there were no shadows, web fonts, and gradients until 2010. Flash still made up 25% of all sites on the web until its fall in 2013.

No one really knew what the future of the web would be especially as mobile and tablets were advancing, it was clear that designing and building for the web would be difficult because of the different screen sizes that would start to evolve in the coming years.  

On January 9, 2007, Steve Jobs announced the launch of the iPhone which would turn the world upside down. From that point on, web design was no longer seen as a single device solution. At the time, the web was built for users to access via desktop which was a problem because the iPhone had launched -- this was the point where everyone needed to rethink how to design and develop for not just desktop but for mobile as well.

Designers had to start thinking outside of their monitors. Fluid grid systems such as 960.gs provided an organizational structure that didn’t really exist in designs in the past. Other solutions aside from the fluid grid systems were created to build a dedicated mobile site separate from the desktop. It wasn’t until 2008 when the concept of responsive design started to surface. Even though this term was starting to become a “buzz” word, it didn’t become a dominant solution until 2010 because of CSS3 advancements with breakpoints, webfonts, and mobile browsers. Moreover, with the introduction of the iPad there was proof that there was need for an adaptive solution.

All of these advances helped to pave the way for the beginning of UI frameworks, like Bootstrap, in 2011. A new design strategy of focusing on mobile first emerged, prioritizing mobile context when creating user experiences and then working up to desktop layouts. A new Adobe competitor was released in 2010 called Sketch; that’s when a lot of UX startup services began to appear. The terms ‘user experience’ and ‘user interfaces’ were soon re-introduced into our vocabulary in 2009.

As a result of these new programs and terms coming back to light, this is when the designer who had specialization started to become relevant replacing the general profession of web design.

In 2011, everyone seemed to have a website but just having a website was no longer good enough. The focus began to shift from “mobile first” to prioritizing the user first in the overall design strategy. By prioritizing the user, this opened up more responsibilities in the role of web design - it was now the ‘user experience designer.’

The ‘user experience designer’ was certainly a known position in software design but it has slowly become an essential part of web design. As a result of user experience designers being thrown in the mix, new processes of wireframing, user personas, user research, information architecture, and prototyping were added when building a site. All this placed more focus on strategy than aesthetics, which created a need for new talent/role. Better design tools emerged like Invision, Optional Workshop, and UserTesting.com, providing designers with the right tools to test and create a better more usable web.

In 2012, a designer named Brad Frost helped rethink the design process by introducing the concept of Atomic Design. No longer is design seen as templates locked into a PSD, but rather it’s made up of similar elements that build modules compared to just simple pages. User interface designers no longer have to color in wireframes but are able to build pattern libraries of elements that make up the wireframes. Matched with the popularity of agile methodology, websites were no longer seen as a static solution which makes the web not only user friendly, but even more standardized and efficient.

The Next Era of Web Designers

Web design will continue to specialize as time goes on especially as new technologies and thinking evolves - designers will need to be agile in order to adapt these challenges. Designers will not be lumped into one broad job title, as specializations are made known designers will be able to blend across many job roles that may have different specifications. A designer's role is no longer building out photoshop templates, we are living in an era that needs constant continuation in order to stay up-to-date. These are the elements that help create a better, more friendly web.

• Read more about NASA And Partners Exceed Eclipse Viewing Expectations

On a day where millions experienced a once in a lifetime total solar eclipse, NASA’s tireless efforts to provide the public with a seamless livestreaming experience of eclipse feeds from across the country resulted in one of the largest web-based events in U.S. government history. NASA’s coverage of the eclipse was a home run in the IT world and is a testament to the Agency’s commitment to technological excellence in everything they do in support of both their scientific endeavors and their duty to share their experiences with the world, showing that IT collaboration and partnership in the federal government is not only possible but wildly successful.

On Monday, Aug. 21, NASA surpassed expectations, streaming 18 live feeds from across the country, including high altitude balloon feeds, telescope views and shots from various aircraft situated along the path of totality from Oregon to South Carolina. Just as impressive as the content being served was the amount of web traffic NASA.gov received, recording over 30 million visitors over its 6 hours of coverage, resulting in over 80 million page views and at peak levels, sustained over 1.5 million concurrent users – all of which are record-shattering statistics for the Agency. Visitors to the site stayed an average of 3 minutes per session.

Livestreaming is no easy feat

An architecture supporting millions who are livestreaming is even harder. Not being able to accurately guess or predict just how many viewers would tune in and then planning for an architecture to support an unknown amount is daunting.

“We were in uncharted territory. We predicted that this would be our most watched event, but we didn’t really know to what level,” Nagaraja said. “Mobomo had the arduous task of testing [the site] to the limits that they possibly could and then being able to build something that could scale to the level above that depending on what happened on eclipse day.”

Crucial to the success of the eclipse coverage was ensuring that NASA.gov sustained high-performance levels while millions of users visited the website, which required significant planning and collaboration between NASA and members of the WESTPrime contract team, who manage both application development and the backend cloud-based infrastructure.

Mobomo, a Vienna-based software development company, serves on the WESTPrime team as a subcontractor to InfoZen and provides core web-developers that manage development efforts for NASA.gov and were tasked with constructing the eclipse live webpage.

“Providing this unprecedented access to the public required a sophisticated cloud infrastructure along with multiple backup plans and redundancies. This allowed NASA to rapidly scale delivery in proportion to viewership and segregate their live streams of the eclipse while incorporating autoscaling caches and other services to accommodate intense public interest,” said Sandeep Shilawat, Cloud Program Manager, InfoZen.

In addition to developing the main eclipselive page and an interactive solar eclipse map tracker, which allowed users to view the real-time progression of the eclipse across the continent, we were also tasked with stress-testing the website and its backend infrastructure to ensure it would perform at a high level under significant increases in user traffic. It was impossible to know just how many users would tune in to watch the event which made it very difficult to test.

Mobomo was responsible for building the back end of the web page and created the interactive graphic that tracked the eclipse in real time which enabled people to find the best viewing time for their geographic location. The biggest unknown was user testing. We were able to bring on a consultant to run a stress test on the site and simulate millions of people using the site at once. At the same time the consultant ran the test, Mobomo team had a few people head to the site to see how it felt. He didn’t tell them that at that very moment about over a million users were also on the site doing the same thing.

Huge win for Federal IT

NASA is the only known federal agency to use the cloud for such a large viewing event. The cloud was optimal in this case because of its elastic scalability and due to the amount of unknown users - we didn't have to change the infrastructure because its elastic and can scale automatically. Another advantage of the cloud in this case was the fact that we didn't have hardware to coordinate and manage - which ultimately results in cost savings. Pre- cloud, an agency would have to purchase hardware, software and services.

Overall impact?

An event such as the eclipse is ideally suited for the cloud, provides a pay-for-what-you-use model, and makes the scaling of infrastructure cost effective for federal agencies. NASA has set the bar for other agencies to follow when a mission requires reach and scale for citizen engagement.

• Read more about Three Software Companies in DMV Area Named to Inc.5000 Fastest Growing Companies 5 Years in a Row

Mobomo, a leading software company was recently named to the Inc. 5000 fastest growing companies for the fifth consecutive year. They are one of three software companies in the DMV area to be on the list five years in a row; nationally, due to rigorous requirements, only 7% of companies make the list five years running. Mobomo offers premier, mobile-first web and mobile application design and engineering to federal agencies and commercial enterprises.  

Since 1982, Inc. has scoured the U.S. to find the fastest-growing private companies for their annual Inc. 5000 list. In order to be considered for this prestigious list businesses must meet certain requirements, one being exemplifying a certain percentage of growth year over year. Alumni include industry giants such as Microsoft (1984 and 1985), Under Armour (2003), and GoPro (2014). Mobomo is 1 out of 23 companies making the list across all industries in the DMV area five years in a row and were ranked #1878 in the 2017 list.

Over the past five years, Mobomo has expanded presence in the federal sector by being named to three primary (USGS, NOAA, GSA) and many sub-primary (NASA, VA, Department of State) contracts. They have helped federal agencies and government entities such as NASA, USGS, and NOAA, NMFS to effective, cost saving platforms that has saved the federal government millions of dollars.

Commercially, Mobomo has worked with clients such as the USO, Gallup, The World Bank, Bozzuto and more to overcome technical challenges and revitalize large digital platforms. Serving clients inside and outside of the beltway, Mobomo works to change technology and ultimately save the government and commercial enterprises time and money by automating processes to better allocate resources for repetitive tasks. 

“Being named to the Inc. 5000 for the fifth year in a row would not have been possible without the leadership and entrepreneurial guidance Barg Upender (Mobomo Founder) and Ken Fang (Mobomo President). Over the course of the five years both Barg and Ken have held different roles in growing the company and have been very successful in the federal and commercial sector. Having an ownership team that has been collaborative and engaged has given us an edge, we are lucky to have them,” says Brian Lacey, CEO of Mobomo.”

 

• Read more about How Should You Prepare For The iOS 11 Update?

Apple announced they will be releasing the iOS 11 this fall but what do the enhancements to iOS 11 mean for your app that is currently in the marketplace? Here are a few reasons why you should consider upgrading your app to prepare for the iOS 11 launch.

All of these new features that iOS 11 are rolling out could affect how your app is housed in the App Store. Get in touch and we will do a free analysis on your current app and let you know of any incompatibility issues. Whether you are interested in creating a new app, wanting to enhance a current app, or just a compatibility test, we have gathered some highlights as to why it would be a good idea to update your current app in preparation for iOS 11.

This is not the first time that Apple has made changes that affect apps in the App Store. In September of 2016, Apple released an App Store guideline which encouraged app owners to become compliant with those guidelines or Apple would delete the app from the App Store. There is without a doubt more and more difficulties standing out in the App Store. How will iOS 11 change that?

First, 32 bit will be turned off and any app that is 32 bit will no longer be accessible in the App Store. According to sources, any app that runs in 32 bit will no longer be supported by Apple. Developers will need to update their app to 64 bit in order to remain in the App Store. Apple has already told developers that macOS High Sierra would be the final version on the Mac to support 32 bit apps.

New iOS App Store: 

• App Ratings: Now when asking users to request app ratings, developers must now use Apple’s official API instead of integrating their own custom prompts. The new Apple rating message lets users choose 1-5 stars then exits the prompt, all without leaving their current app. The simple message, however, has a drawback; this rating prompt can only be alerted three times a year.

 

 

• Read more about AMP - Accelerated Mobile Pages

We receive questions frequently about AMP. Most people have heard about it but what is it exactly? Others are wondering why all of a sudden do we need AMP? We answered all these questions and more, let us know what you think about AMP!

What is AMP?

AMP is a new term you may have recently heard, but what is it exactly? AMP stands for Accelerated Mobile Pages, a project from Google and Twitter designed to make really fast mobile pages. It consists of HTML, Javascript, and cache libraries that, thanks to specific extensions and AMP-focused properties, accelerate load speed for mobile pages, even if they feature ‘heavy’ content like infographics, PDFs, audio or video files.

Why do we need fast mobile pages? Who cares?

In a mobile first world, quick mobile web pages are vital for audience retention. We need fast websites to effectively reach and engage the ever-growing mobile market. No one wants to wait for a webpage to load 7+ seconds with cluttering ads blocking the information that they want. Users effectively “give up” on slower websites (they do not wait for slow websites to get fast, they click on a better site). Creating fast, well-organized websites require constant updates from synergistic development teams. AMP was created to answer the slow-website problem--making sites more robust.

What does AMP do?

In simpler terms, when users search for news or any general search term, Google will display a ‘carousel’ highlighting stories from AMP-enabled websites at the top of search results. AMP creates straightforward, easy to manage web pages and ads that are built in the open source format, load instantly, and give users a smooth, more engaging experience on mobile and desktop. Moreover, AMP gets rid of certain elements that take a substantial toll on your website’s speed and performance. In addition to benefitting the user, AMP also benefits the web developers using AMP technology. AMP can reduce the load on a server and improve performance against the traffic that is generated by mobile users. Mobile ranking can also be improved with AMP. “Mobile friendliness” and load times are key factors for organic mobile search results and so by utilizing AMP, your site can move higher on the search results ladder.

Facebook has already been utilizing AMP for their “Instant Articles”. Instead of loading a webpage in a browser instance, the Facebook app loads an Instant Article, distinguished by a lightning bolt icon, from their cache. Google AMP makes content more widely accessible and helps level the playing field for websites publishing articles. Subsequently, AMP can help promote the relevance of a wider range of articles in your Google search results.

How do I try AMP?

When an article or webpage has an AMP version available, it will display a small lightning bolt under the search result. Clicking on the AMP link loads a stripped-down, faster version of the article. More often than not, the webpage will be delivered directly from Google's own caching servers.

How does AMP work?

AMP pages use a smaller set of HTML, so the look and feel can be a little different than you’re used to. For example, Forms, are not a part of the AMP-HTML features and most Javascript is restricted, so there is no overload. You never have to leave the app to see the article because the results are generated from Google’s own server. The webpage looks like your site, but behind the scenes, the user is still on Google, which changes the game a bit, since before your site had to have the bandwidth to support those users. An alternate version of each page is required to start using AMP. If you are using a CMS like WordPress or Drupal, there are several plugins and modules that can help perform most of the repetitive tasks. If you are not using one of those, then, Google’s documentation is a good place to start.

And What About Ads?

Most JavaScript is forbidden on AMP markup, but there are ways to allow publishers to include ads and analytics on AMP generated pages. Third party scripts can also be used, as long as they are AMP enabled. Ads on AMP pages are intended to be non-intrusive causing no trade offs for revenue. AMP also supports paywalls and subscriptions. Twitter, Instagram and Facebook have developed AMP specific libraries for this purpose. Google has a list of available components to help with subscriptions as well.

Biggest takeaways of AMP?

AMPs were developed to favor readability and speed. AMP images are lazy loaded, meaning that they won’t load unless scrolled into view. Ads displace content, rather than popping up and blocking your view. AMPs style rulings ensure that animations can be GPU-accelerated. Mobile friendly sites already rank higher than regular sites do when using a mobile search, and while mobile SEO does not account for AMP pages at the moment, it is probable that they will be taking top ranks for future searches. All in all, speed is key when trying to reach your audience and keep them on your site. With AMP, users get the fastest experience possible.

We have covered some of the basic but be sure to check out Wired, Moz and AMP Project for more information about AMP!

 

• Read more about 10 Photoshop Shortcuts for UI/UX Design

Our work as designers is filled with many repetitive tasks that can become time consuming, we have talked about ways to Automate Photoshop to Improve your Workflow, and Design Etiquette - all of these things help make our lives a little easier.  Now lets talk through some ways you can improve your UX/UI workflow in Photoshop by implementing some of the standard keyboard shortcuts the program offers, how to edit them and create your own shortcuts. Which will save you time! Who doesn’t want to save time?

Create new layer behind selected layer

• MAC: CMD+New Layer icon
• WINDOWS: CTRL+New Layer Icon

New layer via copy

• MAC: CMD+J
• WINDOWS: CTRL+J

Create new layers from existing ones. You can copy text, images, even folders with these shortcuts. Need to re-use the card you already designed? Just copy it!

Bring layer forward

• MAC: CMD+]
• WINDOWS: CTRL+]

For those times when you need to rearrange the order of your layers - forget the mouse and use the keyboard instead.

Send layer back

• MAC: CMD+[
• WINDOWS: CTRL+[

Pro Tip: Create a shortcut for renaming layers (In my case I use CMD+Shift+R) this is an easy and quick way to copy/paste/rename a layer name. Also, if you press ‘tab’ while the rename layer is active it will cycle through your layers with the name that is highlighted and it will be ready to be edited or you can press (shift+tab to go in a different direction).

Deselect the entire image

• MAC: CMD+D
• WINDOWS: CTRL+D

Reselect

• MAC: CMD+Shift+D
• WINDOWS: CTRL+Shift+D

We recently found this shortcut and it is really useful for when you click away from the selection and you need to re-do it.

Invert selection

• MAC: CMD+Shift+I
• WINDOWS: CTRL+Shift+I

Select all layers

• MAC: CMD+Opt+A
• WINDOWS: CTRL+Alt+A

Need to select all your layers to create a new group? Here’s your solution! Tip: Did you know you can collapse all your groups from the layer Menu?

Deselect from the selection area

• MAC: Opt+drag
• WINDOWS: Alt+drag

Increase/decrease size of selected text by 2pts

• MAC: CMD+Shift+>/<
• WINDOWS: CTRL+Shift+>/<

Align text left/center/right

• MAC: CMD+Shift+L/C/R
• WINDOWS: CTRL+Shift+L/C/R

Not convinced about the shortcuts Photoshop offers? You can customize them yourself, go to the application menu, under ‘Edit’, you’ll see “Keyboard Shortcuts” or just press Alt+Shift+CMD +K or Alt+Shift+Ctrl +K

In this window you’ll see all the different shortcuts that photoshop has to offer, there are many you won’t need as often when working as a UI/UX designer, so you can take advantage of this and create your own shortcuts for the tools you do use for example, copy/paste/clear layer styles; save them as a set to keep a copy and, if you want, share it with your team!

You can set shortcuts for the application menus, the panels (How about giving that ‘Collapse All Groups’ feature a shortcut?) and of course, tools. Tip: See that Menu tab? Here you can define special settings to the menu, assign a color to different menu options, even hide the ones you never use!

Did you know you can create a shortcut to align elements to the left/right/center/middle? There’s also another way to create your own shortcuts for repetitive tasks, through actions! We have talked a little bit about how to do so in our post Automate Photoshop to Improve your Workflow  be sure to check it out!