Design Concept: Responsive Web Design #52
Assignees
Comments
arcticicestudio
added a commit
that referenced
this issue
Dec 5, 2018
To simplify the usage of media queries (1) with styled-components (2), a utility function to generate media templates (3) will be implemented. It'll use the `min-width` parameter to fulfill the used "mobile-first" approach. The base size that'll be used has been implemented as theme property in GH-54 (4). References: (1) https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries (2) #52 (3) https://www.styled-components.com/docs/advanced#media-templates (4) https://github.com/arcticicestudio/nord-docs/pull/55/files#diff-90a2aa45c339ce4720a7fbbd23c65e3eR49 Associated epic: #52 GH-61
arcticicestudio
added a commit
that referenced
this issue
Dec 5, 2018
| Always adjust media queries to the content individually and not vice-versa. | The design supports the content. Not the other way around. Like documented in the GH-52, Nord Docs uses the mobile-first pattern and follows the great "Google Developer Responsive Web Design guidelines (1). The recommended way is to create media queries not based on any device sizes but individually based on the content which is unique for each project. This is the best practice and, contrary to most popular CSS framework like Bootstrap, the correct way since each site is different and there are thousands of devices and in the future new sizes will appear. Therefore, this commit includes the initial media query template functions that define the smallest `min-width` query `base` (`<320px`) and `minimal` (`>=320px`). References: (1) https://developers.google.com/web/fundamentals/design-and-ux/responsive Associated epic: GH-52 GH-61
Merged
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
>> Hero The first section is the "hero" of the landing page that renders a short project description and the animated SVG component "Arctic Landscape" (1). The animation is triggered through the "React Waypoint" (1) project. >> Color Palettes The 2nd and 3rd sections are about Nord's color palettes and they provide information about the modularity and contrast. All palettes are visualized through the new `ColorPaletteCard` component that consists of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format. >> "Nordify" The 4th section presents Nord's port projects which can be used to "nordify" the favorite apps and platforms of the users. It consists of the text content as well as a new illustration that might also be animated later on using a 3D parallax effect that renders based on the current mouse position in the section. >> Color Swatches The 5th section is about Nord's "native" color swatches. It consists of the same elements like the 4th section, but renders a new non-animated illustration showing a application UI with Nord loaded as color palette. >> Syntax Highlighting The 6th section is all about Nord's features to highlight code. Next to the text content and summary it also renders a new and animated illustration. >> Community The 7th and also last section presents details about Nord's communities. It renders the animated Arctic Ocean Fractal (3) component and a short summary about how to join and being part of the Nord community. >> Responsive Design All implemented sections follow the responsive design concept (4) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://github.com/arcticicestudio/arctic-landscape (2) https://github.com/brigade/react-waypoint (3) https://www.npmjs.com/package/arctic-ocean-fractal (4) #52 Associated epics: GH-52, GH-63 GH-112
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit implements all main organism components for the community page sections. >> Hero The first section is the "Hero" of the community page that renders a description about the page's purpose and an animated SVG component. >> Chats The 2nd section is about Nord's community chats where each platform is represented as card rendered in a two-column grid layout. Each card contains the platforms official logo, colorized with colors of the respective brand guidelines, a short summary about the platform/service and a link component that forwards to the community within the platform. Next to the official main channel each platform also provides sub-channels for all port projects. The following community chats of Nord are represented: - Arctic Ice Studio's official community on "Spectrum" (1) - Nord's official Keybase team chat (2) - Nord's official Slack (3) workspace - Nord's official Discord (4) space >> Content The 3th and also last section presents platforms where the community can create content and ask questions for and about Nord. Next to the official documentation these are knowledge bases also powered by community. Like the chat platforms in the previous section each platform/service is represented as card including the same information, rendered by the same components, and also structured in a two-column grid layout. Next to this, each card includes the latest three items (questions, posts etc.) of the platform's community rendered as link component with the item's title and metadata like tags, the name of the author and the relative creation date/time. The following community platforms of Nord are represented: - Latest questions from Stack Overflow (5) tagged with `nord` or `nordtheme` - Nord's official "/r/nordtheme" (6) subreddit All data is fetched from the official REST APIs from the respective platform using the axios (7) client. The processing of any date/time data is handled with date-fns (8), a modern and more lightweight ES6+ library with tree-shaking support that'll be used project-wide for Nord Docs to handle any other date/time data like e.g. blog posts metadata. >> Responsive Design All sections follow the responsive design concept (9) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://spectrum.chat/arcticicestudio (2) https://keybase.io/team/nord.chat (3) https://arcticicestudio.slack.com (4) https://discordapp.com (5) https://stackoverflow.com/questions/tagged/nord+or+nordtheme (6) https://www.reddit.com/r/nordtheme (7) https://github.com/axios/axios (8) https://github.com/date-fns/date-fns (9) #52 Associated epic: GH-63 GH-115
arcticicestudio
added a commit
that referenced
this issue
Feb 2, 2019
This commit implements all docs page section component including required changes to other components. >> Hero The first section is the "hero" of the docs page that renders a description about the page's purpose. >> Contents Cards The 2nd section is about Nord's documentation contents where each category is represented as card rendered in a two-column grid layout. Each card contains a topic icon, colorized with a accent color from Nord's palettes and a short summary about the topic's links. Currently this includes the "Getting Started" and "References" category. >> Responsive Design All sections following the "responsive design concept" (1) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) #52 Associated epic: GH-63 GH-117
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This epic documents the design concept for the responsive web design pattern of Nord Docs which is the most used, best thought out and Google’s recommended design pattern that provides a great user experience and the best SEO through multi-device & full mobile compatibility.
Mobile First
Nord Docs will follow the mobile first pattern using best practices and recommended techniques. Even though most of Nord's port projects are build for desktop applications, the colors can be used for all purposes and the website and documentation should be targeted for all platforms.
Approaching the mobile-first design is the best approach for a responsive design and Google's recommended pattern for mobile-friendly sites.
Compared to a desktop first approach, it comes with the “advantage” of forcing the designer/developer to identify the most important site elements and information to fit on the on the smallest screen. When increasing the available screen size, the used elements can now expand and scale to use more space, transform to include more content or visualize existing functionalities in more detail.
All components of Nord Docs will be implemented with this approach in mind to consistently comply with this principle.
The used resources for information will be the really well-written and extensive Google Developer Documentations with their web fundamentals, tools and their great and detailed guide for mobile-friendly sites that are the base for a good SEO. The Mobile-Friendly Test will be used to continuously check the development process while their recently launched web.dev website includes guides tour on how to build a optimized site from scratch. Next to Google's large knowledge bases and libraries there are other great resources and articles:
All implementation details and requirements are documented and tracked in the corresponding issues:
The text was updated successfully, but these errors were encountered: