I have inherited a non-responsive website that was created using reactjs. It is a fairly large website, that uses fixed layout. I have been tasked with evaluating/measuring the risks/effort of making the current website responsive. As i see it, these are the different things that I need to evaluate/accomplish that will help me with my goal
Go from fixed layout to relative layout. This might include using a grid layout or something similar
Decide on the app's flow, look and feel on mobile vs desktop. By this I mean, how should the links look when viewed in a mobile phone (maybe a hamburger menu) vs links that are laid out flat in a desktop browser.
What does it take to make individual components that make up the website responsive using media queries.
My question is should I prioritize one over another for whatever reason? And am I missing anything else that I should be focussing on
Thanks
K
Related
My first attempt at a RWD site was for a simple one-page site for an NFT project. It didn't use media queries, but many lines similar to: max(value, calc(vw*x)) for margins, padding, font-size, etc.
I also was dependent on Javascript. If the screen was <400px I might have a header bar anchored to the top with a profile pic left, title center, hamburger menu right, content underneath. If the resolution was larger socials appeared in one spot, if larger, in the footer. If the screen was over ... 600px, I lost the top header bar; title became the first line in the main content area; hamburger popup menu now a permanent fixture as left navbar, PFP floated left in the content area.
Being new, is this good or bad? I only hear people speak of flex boxes and grids. Not rearranging layouts with JS. Since the layout and content is essentially within JS code, any attempt at SEO for naught?
Using max() and calc() can work for simple layouts, but can become difficult to maintain for more complex layouts. Flexbox and Grid is more effective and efficient for creating responsive layouts. When it comes to SEO, it's important to ensure that your content is accessible to search engines by including it in the HTML of your page.
Javascript is great for making pages dynamic and obviously improving some UX things, but you should know where and when to use it.
You should definitely use CSS and media query for responsiveness on your page. There are a lot of frameworks or libraries that make the css writing process a lot less painful (I use Tailwindcss and I think is a good one).
And as for SEO, if you create a page based entirely on javascript, you will find a lot of difficulties in this area. You should read about server-side rendering, which may help you to improve this.
Today we have a lot of tools that can help you with this, if you use React you have Nextjs, if you use Vue you have Nuxjs and so on.
So I have to give a presentation of a website I made. So I didn't have time to make it responsive. I have used position:relative and pxunits in margins and all. Will it change layout of website if I use duplicate option in windows 10 project.
If the projector has a resolution similar to a regular computer screen, it won't make a difference.
I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.
I'm using DNN 5 for a hobby site. I know asp.net development, but have never written a DNN module.
The site is basically a project log. I want content areas that combine text and image thumbnails in a page, like a set of instructions. When a user clicks a thumbnail, display a popup div containing a larger image modal like on a lot of sites these days. Basically I'm looking to wrap each image in functionality like provided by highslide JS, but I can't figure out the right way to implement highslide JS in DNN.
I'm not averse to buying a module that does this for me, but everything I've found is more gallery based. The main difference is I want to control individual images that are among/next to the text, not a set of of images for users to scroll through.
I figure this can't be too crazy an idea, someone must have done it before. Any tips on good approaches would be appreciated. I'm tempted just to go edit source, but that makes upgrading a pain...
Thanks!
If anyone else is looking for this functionality, there's a project on Codeplex which looks pretty good at least as a gallery for DNN. It implements the highslide type popups well.
http://wnslightbox.codeplex.com/documentation