Web Design Standards Part II: Developer Focus

Web Design Standards Part II: Developer Focus


>>Giving an overview of the project. The
front end design of the system what And how you can use and contribute to improving these
tools. A couple things before we get started. Many of you submitted questions when you registered.
I will focus on this today. But if you think of something else throughout today’s presentation
please have your your question in the chat box. We are recording today session and we
will send a link. I will go ahead and pass it over to [ Indiscernible ]. Hello everybody. I’m very excited to be here
to talk about everything about development within the US web design standards. Go ahead
and [ Indiscernible ] we will go ahead and start. This is a develop focused introduction
to the US web design standards. I am Maja and I am a designer and developer. IMAT Marco — I just want to say that this is [ Indiscernible
] from designers to user experience designers researchers and we had a lot of advisement
and help from people working at CF PB Veterans Affairs, Department of Education, USA.gov
and many others. Wherever — we are very grateful to have a huge cross — of effort. We will
do a brief introduction to the project as a whole. Then we are going to dive deep into
the design of the system and we are good to talk about all Brenton practices and how and
why [ Indiscernible ]. Then we will help you work how to get started. We will talk about
what’s next and how you can get involved and help out and finally we will do a Q&A for
the last portion of the presentation. You can type your message into the box and it
will go privately. What are the US website standards? You might
have seen a lot of style guides and pattern libraries and design systems come up recently,
the US web design standards is the [ Indiscernible ] a visual style guide specifically for you
on US federal government websites. Each of the features is accessible, mobile responsive
and modular. The standards include interactive examples of each [ Indiscernible ] component
the code on which the component is built and documentation about implementing each component.
Why did we create the design standards? Here is a brief look at a few of Here is a brief
[email protected] websites and you can see there are a lot of variance and how we are represented
and designed. [ Indiscernible ] great design and architecture coming up as well. As a whole,
[ Indiscernible ]. That was one reason for wanting to create this. Taken a closer look,
here’s a sampling of a few buttons. Taken from various websites — government websites.
There is a lot of variation. Is a straight edge or rounded butter rate — border radius.
In order to create a better user experience for the American people across the government,
we wanted to build a standard design that could be easily deployed to any government
Representative — website. We wanted to bring consistency to digital services across agencies.
We wanted to reduce the amount of time [ Indiscernible ]. Every time have to create it then it’s
more effort. Lastly, we wanted to create a common language for teams from design to code.
Not only what you see on the front-end but also within that [ Indiscernible ] to create
a common language that would help teams to work more efficiently and create products. Here is the vision. To provide the American
people a sense [ Indiscernible ] navigating government services online all the while offering
[ Indiscernible ] to create beautiful and accessible websites. Here are a few of the core values. We wanted
to make the best [ Indiscernible ] we wanted to bring the best practices into the system
in order to be very easy to use. We wanted it to be accessible out-of-the-box. Making
a government website, by law they have to be 508 compliant. We wanted to build that
into what we made. From the actual code to how to use it in the documentation and having
guidance around that. We wanted it to be flexible. We wanted to design flexibility, having the
system handed down to you and being told what to follow — we wanted to make the system
be able to work with whatever you needed making the system flexible was a core need. Lastly,
we wanted to reuse as much from some private sector and public sector that have been doing
these design systems already. Within each component you will see us talk about later
the modularity of each [ Indiscernible ] even within our more complex components. We were
using bits and pieces — so reusability is a core principle. Here is a common question that a lot of us
think about when starting a new project. [ Indiscernible ] what we found after talking to a lot of
developers is that they don’t always have the time to build system [ Indiscernible ] there
isn’t enough time to do it. A lot of us link to — towards existing [ Indiscernible ] there
are many others like foundation, [ Indiscernible ]. But we found was that the custom style
to create the designs we needed, they require a lot of modification [ Indiscernible ] and
that leads to a lot of extra [ Indiscernible ] in our code base. In order to make things
accessible you have to [ Indiscernible ] things a lot. This makes it hard in your always updating.
It’s not a core [ Indiscernible ]. You have to prescribe [ Indiscernible ] it happens
to differ what we recommend. For example, [ Indiscernible ] uses presentation in their
classes while we recommend [ Indiscernible ] by function. You might say, navigation left
and you would say a primary navigation [ Indiscernible ] we use the presentations of the class but
market to market by functionality. What are we building? I will pass it to — the
goal is that we wanted to develop a robust flexible resource for federal government websites.
The principles are consistency and flexibility. We wanted to follow [ Indiscernible ] and
best practices. Make it easy to use. The code should be clean scalable and maintainable.
Everything on it should be [ Indiscernible ]. Let’s build it. What is [ Indiscernible ] I’m gonna go a little bit into what that means
and was in the current version of the standard. Currently if you go to the standard site and
you want to start using it and download the standard, we are including a set of assets
which is [ Indiscernible ]. We are including both CSS and sets. [ Indiscernible ] we will
go into that later on. [ Indiscernible ] to provide court spirits to everybody. They use
HTML 5 to ensure [ Indiscernible ] as well as search engines will understand. So Satz,
we decided to build the foundation of standards on sets which is a preprocessing language.
The purpose is to help you work smarter and faster. It will eventually improve the syntax
and functionality by providing expert features and handy tools. It was essentially built
to fill a lot of forthcoming in [ Indiscernible ]. Many of the features are things that [ Indiscernible
] developers have been wanting. It’s very robust, it has a very wide community of support.
It’s been around for many years. The most popular tree processing language. That’s why
we have chosen it. Additionally, we are using [ Indiscernible
] these are two separate libraries that are often used together. Where using urban for
simple lightweight [ Indiscernible ]. They are
both open-source products from a company called
[ Name indiscernible ]. It will additionally build on [ Indiscernible ]. It mainly uses
a mixing structure meaning that it doesn’t provide you with classes. [ Indiscernible
]. Meat is built on top of bourbon. Developer [ Indiscernible ]. Our organization and file structure. We decided
to split up at our CFS files into different sections. The sections are vendor, which is
for any third-party library that we are using. Currently we are using bourbon meat which
we just talked about. As well as normalized CFS which will take your CFS and send it to
a — sedative certain standard or style that will work across browsers and make it easier
for you to develop. Next we have the course style. These are utilities and systems that
are going to be used by the rest of the standard. So we of things like variables which are over
rideable we have base classes for very basic things in HTML. We have our grid system we
have a set of utilities that are mainly [ Indiscernible ] that are used by the rest of [ Indiscernible
]. Next we have elements. These are individual parts. — Of the styling that Wanda being
used to make up larger parts. A lot of the stuff and elements are just plain HTML tags
that are being styled such as [ Indiscernible ]. Other parts are certain classes that are
applied to different tags like labels. Next we have components. Components build on elements
and create larger pieces that are UI that can be used. Here we have things like [ Indiscernible
] or a footer. Or we have foreign functionality and church functionality. Together these structures
make up a full [ Indiscernible ].>>And important concept that we use when building this library
is what we called [ Indiscernible ]. This is different than a lot of the CFS data that
— is a new idea CFS where this was not being used as much. The first aspect of it is that
everything is modular. This means that sites are built from combining individual models
rather than [ Indiscernible ]. To take a full [ Indiscernible ] style that whole page and
one stylesheet. The problem with this approach is that if your site grows and you go from
10 pages to 100 pages it’s for hard scale that styling functionality. You will wind
it having hundreds of stylesheets. Instead where using a modular approach which means
each site is made up of components that work on their own from here it’s very scalable
because what to built a large amount of components you can pretty much built any type of page
with the various components and you will even have to touch the [ Indiscernible ]. Another
part of this is [ Indiscernible ]. The idea here is removing repetition and ensuring competitive
can exist on their own. We remove repetition by ensuring that any functionality that two
components share can be made to share location which will reduce the need for having to repeat
our code in different places. This can be done with using classes as well as using SAT
functionality. We also ensure components can exist on their own. What I mean by this is
that certain CFS standards say that — or certain gold CFS [ Indiscernible ] in the
footer and in the next [ Indiscernible ]. If you have an 8-iron they won’t style it has
to blog in the footer [ Indiscernible ] and only then will that Selby picked up. [ Indiscernible
] are more concrete in that we will style component and we will style [ Indiscernible
] for the component the same way. A component does not need to be in any structure on the
page in order to function. It can be at any place on the page and it will still have the
same styling functionality it’s supposed to. The third property is composition.General.
of — general program practice is used composition over [ Indiscernible ]. What this means in
CFS is that building up on style and components rather than adding on style during [ Indiscernible
]. With this allows CFS — keeping things unspecific and very easy to override. As well
as being able to build things together so you can compose [ Indiscernible ] which is
a very modular and easy way to work and scale it very well. The CFS design, there are other things we
did hear. Once again we used [ Indiscernible ] coding style guide. Which is the CFS coding
style got in it specifies general rules and principles that we want to apply to all of
our CFS. — As a standard. We developed that style guide a few months ago and we decided
to use it for the standards Project. Part of the style guide is that [ Indiscernible
] which I will go into the next slide. We also namespace all of our classes. If you
look at the code, all of the CFS classes are prefixed with the you — USA. The reason for
doing this is when you are using the standards and you have your own styling if you input
the standards in CFS what are the chances that that CFS will override some of your in
CFS or that you will override some of the standard CFS without actually meaning to this
can be the case where we create a footer elements but you are — [ Indiscernible ] it will be
pretty much an overlap there that could cause things to break on the site. Namespace our
classes to eliminate this. The only way that this could possibly happen is when you name
one of your classes USA something another feature is that you know where the styles
are coming from so if you style a certain element on your page and it looks different
than what you might consider. You can find out if it’s coming from the USA style
guide. Specificity. Specificity in CFS is the principle
of — a rule is more specific than [ Indiscernible ]. There are a lot of things that control
it. If a rule is more specific than another than the styles were override the other rule.
Is a very important aspect of CFS. A lot of what CFS is built upon. When we were building
our standards we decided to be deliverer — deliberate about specificity. When you’re selling an
element rather than just using [ Indiscernible ] in order to style it we chose to — to select
a base made on — based on specificity. For instance, if we have an alert where we always
want them to be read because an alert its standard to have red color. And we want to
make that more specific of a rule. And we have something we want to be over rideable
by the user [ Indiscernible ] and we will make it less specific. The third — the other point is that [ Indiscernible
] this allows [ Indiscernible ] to resize the text where as [ Indiscernible ] units
are more exact. It also allows us to change [ Indiscernible ] on the container of the
current element that is being styled. Which is better for [ Indiscernible ] and other
practices. Back to the [ Indiscernible ] naming convention
normal BM is a standard naming convention stands for block element modifier. This is
an example of it. If you have [ Indiscernible ] a block is a component or one that — what’s
in a block can have various elements. There can be any number of elements within a block.
As you can see here it has a double to separate it. Then you have the modifier which is — it
can modify [ Indiscernible ] and is modified to be simpler. Rather than having underscores
and double dashes, we are just simply using a dash for every type of separation. We are
also using underscores the things that have more than two words or are a single unit.
The reason we chose this modified BEM is that in the research in the library we found people
were hesitant about the complex city of the BEM naming convention. We also found that
people were hesitant about longer class names. They felt more comfortable with [ Indiscernible
] classes. By using this modified BEM we were able to address this concerns . Responsive design was very important for the
project. It’s because more and more people are accessing services on a great range of
devices. For example, just looking at our analytics the other day, we had over 1000
streaming solutions. This is crazy and nuts. It’s another reason why our price point classes
are more generalized. It’s not even useful right now to think about local tableting desktops
because there’s so much variance. We chose something that is more lenient in something
more along the lines of small, medium and large. That can be adjusted as well for each
— for your needs. A little bit about our CFS. We are using [ Indiscernible ] within
our CFS to enforce a simpler base CFS for smaller screen. And increase complexity larger
breakpoints. We start with the smallest, basic layout. Traditionally you’ll see a lot of
single column layouts. As we expand out, that’s when winds — increase our complexity. Another decision for the system was user variables.
We decided to use sitewide values for variables for things like color, spacing and bond. That
is located in its own variables file. What this means is it’s very easy to override these
variables for your project. It something you could use a [ Indiscernible ] for your own
variables and override the names of them to color differently, spacing things and a bunch
of other variables. This also maximizes reuse and reduces repetition. By ensuring that all
shared values will be using a variable. This means that whenever we have to change the
library rather than having to change all the places where a value is used, we could just
change the variable and it will change in all locations. Our grid uses a bourbon [ Indiscernible ] grid.
With three grid points. On e aspect of the grid point is they are not based on necessarily
on responsive design, they’re not based on actual devices. They are more Freeport. We
also have a container class. [ Indiscernible ] grid
is for a grade that has spacing on the inside [ Indiscernible ] for full-page grid.>>
Accessibility is one of the most important
things about the library. We are following sections 508 of the rehabilitation act which
is in the American disabilities act. That references [ Indiscernible ] and also includes
AA color contrast requirements. Assess ability is definitely baked in the colors that we
are choosing to different implications of [ Indiscernible ] and the code. It does not
mean that it’s hands-off. As you’re going in there using the system you want to make
sure that you follow the accessibility guidelines below each component. It will explain when
to change certain things. For example if you form and you want to change it from a name
to the city, let’s make sure your IDs match what’s in the label. Always make sure that
as you are using the components that you read through. Testing for accessibility. During
development, we use automated tools like HTML code sniffer or Google accessibility audit
tools in the [ Indiscernible ] and accessibility standards. We also recommend the posse yellow
group punchlist which is a great checklist of basically had to make sure that your component
— components are following accessibility guidelines. For a final release, [ Indiscernible
] review is always the best way to ensure a quality user experience. We recommend using
a [ Indiscernible ] and inaccessibility EPI inspector tool like Microsoft and spec tool
available [ Indiscernible ] or Mac’s built-in screen meter. For performance it was an aspect that we consider
when we were designing the system. I would say throughout the design of it when sure
that we didn’t use any really fast or we didn’t do anything bad for performance. In the area
where performance is the most important was related to [ Indiscernible ] we had different
[ Indiscernible ] typography set up includes [ Indiscernible ]. There different typography
set up that you can use based on your own performance and design requirements. If you
go to our page and look at these different typography setups, we include an idea of what
their performance would be like. So you get a sense of what a decision will need for your
performance. This ensures what you will need for your own performance while keeping the
[ Indiscernible ] library.>>If this sounds good to you and you want to know how to use
this right now, before we get into details on implementing it I want to say that if you’re
just starting out this is great. You could probably use the whole thing and you would
[ Indiscernible ] make sure you link for it. If you’re in the middle of a project, it might
be best to think about how can you fold in parts of the standard into your project rather
than the whole thing. For example maybe you just want to use our fonts and colors and
leave the rest of your setup and system as is lastly, if you have an existing site already,
it’s going to probably require the most work and it might not make sense to your agencies
needs. Maybe the guidelines for parts of your project like how to make things accessible.
You’re always good one know how to do that lastly, you can always think about how can
we work together on the next one. If you actually do want to use the design standards for the
following project.>>Setting and that, there’s two ways for the standards. One is to use
the CFS. Either way is to use — setting it up with the SAT. This depends on your current
setup for your sites. As well as what you’re trying to get out of the standard. When you’re
setting up the CSF you probably don’t need to change any of our variables. You don’t
need to change the style such as the color and fonts. I should also mention that this
is about the setup as it doesn’t require any sort of build process. To set up the standards
with CSF you would download our app folder. This can be found on the web standards website.
What you have this app folder in your main group or site then you will link the main
CSS file into the head of your HTML document. Y’all that link the components CSF file into
your HTML document. [ Indiscernible ] to ensure that it loads. If you are interested in configurability and
let’s say that you want to change our base colors across your site or our fonts or any
other variables. Then I would recommend setting it up [ Indiscernible ]. This is a little
bit more complicated because it would require you to have the SAT set up and running for
your site. It can be well worth it — [ Indiscernible ]. Download the Alice
folder — Atlas from our website. The CSF file — [ Indiscernible ] this would be like
including urban or meet in the library. [ Indiscernible ] here you can override any variables that
are included in the web standard. Once again you have to link the components CSF file into
the document of the body. Now I thought we could take a little look
at the actual website standards. So you could get a sense of what it looks like and how
to use it. Let’s view it really quickly. The getting started page will get you a brief
overview of different aspects of the CSS architecture and that we talked about today and were things
are and different pieces of [ Indiscernible ]. Is always going to be there. For example,
when we go into the visual style, we have some of the typography that Mark was talking
about earlier. If you click and when you’ll see that we have these for [ Indiscernible
] in this package. Right here says how that page performed [ Indiscernible ] is going
to be fast. Going to something that the love it more heavy for example below here. It’s
not going to be as quickly loading. Those are things to keep in mind. Below that we
have colors, secant see the values.>>[ Indiscernible ] and we have primary and secondary in the
background colors as well as examples of different uses of those colors to make sure that their
accessible. Lee, this is a grid. You can see how things
reformat. That’s how the grid works. We have a codes right below so you can just copy and
paste and use it as well as the implementations and accessibility documents below. That sort
of — click there are a few more things. These are alerts. Living live code samples that
you can play with. One cool thing, is probably this password reset. It is life and you kind
of get the
validation as well. That’s really neat. Hopping back, putting it to work. Basically we wanted
to show you a few examples of just over a month after our big unveiling of the standards.
You are to have a few great agency — agencies use it. From.USA.gov to [ Indiscernible ] which
was released yesterday as well as the USDA farmers website. You can get a sense and see
that they all kind of using the same fonts and they’re all kind of starting to get consistency
and coherency amongst themselves while being still different and unique to their needs.
That’s a great example of how people have been implementing it and how you can still
have variations but still have consistency throughout it. This is a prototype from the digital services
of VA. They made a great prototype of the appeals process of the VA. This is USA jobs
they did something really cool and they actually made a design system based off of our design
system. You can see it’s a bit different. Has the same format but it looks a little
different because they needed it to be different for their needs. Avenue come pundits like
this [ Indiscernible ] header. I think it’s so cool that USA jobs that they outlined their
diverse from our system — [ Indiscernible ] where they diverged because they have different
needs. Lastly the third piece, where the created something you — new was the main design standards. Lastly, we have this really cool templating
tool based on [ Indiscernible ] a USGS. You can take anything in pattern
library system and paste it on the left and you will see it live update on the right.
If you have time later I can show you guys as well. Moving along, what’s next and where
do we go from here? We have an echo. US website standards will continue to be a living maintain
product available across the federal government. The site will be updated regularly with new
features and revisions. Based on research and testing. We have a lot to learn. We are
going to want to collect your feedback and ideas sitting down with partners and interviewing
users and setting up new channels for feedback. Some of you have — [ Indiscernible ] periodic
calls or webinars. Next we will also develop a product roadmap for upcoming releases. This
is going to be [ Indiscernible ] the next features to be added to design test and build
regular releases. We are going to transition this to a GSA owned product team and establish
a dedicated team to maintain it. Lastly you will see more supporting documentation coming
up. We are going to provide language for [ Indiscernible ] to help people with senior stakeholder support
[ Indiscernible ] and figuring out the best way to share our rationale in community discussions.
>>Some of the features where looking forward to as we update the library, we’re going to
do some cleanup and [ Indiscernible ] two areas that I know we will probably focus on
our [ Indiscernible ] our JavaScript. Also [ Indiscernible ]. We also have some of our
selectors we might want to re-factor to reduce specific of the — specificity even more.
For discussion we are going to [ Indiscernible ] MPM module. You can use MPM to install the
standards [ Indiscernible ] the standards within your project. It will make it easy
to update the standards. You could just change your MPM file rather than having to re-download
the axis folder. We would also separate our [ Indiscernible ] from our style guide repository.
That aspect of the standards is a style guide. A way of showing the standards in their current
form. Will be separate that into its own [ Indiscernible ] and have a separate [ Indiscernible ]. We’ve
also been thinking about new components. This would be largely based upon feedback. We want
to build components that [ Indiscernible ] for our users. And other aspect is a template.
Currently the standards [ Indiscernible ] components you can use on our site. The standards show
the components individually. We want to show the components use in actual webpage by having
templates to show what it would be like to build an actual [ Indiscernible ]. We are
going to figure out what’s working and what’s not working. We are largely going to do research
with our developers and get feedback. To see what your struggle — struggling with and
to see [ Indiscernible ]. We need you, this isn’t going to be successful
without the help and insight from everybody that’s listening here today. And throughout
the government. This is how you can get involved and help. Tell us we think. What’ s working
and what’s not working. What’s missing and what you want to see in future releases. You
can see — send us feedback at US web design [email protected] You can contribute if you
want to build a feature that’s missing or if you know how to fix a bug if you find one,
you can submit code Orth — send ideas it gift — [ Indiscernible ]. Let us learn from
you. Show us your products. We want to see how the standards like and are applied to
real services and products. Send us links or screenshots of your works and projects.
Overall — we are going to do some Q&A.>>People have been sending them questions throughout
the presentation as well as through registration. I’m going to answer a few of those. Marco,
what is the status of the [ Indiscernible ]. This would mean the MPM package
— I think there was questions about what we wanted to name and who would be the owner
of the module. Where still working — right now we are debating — debating or two separate
[ Indiscernible ] or two separate MPM. Once we figure out those questions I think we will
have the module up. There is also the discussion about other modules that will be — I’m not
sure if we will invest in those are not. I think we do have a [ Indiscernible ] module
— How should government standards differ from
development and industry standards and why? In terms of development I would say the biggest
different is visibility wears a lot of private industries just to focus as much on accessibility
or dump it at the top of their to do list because flexibility is very important. Besides
that I think that having something — [ Indiscernible ] would be good while keeping of basic visible
style. Another question that came in is about updates.
How are changes going to be indicated to the sites that use them or how can people keep
up with changes as they happen . I think the MPM module will go a long way
to help him. Wheneve r we come up with a new release we will [ Indiscernible ] minor releases
and [ Indiscernible ] will be automatically installed when you run MPM. When we do major
releases, it would be easy for developers to locate their NPM configuration and pull
up the latest. And then release it. Besides MPM I think that communication is going to
be important here on our part we can communicate very well. Have developers update when needed.
Also projects that inshore that we don’t break any existing code. One aspect of this is — our
goal is to not change any of HTML as a standard update. Especially for minor or [ Indiscernible
]. HTML examples [ Indiscernible ] that’s what we want to keep the same throughout all
of the releases. I think that’s how we will ensure smoothly and easily. Another point to add is that we are using
semantic versioning so the 0.8 — whenever we add new features you’ll see that number
change. The last one is just for minor patches and fixes but should not be any changes before
that. Anytime we did do a release you will be able to see exactly what was changed. Then
what are your thoughts about post CSS — any plans to move towards that? I personally am a good — big supporter CSS.
I like the tool. I thought about how we would make the standard easier to use for CSS and
I think it would be something around changing a lot of our variables to use the [ Indiscernible
] CSS [ Indiscernible ]. I think it would be possible. It’s something that I am interested
myself so I will probably look into it at some point. Maybe not in the immediate future. I also agree. I think that post CSS probably
have some things that it does better but overall [ Indiscernible ] is more robust and has [ Indiscernible
]. I think will be sticking with SAT for good while before switching to CFS — CSS. For
people that don’t know what it is it’s basically something created to match the features of
future CSS and syntax. It’s different in their people trying to lobby for example to get
the post CSS to look more closely to SAT because people like how fast the setup is already.
Another question, will online tutorials be provided?>>I can speak to that. We definitely
want to work on more in-depth developer documentation. I think having an online tutorial is a great
idea. I think we will consider that. Keep letting us know what will help you or what
you’re having trouble with and we will try to work on that with you. Another question, has any work being done
to incorporate more difficult or more complicated components such as mega menus, [ Indiscernible
] or complicated tables?>>We intentionally watched this with a limited set of components.
It’s an MVP [ Indiscernible ] it’s very very young and new. We want to kind of decent — get
something out there that was a base level of things he needed to get a website started.
And to test the water with it. I would definitely say that in the future we will test and see
what act people actually need. And bring in more complicated robust components in the
future. Captioners transitioning.
How do you see these in the [Indiscernible]? I’m not sure if there will be a way for us
to try and stop that. We have a decision design itself. And to put it in a page,
and inherently this we cannot modify ourselves to heavily. I don’t think there is any way
to stop people from changing .>>Yes I go on to say that we made this thing flexible.
If you need to change something for your agency needs, the color, the branding, — we fully
expect that to happen. I think that is finance great. What I said earlier it shows a good
way for the standards to be reinterpreted for the agency needs. Let’s see another question
that has come in. What was the process for working on the new
site for FDA?>>library — we used a pattern library
for the site, we didn’t really have any — actually
we didn’t know , we are finding new site , kind of bubbling up. If anybody does have questions,
on how to use it for your own needs, feel free to ask us. We would be happy to help. Another question. Are their mobile guidelines
about using standards?>>Marcus, do you want this? Sure. I would say the standards are built
for mobile use. They are responsive. I would say the best gathering I would say to test
mobile , in a easy way , there is a tool you can use on your computer. And what this would
look like such as chrome desktop , that would be one of the tools to do that. To ensure
as you are developing you always have the view in mobile, you never forget about it.
You have to — you don’t have to scramble to get it working label — later. Any thoughts on these as Web components? Yes we did SSS at some point in the standard
— assess this at some point in the standard. Not all of this in general we like to make
this to require the job description, the standard and the component we can move outside of the
box. I think [Indiscernible] of the standards, we would be interested in the standards and
the components, a community member could take on. To support, yes. Great. Are you going to be using the framework
such as [Indiscernible]? The standard that’s in a different space than
the framework would. In the same way as what component? — If someone wanted to integrate
the components, to make them easier to work together, personally we do not want to make
the Web components tied any firmer, they change a lock — a lot in the framework, we are already
using 18 app. The answer I guess it would fit in a different
space then using a framework, we would be open to the community, it is easier for the
web standards to work. Great another question came in. Some agencies have selected other framework
as their division , yes — we have already seen agencies use the combination of the Design
Standards and the framework such as the foundation we mentioned earlier. I want to say it is
in conflict with the division. There are different ways to use the design standard, and entry
points. I think you have to make the decision for your own specific need an agency. This
stuff has been around for five years. Thousands of hours of more work. The purpose is very
different. However for example , they do have a lot more just for the fact that they have
been around longest. That is a reason why we have used the framework and the design
standards, for styling and other components. Hopefully that answers that question. With
the.>>– Let’s see. What is the process ? Will there be funding required, or free
resources to use?>>Do you want me to answer that? Sure. They are free to use it and open source, you
can go to the library, make modifications to it. Open source and free. Awesome I will agree with that. Let’s see what else. I think there is a question
about performance. People want to know what amount of time is considered acceptable for
the web applications? Or any other considerations that people should be aware of for performance? I guess I have a lot of reservations. I am
writing a guide on this. I am happy to share this with people once completed. I would be
very hesitant as using page load in general as a metric, it is not a good way to measure.
The user performance. Instead use something speed Index which would test the webpage . Anyway
I don’t want to give an actual number four — for what your home load should be. To look
at a lot of things, and government it is more good sites or performance sites that should
have experience to your site . To see what their performances, and in this case, it would
be looking at similar sites . And then 20%. That would be a good baseline of what the
performance should be.>>In terms of guidance around imagery and videos, animation from
the website, we want to know if there will be additional guidance forthcoming. In the
next phase of work I think that is the next great idea. A desire for this will definitely
try to work on that. Let’s see some more questions. Why did the dots not mention [Indiscernible]
, but a bunch of other libraries?>>I guess the longer term plan is not to have this as
a tool. We will not be building SASS, we will be using MPM, or even an output to SASS , that
is the main reason why we didn’t mention it. Let’s see, also the SASS we are using we are
using the ghost script, that kind of mapped, and that would be the reason as well?>>Let’s
see can we answer one more question here?>>Does somebody want to know? — I’m guessing the system response, that
was for the design decisions, the designers wanted to give a look and feel for the government
websites. We did a lot of user testing with many different fonts, those were the ones
that we felt worked the best to represent government websites. Government websites as
a whole. If you click on visual style and font, you can learn a lot about the one we
chose. It less — it does look like we are out of time. Thank you there were 10 of questions hopefully
— time of questions . There were a ton of questions. I hope we got
through all of them. Is that gsa.gov?

Leave a Reply

Your email address will not be published. Required fields are marked *