I originally designed the whole website (single page) responsive, readapting simply using css and some inline classes from bootstrap 4.
Now i found myself in need of redesigning the whole desktop version (or let's say with a very different structure from how it currently looks on mobile).
So I'd like to keep the html i have and keep using it for mobile, and modify a copy of it and use it for desktop.
The easiest way i thought has been to keep a single index.html file as now, duplicate the whole index.html inner part (between the div with class="page", which basically comes right after body) and set one of them to class="page d-none d-lg-block" and the other one class="page d-block d-lg-none" , using bs4 classes to show/hide content based on screen size.
I have various inline js functions and other functions in js files which refer to ids, so my feel is that creates errors because js see same ids twice or some stuff appears as the page load (due to the bs4 inline class to show the content), but just to be sure does anyone know if this is a correct thing to do (also SEO wise)? Or will it mess with the javascript doing so?
Make an existing page to become responsive is not an easy thing, but its much more worth than using a workaround to hide in small and hide in large breakpoint.
The reason is because:
You will have redundant component, means your app size will be doubled after you make it responsive,
and if you use static content without database, you need to maintain the content in two place (small and large breakpoint).
Spend more time on learning grid layout, and implement it in the right way. It will become much more easier for you to maintain your web app in the future.
Related
At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)
I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.
I´m starting to develop a Chrome App just to test it.
It seems that this kind of applications (desktop app at the end) must be developped with the single-page concept in mind.
But my application consists of three pages or "sections": One to control a web-cam, another to watch a streaming and the last to control a videoconference.
I´ve been reading and coding a bit within the Chrome Platform developing center, and just could find basic tutorials with one .html page.
So, my question is: What is the best way to load different .html pages (because i need to show different UI sections) in a Chrome App? I´ve seen that Google uses AngularJS to implement an MVC pattern, but i don´t know how to change from one view to another (thinking of views as .html pages) in that scenario (because i´ve never used AngularJS).
Thanks!
Is there a specific reason you need multiple HTML pages? It's pretty straightforward to do something like this:
<html>
<body>
<div id="tab_1">Section One</div>
<div id="tab_2">Section Two</div>
<div id="tab_3">Section Three</div>
</body>
</html>
and then show/hide each div according to which part of your app you want to show. CSS frameworks like Bootstrap are designed to work well this this kind of approach, turning the set of divs into a pane with a left nav, or a content area with a tab strip, all of which match the needs of a typical app UI.
Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.
Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.
Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.
I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});
The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/
I'm creating a small web application.
The application have several screens (list, inner list, item details, etc.).
I have a REST API on the server and I need to create the client.
At start I thought about HTML page for each main screen.
For every page I have a CSS and JS code.
The HTML will include only place holders (empty divs) that wwill be filled by the JS code.
Then I've decided to a create the application as single page application and using the URL with anchors to imply the state (domain.com/#list1#item1).
I've found this question to be informative about the architecture of the application, but I wonder:
1) How can I server the right CSS to the page in a clean way?
2) How can I define the page basic structure (the way the HTML divs do) in a clean way?
Unless your css is drastically different from one page to the next it should probably be in one page anyway. You will have a base css file that gets served up to every page and then page specific css files as needed for each pages. The idea is to reduce page loading overhead, but in your case it sounds like it is pretty small so putting everything in one css file shouldn't have too big of an impact.
As for page structure, start by just doing a rough drawing of each page on paper and then pencil in the divs. Then see how things overlap and what can be the master page layout elements and what are the actual page layout elements. then look at the common pieces to decide how to set up your divs.
To be honest, trying to do everything in one page, the layout of the divs is going to be a little bit messy at best. Unless it is related functionality like the steps of a wizard or something similar, putting it all in one page may cause down the road problems if you try to add or change things.